Добро пожаловать, Гость!

 
Для нас. Форум для общения







Начать новую тему Ответить на тему  [ 1 сообщение ] 
10 полезных фрагментов кода для веб-разработчиков 
Автор Сообщение
Админ
Аватара пользователя

С нами: 8 лет, 4 месяца и 6 дней
Сообщения: 223
Репутация: 101
Ответить с цитатой
Автор темыСообщение 10 полезных фрагментов кода для веб-разработчиков
В этой статье я хочу предложить Вам 10 полезных фрагментов кода для веб-разработчиков. Эта коллекция включает в себя несколько CSS, PHP, HTML, Ajax и JQuery фрагментов. Взгляните!

1. CSS Framework для печати
Hartija является универсальным CSS Framework'ом для веб-печати. Для использования этого Framework'a следует скачать CSS файл здесь и используйте эту строку кода в веб-странице:
<link rel="stylesheet" href="print.css" type="text/css" media="print">


2. CSS @font-face
Этот фрагмент позволяет использовать на веб-страницах даже те шрифты, которые не установлены у пользователя:
@font-face {
font-family: MyFontFamily;
src: url('http://');
}


3. HTML 5 CSS Reset
Richard Clark внес некоторые изменения в CSS "сбрасыватель" от Eric Meyers.

4. Unit PNG Fix
Этот фрагмент кода исправляет прозрачность PNG (24 бит) в Internet Explorer 6.

5. Панели вкладок с закругленными углами
Этот код иллюстрирует, как реализовать простую панель вкладок с закругленными углами:


6. PHP: Использование isset() вместо strlen()
Этот фрагмент кода использует isset() вместо strlen() для проверки переменных PHP (в этом примере $username) установлен и составляет не менее шести символов.
<?php
if 
(isset($username[5])) {
// Do something...
}
?>


7. PHP: Конвертирование строки в кликабельные ссылки
<?php
function convertToURL
($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="" target="">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>


8. jQuery: Ajax call
Это самый простой способ для осуществления вызова Ajax с использованием JQuery. Изменените FormID и inputFieldId на ID формы и поля ввода вы которые вы хотите использовать:
<script type="text/javascript">
$(document).ready(function(){
$("form#formId").submit(function() {
inputField = $('#inputFieldId').attr('value');
$.ajax({
type: "POST",
url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}
});
return false;
});
});
</script>


9. Коллекция CSS макетов
Эта страница содержит коллекцию из более чем 300 сетей и CSS разметки готовых к использованию в Ваших проектах. Взгляните, это очень полезно.

10. Простое универсальное многоуровневое меню навигации
Несколько месяцев назад я нашел этот простой код (HTML + CSS + JavaScript для Jquery) для создания универсального многоуровневого меню навигации. Я думаю, что это простой и быстрый способ.Получается нечто вроде этого:

Пример HTML кода:
<ul id="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<ul>
</li>
</ul>

CSS код:
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}

И JS код, который следует вставить в секцию <head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showmenu(){
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility:"visible", display:"none"}).show();
}, function(){
$(this).find('ul:first').css({visibility:"hidden"});
});
}

$(document).ready(function(){
showmenu();
});
</script>


15 июл 2011, 17:55
Профиль ICQ WWW
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ 1 сообщение ] 


Кто сейчас на конференции

Зарегистрированные пользователи: Ahref [Bot]


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
cron
Мобильный вид
Powered by phpBB® Forum Software © phpBB Group

[ Время выполнения: 0.090s | 21 Запросов | GZIP : Вкл ]