Seditio.by

Создание сайта, например создание интернет магазина, всегда происходит в контакте с Заказчиком, который может в процессе работы предъявить самые неожиданные требования, первоначально отсутствовавшие в техническом задании.

Но иногда приходится иметь дело и с типовыми блоками, для которых по тем или иным причинам необходимо изменить разметку. Рассмотрим один из таких случаев.

Часто, верстая формы при создании веб-сайтов, приходится использовать мелкие "довороты", определяя состояние элементов веб-форм, например радиокнопок (radiobutton). Например, задание на HTML верстку может включать требование при клике по элементу button определять, произведен ли пользователем выбор.

Недавно в одном из проектов мы столкнулись со следующей задачей: необходимо было изменить написание названия компании-заказчика с обычного на написание только прописными буквами. Сделать это было необходимо быстро и "безболезненно".

При создании веб-сайтов часто приходится использовать сторонние jQuery-плагины, позволяющие реализовать многие популярные функции -- такие, как, например, карусели. Плагин jcarousellite является одним из самых удобных и простых в использовании скриптов, использующихся для формирования каруселей. С одним небольшим "но": в нем отсутствует возможность остановить автопрокрутку (autoscroll) при наведении мышью. Вопрос этот обсуждается довольно долго, но автор плагина почему-то никак не реагирует на него.

Между тем, проблема решается довольно просто.

Одним из важных аспектов работы любого JS фрейморка является скорость. Она во многом определяется тремя параметрами: качеством оптимизации кода фреймворка, браузером и мощностью вашего компьютера. В jQuery 1.4.2 разработчики заявляют значительное увеличение скорости работы.

На графиках наглядно продемонстрировано, что скорость выросла в сравнении с версией 1.3.2 более чем в 2.5 раза!

Кроме того, в jQuery 1.4.2 реализовано 2 новых метода: .delegate() и .undelegate(), которые призваны дополнить методы .live() and .die(). Эти методы упрощают работу с некоторыми определенными событиями.

Например, следующий код:

$("table").each(function(){
  $("td", this).live("hover", function(){
    $(this).toggleClass("hover");
  });
});

Теперь можно упростить до

$("table").delegate("td", "hover", function(){
  $(this).toggleClass("hover");
});

И, конечно же, в версии 1.4.2 проведена большая работа над ошибками предыдущих версий.

Для тех, кто до сих пор не определился с тем, какой фреймворк использовать, есть возможность протестировать скорости: $('CSS').framework или Task Speed . В результате наших тестирований Jquery 1.4.2 в браузерах Mozilla Firefox 3.6 и Opera 10.50 оставался бесспорным лидером.

Часто при просмотре блогов мы видим ссылки вида:

<a rel="external nofollow" href="http://seditio.by/page.php?al=cotonti">
	CMF Cotonti
</a>

Если с атрибутом nofollow все понятно, то external часто вызывает недоумение и вопросы.

Анонсирование контента является простым и эффективным способом продвижения самых популярных ресурсов вашего веб-сайта. Кроме того это еще один путь привлечения дополнительного трафика к давно опубликованным архивным статьям. Так называемые Featured Posts или Featured Content широко используются на сайтах любого уровня — от крупных порталов до персональных дневников — для вовлечения аудитории в комментирование и обсуждение тематического материала.

jQuery-плагинов для реализации данной идеи существует предостаточно. У каждого из них имеются как достоинства, так и недостатки. Большинство авторов старается вместить в плагин максимальное количество возможностей. Другие наоборот, забывают об универсальности и пишут плагины, ориентированные на узкие задачи, например, только на вывод графики. Исходя из этого мы сформулировали собственные требования к jQuery-плагину Content Slider.

Выбираем jQuery плагин Content Slider

Итак, нам потребовались:

• универсальность: вывод текстового, графического и смешанного контента
• простота: удобная, читаемая разметка с минимальным количеством контейнеров и стилей
• настраиваемость: настройки по умолчанию в самом плагине, пользовательские настройки — в шаблоне
• корректность в работе: отсутствие багов, глитчей и несовместимостей

После тщательного отбора был отобран плагин loopedSlider 0.5.5 от Nathan Searles. Порадовала аскетичная разметка (немаркированный список, вложенный в два дива), удобство организации стилей (всего 3 (!) обязательных и 6 опциональных) и предельная простота и беспроблемность установки.

