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"> | |
| | |
Этот фрагмент позволяет использовать на веб-страницах даже те шрифты, которые не установлены у пользователя:
| | |
| @font-face {
font-family: MyFontFamily;
src: url('http://');
} | |
| | |
внес некоторые изменения в 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])) {
}
?> | |
| | |
| | |
| <?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;
}
?> | |
| | |
Это самый простой способ для осуществления вызова 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> | |
| | |
содержит коллекцию из более чем 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> | |
| | |
