

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 ResetRichard 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])) { } ?> |  |
 |  |  |
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> |  |
 |  |  |