Установка Content Slider в шаблон Cotonti

Прежде всего, мы поместили HTML-код слайдера в отдельный подгружаемый TPL-файл. Это редко используемое свойство шаблонов Cotonti на самом деле весьма полезно на практике. Оно позволяет без вреда для общего кода тестировать и внедрять вставки HTML- и JS-кода простым способом:

{FILE "skins/nevada/inc/slider.tpl"}

Вывод плагина Content Slider нам требовался только на главной странице веб-сайта, поэтому мы ограничили загрузку JavaScript-кода и стилей в header.tpl:

<!-- IF {PHP.z} == "index" -->
	<script src="skins/{PHP.skin}/js/loopedslider.min.js" type="text/javascript" charset="utf-8"></script>
	<link href="skins/{PHP.skin}/slider.css" type="text/css" rel="stylesheet" />
<!-- ENDIF -->

Кроме того, в index.tpl мы вывели для для администраторов полезную статистическую информацию вместо анонсов, которые им и так известны:

<!-- IF {PHP.usr.isadmin} -->
	{PLUGIN_POPULARPAGES}
<!-- ELSE -->
	{FILE "skins/nevada/inc/slider.tpl"}
<!-- ENDIF -->

Вот схематичное содержание шаблона slider.tpl:

<div id="loopedSlider">	
	<div class="container">
		<ul class="slides">
			<li>
				<h4>Pellentesque habitant morbi</h4>
				<p>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend. Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</p>
			</li>
			<li>
				<h4>Cras luctus fringilla odio vel hendrerit</h4>
				<p>Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit.</p>
			</li>
		</ul>
	</div>
	<a href="#" class="previous">Назад</a>
	<a href="#" class="next">Вперед</a>

</div>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider({
			autoHeight: 0
		});
	});
</script>

В блоке вызова функции указываем настройки, которые будут переопределять настройки по умолчанию, указанные в самом плагине.

Настройки плагина Content Slider по умолчанию

Class/id обрамляющего контейнера:

container: ".container"

Class/id контейнера, в котором будет происходить смена слайдов:

slides: ".slides"

Class родительского списка (без точки!):

pagination: "pagination"

Смена слайда при клике по нему:

containerClick: true

Если в сайдах будут использоваться собственные ссылки, данное свойство необходимо изменить на false!

Автозапуск слайд-шоу

autoStart: 0

Автостарт будет включен при установке положительного значения, которое будет определять интервал до начала автостарта.

Повторный автозапуск слайд-шоу

restart: 0

Рестарт будет включен при установке положительного значения, которое будет определять интервал до начала автостарта.

Скорость анимации (1000 = 1 секунда)

slidespeed: 300

Скорость фэйдинга (1000 = 1 секунда)

fadespeed: 200

Автоподбор высоты слайда

autoHeight: 0

Включить блок паджинации

addPagination: false

Пример работы данного плагина можно увидеть на главной странице нашего сайта.

О выходе jQuery 1.4.1 мы уже сообщали. Отличная новость для веб разработчиков. Но когда приступаешь к написанию на JavaScript с использованием jQuery, нужна документация о функциях, методах и возможностях jQuery. На официальном сайте эти данные искать порой довольно неудобно. Но у нас всегда есть альтернатива!

http://www.futurecolors.ru/jquery/ — настоящая шпаргалка по jQuery. Она существует давно и с появлением новых версий обновляется. Фактически это простая таблица всех функций jQuery. Вариант можно выбрать любой. Хоть распечатать и повесить на стену. Удобно, быстро, наглядно.

http://jqapi.com/ — ресурс по документации API jQuery. В целом эта информация не сильно отличается от документации, представленной на официальном сайте, но предоставления этой информации совершенно другое. Это дерево категорий с возможностью быстрого поиска по нему. Из сильных сторон: работает быстрее, да и дизайн светлее, а значит, текст читать менее утомительно для глаз.

http://www.ixedit.com/ — это вообще новое слово в скриптостроении: интерактивный (даже не просто визуальный) редактор скриптов. Назначение его настроить сайт на свой вкус без знаний в области JS. Насколько это востребовано, пока сказать сложно

Сегодня довольно сложно представить сайт, без движущихся вращающихся объектов, без анимации и тд. В данной статье мы рассмотрим создание эффекта, который так и назовем "летающее облако". Суть на нашем сайте будет равномерно прямолинейно перемещаться слева направо определенный объект, притом при достижении правой границы сайта, он будет исчезать, появляться слева и повторять вновь свое движение. Смотрели на небо?.. Итак, бесконечно.

