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

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







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

С нами: 8 лет, 9 месяцев и 6 дней
Сообщения: 221
Репутация: 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 месяц и 2 дня
Сообщения: 50
Откуда: Switzerland
Репутация: 0
Ответить с цитатой
Сообщение 10 полезных фрагментов кода для веб разработчиков
Yes it is a fantasy


16 фев 2018, 11:45
Профиль ICQ YIM WWW
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 2 ] 


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

Зарегистрированные пользователи: нет зарегистрированных пользователей


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

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

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