Основная функция, которую мы будем применять в нашем уроке:

$(identificator).animate(Что_делаем, Время, Тип_анимации);

Что делаем – это собственно то действиек которое у нас будет происходить с нашим объектом.

Время – сколько времени будет длится действие в миллисекундах.

Тип_анимации (easing) - есть два параметра: "swing"(по умолчанию) и "linear". Linear – анимация разворачивается во времени равномерно. Swing – анимация развивается по параболе – сначала интенсивность усиливается, затем плавно затухает.

Пример использования:

$(".block").animate({width: "200px"}, 400);

Или еще пример, который запустит анимацию двух параметров одновременно:

$(".block").animate({width: "200px", height: "150px"}, 700 , "linear"); 

Теперь перейдем к решению нашей задачи.

Основная функция:

<script type='text/javascript'>
$(document).ready(function() {
function run() {
$("#cloud"). animate({left: ‘800px’}, 10000, "linear").fadeOut(400).animate({left: ‘0px’}, 0 , "linear").fadeIn(400);
run();
}
run ();
}
});
</script>

И сразу к разбору полетов: данная функция передвинет за 10 секунд наше "облако" на 800 пикселей, затем оно за 0.4 секунды исчезнет и переместится снова в левый край, затем наша функция вызовет сама себя повторно. Но окно браузера то не всегда 800 пикселей. Поэтому будем искать выход нашего положения. Школьная физика всегда начинается с равномерного прямолинейного движения.

Его формула:

v(скорость)=s(путь)/t(время)

Путь это ширина окна браузера, она у нас переменная. Скорость движения должна быть всегда одинаковой: нехорошо когда в узеньком 100 пиксельном окошке облака летают, а в огромном окне они будут еле ползать. В функции animate мы используем все-таки время, а не скорость.

t=s*1000/v

Время у нас указывается в миллисекундах, расстояние в пикселях, а скорость в пиксель/с. Осталось узнать ширину окна браузера, для этого используем функцию

 document.body.clientWidth;

Теперь компонуем наши знания

<script type='text/javascript'>
$(document).ready(function() {
var sks = document.body.clientWidth;
var sks1 = sks - $("#cloud").css("width"); // путь который продет облако
var skleft1 = $("#cloud").css("left"); // начальное положение нашего облачка
skl1= '+='+sks1+'px';
function skrun() {
$("#cloud"). animate({left: skl1}, sks1*1000/80 , "linear").fadeOut(400).animate({left: skleft1}, 0 , "linear").fadeIn(400);
// 80 – скорость облака
skrun();
}
skrun();
});
</script>

Наслаждаемся полетом!

На многих веб сайтах используется эффект загнутого края страницы для оформления угловых информационных или рекламных блоков. Такой эффект может быть не только статичным, но и динамическим. Cделать это можно при помощи незаменимой JQuery в связке с CSS. Изобретать что-то новое не потребуется: мы предложим вам готовые варианты по созданию динамических эффектов загнутого края страницы.

Simple Page Peel Effect with jQuery and CSS от Soh Tanaka

Способ достаточно простой, и в тьюториале достаточно подробно пояснены HTML- и CSS-вставки, а также JavaScript-код. Эффект, правда, слегка прямолинеен: нет того самого стопроцентного ощущения «загнутости».

The Sexy Curls jQuery Plugin

Еще один пример jQuery-плагина с открытым кодом. На этот раз «правдоподобность» эффекта достигается за счет использования drag-and-drop: край вы отгибаете на необходимое расстояние мышью. Плагин требует использования jQuery и jQuery UI.

jQuery Page Peel 1.2 от Smpl Multimedia

Пожалуй, самый «правдоподобный» эффект: в обычном состоянии загнутый край отбрасывает тень и ненавязчиво колышется, а при наведении мышью довольно реалистично загибается. Опционально в настройках можно использовать Flash.

Выводы

Какие-либо рекомендации по выбору плагинов дать сложно: использование Flash обеспечивает реалистичную анимацию, а jQuery уменьшает размер файлов и увеличивает скорость загрузки. Удачи в выборе!

Интернет технологии постоянно совершенствуются, меняются, дополняются. Сегодня уже невозможно представить поисковик, в котором бы не было автодополнения: мы вводим текст, а сайт сам пытается предугадать, что мы будем искать.

Данная технология уже стала популярной и в социальных сетях, пользовательских блогах и т.д.

В данной статье мы познакомимся украдкой с одним из плагинов для jQuery позволяющим нам сделать автодополнение на вашем сайте.

Для начала скачаем плагин.

В архив включены различные примеры использования. А так же CSS файл. Для работы надо подключить jquery, сам плагин и файл со стилями. Стиль настраиваем на цвет и вкус.

Использование

autocomplete (url or data, options)

Все просто — вставляем ссылку или JS массив и пишем опции. Ссылка в простейшем варианте должна возвращать простой текстовый файл, в котором каждая из опций разделена символом “\n”. Возможно использование Json.

Приступим к краткому разбору наиболее частных опций.

delay — задержка, выражается в миллисекундах. Для удаленного URL равна по умолчанию 400, для локального массива 100. Это надо для того, чтобы когда пользователь набирает текст, наш автокомплит не путался у него под ногами, не мозолил своим быстрым появлением, или наоборот — пользователю не приходилось долго ждать. А для url этот параметр сокращает количество обращений к сайту, базе и т.д.

matchCase — чувствителен ли набор к регистру, нужно только для массива.

matchContains — еще одна очень полезная опция, которая означает “содержит”, а не только “начинается с”, применимо для локального массива. Ни один из аналогов данного плагина не содержит подобной опции на сегодняшний день.

minChars — минимальное количество символов для отображения автодополнения. Опция нужна для URL. Позволит рационально снизить нагрузку на сервер.

multiple — еще одна довольно нужная и довольно редкая для аналогов опция, позволяет выбор элементов сделать множественным, то есть в один input могут быть введены несколько опций, разделенные multipleSeparator (по умолчанию “,”)

Пример работы данного автокомплита: демо

Описание всех опций и возможностей: справка

Решаем проблему кодировок

Неужели все так просто и легко? Практически да. Но автор этого платина использует только английскую раскладку клавиатуры. С русскими кодировками, как и со многими другими дела обстоят более прозаично. Плагин при работе с удаленными файлами неправильно передает текст. Суть ошибки состоит в том, что GET не позволяет передавать русские символы. Но не переживайте: легким и изящным решением руки мы это исправим.

Отрываем файл jquery.autocomplete.js, находим в нем

data: $.extend({
	q: lastWord(term),
	limit: options.max
}, extraParams),

Заменяем на:

data: $.extend({
	q: encodeURIComponent(lastWord(term)),
	limit: options.max
}, extraParams),

Этим мы «закодировали» строку

А на стороне сервера эту строку надо раскодировать.

$q = strtolower($_GET[‘q’]);
$q = urldecode($q); 

Теперь все работает как надо! Приятной работы и качественных сайтов!

Переменная $ стала ключевой переменной для многих JS-библиотек. Используют ее и два «титана»: jQuery и Mootools. Mootools ведет более жесткую политику и отдавать «$» никак не хочет. В результате этого возникает ряд ошибок и обе библиотеки отказываются работать.

Выручает jQuery. В ней же есть несколько способов избежать конфликтов. Рассмотрим эти способы подробно.

1 способ

После подключения библиотеки jQuery пишем следующий код:

jQuery.noConflict();

После этого подключаем остальные библиотеки Но теперь уже jQuery использует не «$», а переменную «jQuery»

2 способ

var $COTONTI = jQuery.noConflict(true);

Теперь мы используем не “$”, а переменную «$COTONTI»

3 способ

jQuery(function($) { /* любой ваш код $ */ });

Практическое применение и выводы

1. Я не могу сказать, что это хороший выход из положения. Мы обычно подключаем вторую библиотеку на сайт тогда, когда видим готовое решение для другой библиотеки, а в ответ получаем снижение скорости работы сайта, увеличение времени загрузки страницы. Но, поверьте, библиотеки равнозначны и если что-то уже реализовано для одной, значит и для второй уже есть вариант решения, просто надо хорошо поискать.

2. В CMF Cotonti по умолчанию используется библиотека jQuery, и если использовать пути решения конфликтов, то придется перелопатить все файлы, где используется данная библиотека и вручную переименовать переменную «$».

Так что используйте данные способы рационально!