Очередной блог фрилансера » jquery

10 отличных jQuery-сниппетов

dreamhelg — Tue, 22 Nov 2011 11:39:00 +0000

jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта.

Предзагрузка изображений

Предзагрузка изображений весьма удобна: вместо того чтобы загружать картинку по запросу пользователя, мы предварительно подгружаем их в фоне, для того чтобы они сразу были готовы к показу. С помощью jQuery это делается очень просто, смотрите: [javascript] (function($) { var cache = []; // Аргументами являются пути картинок, относительно текущей страницы $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages("image1.gif", "/path/to/image2.png"); [/javascript] Источник: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Ссылки target=”blank”

Следующий фрагмент предназначен для того, чтобы все ссылки, имеющие атрибут rel=”external”, открывались в новом табе/окне. Код легко можно изменить, например открывать ссылки только с определенным классом. [javascript] $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); /* Использование: catswhocode.com */ [/javascript] Источник: http://snipplr.com/view/315/-jquery–target-blank-links

Добавление класса тэгу при включенном ява-скрипте

Этот пример состоит всего из одной строчки, но он является самым простым способом определить включен ли ява-скрипт в клиентском браузере. Если ява-скрипт включен, класс hasJs будет добавлен к тегу . [javascript] $('body').addClass('hasJS'); [/javascript] Источник: http://eisabainyo.net/weblog/2010/09/01/10-useful-jquery-snippets

Плавная прокрутка по ссылке

jQuery хорошо известен своей возможностью легко создавать красивые визуальные эффекты. Одним из таких эффектов, является плавная прокрутка страницы, при нажатии на ссылку. Следующий пример демонстрирует пример такой прокрутки страницы, по клику на ссылку с классом topLink. [javascript] $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; }); }); [/javascript] Источник: http://snipplr.com/view.php?codeview&id=26739

Изменение прозрачности при наведении

Еще один красивый эффект – очень популярный среди клиентов – эффект затухания элемента при движении мыши. Следующий пример кода, реализует плавное изменение прозрачности картинки при наведении/отведении мыши. [javascript] $(document).ready(function(){ $(".thumbs img").fadeTo("slow", 0.6); // Эта строчка при загрузке страницы задает всем миниатюрам прозрачность равную 60% $(".thumbs img").hover(function(){ $(this).fadeTo("slow", 1.0); // Делаем картинку непрозрачной, при наведении мыши },function(){ $(this).fadeTo("slow", 0.6); // Снова возвращаем прозрачность 60%, при отведении мыши }); }); [/javascript] Источник: http://snipplr.com/view/18606

Колонки одинаковой высоты

При создании сайта с колонками, очень часто требуется, чтобы все колонки были одинаковой высоты, как это можно было сделать в старых, добрых таблицах. Этот пример кода вычисляет высоту самой длинной колонки, и автоматически задает ту же высоту всем остальным. [javascript] var max_height = 0; $("div.col").each(function(){ if ($(this).height() > max_height) { max_height = $(this).height(); } }); $("div.col").height(max_height); [/javascript] Источник: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4

Включаем HTML5-разметку в старых браузерах

HTML5 – это будущее клиентской веб-разработки. К сожалению, некоторые старые браузеры не умеют распознавать новые теги, такие как header и section. Этот пример кода, научит старые браузеры распознавать новые HTML5-тэги. [javascript] (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() [/javascript] Еще лучше будет, если вы подключите .js-файл в секции вашей html-страницы. [javascript] [/javascript] Источник: http://remysharp.com/2009/01/07/html5-enabling-script/

Проверяем поддерживает ли браузер определенное CSS3-свойство

Ниже представлена простая jQuery-функция, проверяющая, поддерживает ли браузер клиента определенное CSS3-свойство. В этом примере, мы проверяем свойство border-radius, но его конечно, легко можно изменить на любое другое. Обратите внимание, что при указании свойства, вам нужно опустить дефис, чтобы предотвратить ошибку синтаксиса. Поэтому вместо border-radius, вам нужно написать “borderRadius” или “BorderRadius”. [javascript] var supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.length; return function(prop) { if ( prop in div.style ) return true; prop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase(); }); while(len--) { if ( vendors[len] + prop in div.style ) { // browser supports box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true; } } return false; }; })(); if ( supports('textShadow') ) { document.documentElement.className += ' textShadow'; [/javascript] Источник: http://snipplr.com/view/44079

Получаем параметры url

Получение url-параметров с помощью jQuery – довольно простая задача. Следующий пример это продемонстрирует. [javascript] $.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return results[1] || 0; } [/javascript] Источник: http://snipplr.com/view/26662

Отключаем клавишу “Enter” в формах

По умолчанию, форма отправляется на сервер при нажатии клавиши “Enter”. Но для некоторых форм, нажатие этой клавиши может вызвать проблемы. Следующий пример кода, поможет вам предотвратить нежелательную отправку формы, путем отключения клавиши “Enter”, с помощью jQuery. [javascript] $("#form").keypress(function(e) { if (e.which == 13) { return false; } }); [/javascript] Источник: http://snipplr.com/view/10943/disable-enter-via-jquery Перевод статьи “10 awesome jQuery snippets”, автор Jean-Baptiste Jung

Эффект неонового текста с помощью CSS и JQuery

dreamhelg — Wed, 09 Jun 2010 05:00:07 +0000

В сегодняшней статье, вы узнаете как создать красивый эффект неонового свечения текста, средствами JQuery и CSS, и совсем немного фотошопа. Результат, как обычно можно посмотреть заранее.

Шаг 1 – Дизайн

Первым делом, для достижения такого эффекта, нам нужно создать фоновое изображение, содержащее две, слегка отличающиеся версии текста. jQuery будет плавно переключаться между этими изображениями, создавая красивый эффект свечения. Итак, открываем фотошоп и создаем новый документ, 650х300 пикселей, в качестве фонового цвета указываем #141414. Для заголовка используйте свой любимый шрифт, в приведенном примере – это Century Gothic, размер 60px. После этого, Ctrl + клик по иконке текстового слоя в палитре слоев, для выделения всего текста. Используйте инструмент прямоугольного выделения, зажав Shift + Alt, для того, чтобы ограничить выделение текста одним словом. Далее, сохраняя выделение, создайте новый слой под названием “gradients”, и кликните по нему, для активации. Теперь, возьмите инструмент градиента и раскрасьте каждое слово, поочередно переключая выделение между отдельными словами. Выделение отдельных слов требуется для ограничения области действия градиента, к тому же мы предварительно активировали слой “gradients”, с тем, чтобы все изменения были сохранены на нем. После того, как вы раскрасите весь заголовок, дублируйте слой, расположив его ниже основного, и примените другой набор градиентов. В результате, у нас получилась картинка, с двумя разноцветными заголовками, так что мы легко сможем переключаться между ними, путем простого изменения свойства background-position в CSS. Вы найдете psd-файл данного изображения, в архиве с приведенным примером.

Шаг 2 – XHTML

XHTML-разметка очень простая, вам понадобится только контейнер (#neonText H1), который будет содержать две версии фона. [html]

Neon Text Effect With jQuery & CSS.

[/html] Слой layer1, постепенно уменьшая свою прозрачность, создает плавный эффект неонового свечения, за счет того, что он расположен поверх слоя layer2. Исходя из соображений поисковой оптимизации, мы также создадим текст, соответствующий надписи на картинке, который будет скрыт с помощью отрицательного значения свойства text-indent.

Шаг 3 – CSS

Стили, используемые для этого эффекта – также очень простые. Два элемента span, которым назначено одинаковое фоновое изображение, с разницей в позиционировании. Один элемент показывает только верхнюю часть картинки, а второй, только нижнюю. [css] /* The two text layers */ #neonText span{ width:700px; height:150px; position:absolute; left:0; top:0; background:url('img/text.jpg') no-repeat left top; } span#layer1{ z-index:100; } span#layer2{ background-position:left bottom; z-index:99; } /* The h1 tag that holds the layers */ #neonText{ height:150px; margin:180px auto 0; position:relative; width:650px; text-indent:-9999px; } [/css] Контейнер #neonText позиционирован относительно, с тем, чтобы внутренние элементы span, располагались точно один над другим. Кроме того, обратите вниманием на свойство text-indent, которое скрывает текстовое содержимое нашего контейнера.

Шаг 4 – jQuery

Последнее, что нам осталось сделать – создать анимацию переключения блоков. Поскольку мы используем jQuery (предварительно подключив его на страницу тэгом script), в нашем распоряжении есть два удобных метода fadeIn и fadeOut, которые мы используем в следующем коде. [javascript] $(document).ready(function(){ setInterval(function(){ // Selecting only the visible layers: var versions = $('.textVersion:visible'); if(versions.length<2){ // If only one layer is visible, show the other $('.textVersion').fadeIn(800); } else{ // Hide the upper layer versions.eq(0).fadeOut(800); } },1000); }); [/javascript] Функция, расположенная внутри выражения setinterval, выполняется каждую секунду, отображая/скрывая слой с первым контейнером span. Скачать архив с примером. Перевод статьи “Neon Text Effect With jQuery & CSS”, автор Martin

Анимированный ландшафт с помощью CSS и JQuery

dreamhelg — Tue, 01 Jun 2010 14:00:31 +0000

С появлением JQuery, многие разработчики, не слишком хорошо знакомые с javascript, начали использовать jQuery, благодаря большому количеству различных эффектов, поддерживаемых этим фреймворком. На сегодняшний день, JQuery является одним из самых популярных ява-скрипт-фреймворков. Такая его популярность объясняется простотой использования и наличием множества замечательных эффектов, для применения которых, не требуется углубленных знаний ява-скрипт. В сегодняшней статье, мы создадим анимированную картинку, с помощью CSS и JQuery.

Шаг 1. Подготовка файлов

Для начала, нам необходимо подготовить все файлы, необходимые для этого примера, затем создать один HTML-файл, один CSS-файл и папку, которая будет содержать все наши картинки. Прежде, чем мы начнем, посмотрите демо.

Шаг 2. HTML-страница

Теперь, создадим HTML-разметку, которая будет содержать контейнер с фиксированной высотой и шириной, а внутри него будет еще один блок, содержащий все элементы нашей страницы. В результате, у нас получилась вот такая разметка: [html]

[/html] Полная версия: [html] Animated Landscape Using CSS and jQuery

[/html]

Шаг 2. CSS-стили

Далее добавим немного CSS-стилей, без которых просто нельзя обойтись. Здесь следует обратить внимание на два момента – это свойство overflow: hidden, которое обязательно должно быть установлено для блока #inner, и абсолютное позиционирование, для всех, двигающихся картинок. На данном этапе, мы вынесем наши движущиеся изображения (облака и лодку) за пределы контейнера, путем установки отрицательных полей, с тем чтобы в дальнейшем, с помощью JQuery, получить красивый эффект. Далее CSS-код, необходимый для нашего примера: [css] #wrapper { width:800px; height:600px; /* main background image with sky, sun, river and ground */ background-image:url(images/Untitled-3.jpg); background-repeat:no-repeat; margin-top:10px; margin-left:auto; margin-right:auto; border: 10px solid #666; } #inner { position:relative; overflow:hidden; width:800px; height:600px; margin:0px; } #cloudone { position:absolute; margin-top:2px; margin-left:-200px; filter:alpha(opacity=80); /* CSS3 standard */ opacity:0.8; } #cloudtwo { position:absolute; margin-top:80px; margin-left:-300px; filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } #cloudthree { position:absolute; margin-top:60px; margin-left:-600px; filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.7; } #boat { margin-top:360px; position:absolute; margin-left:800px; } [/css]

Шаг 4. jQuery

Прежде всего, нам необходимо подключить jQuery, к нашей странице: [html] [/html] Здесь, мы дважды будем использовать функцию .animate, для анимирования облаков и лодки. Кроме того, мы создадим специальную функцию для того, чтобы облака и лодка двигались по кругу. Смотрите пример ниже. [javascript] function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } [/javascript] В приведенном коде происходит следующее: с помощью первой функции .animate, мы двигаем объект #cloudone вправо, на 1200 пикселей, причем объект будет двигаться со скользящим эффектом, в течении 10 секунд. Далее, вторая функция .animate возвращает объект на исходную позицию, с интервалом 0 секунд. Для того, чтобы снова запустить анимацию, нам необходимо суммировать временные интервалы обоих функций .animate, и с помощью функции setTimeout, мы сможем снова запустить цикл вращения картинки. Таким образом, можно анимировать все картинки. Далее приведен код, для анимации остальных изображений: [javascript] function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ //This time we need to move boat to left side so we put the margin to 1000px $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); } [/javascript] Теперь, нам нужно запустить всю нашу анимацию (cloudone(), cloudtwo(), cloudthree), сразу после того, как загрузится страница. Это делается следующим образом: [javascript] $(document).ready(function() { setTimeout("cloudone()",10); setTimeout("cloudtwo()",10); setTimeout("cloudthree()",10); setTimeout("boat()",10); }); [/javascript] Весь код, будет выглядеть вот так. [javascript] $(document).ready(function() { setTimeout("cloudone()",10); setTimeout("cloudtwo()",10); setTimeout("cloudthree()",10); setTimeout("boat()",10); }); function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); } [/javascript] Перевод статьи “Animated Landscape Using CSS and jQuery”, автор Vikas Ghodke

Создание навигации “волшебная линия” с помощью jQuery

dreamhelg — Sun, 14 Feb 2010 18:41:17 +0000

Такой “скользящий” стиль навигации существует довольно давно, мне всего лишь было нужно изменить его немного под собственные нужды, поскольку появилась такая возможность. Это оказалось очень легко. Можете взглянуть на два примера такой навигации на демонстрационной странице.

Идея

Идея состоит в наличие какой-либо подсветки (фонового изображения или подчеркивания), следующей за мышью, при наведении к какому-либо пункту меню. Это реализуется с помощью анимации jQuery. Следовательно, “волшебную линию” можно добавить только с помощью JavaScript. После того, как линия будет добавлена и стилизована, при движении мыши к любому пункту меню, ее ширина и левое позиционирование будет изменятся с анимационным эффектом.

HTML

Здесь обычный маркированный список. Ему назначен класс “group”, так как в примере будет использовано два горизонтальных меню. ID используется для указания элемента JavaScript. [html]

[/html] Обратите внимание, что список заключен внутри блока .nav-wrap. Это сделано в связи с особенностями стилизации. Панель, на которой расположена навигация, растянута на всю ширину экрана, но сама навигация центрирована внутри этой панели.

CSS

Здесь мы располагаем список горизонтально, и позиционируем волшебную линию абсолютно, поверх меню. Все остальное – просто наведение красоты. [css] .nav-wrap { margin: 50px auto; background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; } #example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; } #example-one li { display: inline-block; } #example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; } #example-one li a:hover { color: white; } #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; } [/css]

JQuery JavaScript

Когда DOM загружен…
Устанавливаем переменные, включающие текущее левое смещение навигации
Добавляем волшебную линию к навигации
Назначаем позиционирование и ширину волшебной линии равной значению текущего элемента списка
Также назначаем оригинальную ширину и позиционирование в качестве данных, с тем чтобы их можно было использовать для обратной анимации
При наведении мыши, подсчитываем новую ширину и левое позиционирование, и включаем анимацию для изменения этих значений
При отведении мыши от пункта меню, включаем анимацию возвращения линии на исходную позицию.

[javascript] $(function() { var $el, leftPos, newWidth, $mainNav = $("#example-one"); $mainNav.append("

"); var $magicLine = $("#magic-line"); $magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").position().left) .data("origLeft", $magicLine.position().left) .data("origWidth", $magicLine.width()); $("#example-one li a").hover(function() { $el = $(this); leftPos = $el.position().left; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); }); [/javascript]

Альтернативная версия

На демонстрационной странице, также имеется альтернативная версия “волшебной” линии, использующая фон вместо линии, и анимирующей цвет вместе с шириной и левым позиционированием. В основе все то же самое, отличается разве что CSS и JavaScript, который получает цвет для нового элемента списка, из HTML-атрибута rel. Для анимации цвета, потребуется специальный плагин. Скачать архив с примером. Перевод статьи “jQuery MagicLine Navigation”, автор Chris Coyier Примечение: После небольшой доработки, скрипт нормально работает в опере и IE7-8, насчет IE6 не знаю, не тестировала.

Создание формы со скользящими подписями

dreamhelg — Thu, 28 Jan 2010 08:47:34 +0000

Пару недель назад, я читал статью Люка Вроблевски. Для тех, кто еще не слышал о нем, Люк - автор книги о правильном дизайне веб-форм. В его статье, меня особенно заинтересовала часть, о расположении подписей внутри текстовых полей:

Поскольку подписи, расположенные внутри текстовых полей, исчезают при вводе текста, вместе с ними исчезает контекст введенных данных. Так что, если вы вдруг забудете, на какой вопрос вы ввели ответ, значит вам не повезло – подпись к полю вы, скорее всего нигде не найдете. Из этого следует, что подписи, расположенные внутри текстовых полей – не самое лучшее решение для создания длинных форм. Когда вы заполните форму до конца, все подписи пропадут! В этом случае, гораздо сложнее будет вернутся и проверить свои ответы. Люк Вроблевски

Эти слова стали хорошим поводом для размышления. Конечно, вы можете взглянуть на поле со значением “Вася Пупкин”, и точно сказать что это поле для ввода имени. Но в случае с длинными формами, очень легко забыть вопросы, на которые вы отвечали. Самым лучшим решением, по мнению Люка, является размещение подписей за пределами текстового поля, с тем, чтобы они всегда были доступны для пользователя. Я думаю это неплохое решение, но мы можем придумать кое-что поинтереснее.

Скользящие подписи

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

HTML

[html] [/html] Единственным необходимым элементом, для создания скользящих подписей (в моей реализации), является оборачивающий элемент (в моем примере DIV), и применение к нему класса “slider” (это легко можно изменить в JavaScript). На этом этапе, у нас получилась очень простая, и некрасивая форма:

CSS

[css] body { font: 12px / 1.3 Arial, Sans-serif; } form { width: 360px; padding: 10px 20px 30px 60px; margin: auto; background: #f7f7f7; border: 1px solid #ddd; } div { clear: both; position: relative; margin: 0 0 10px; } label { cursor: pointer; display: block; } input[type = "text"] { width: 300px; border: 1px solid #999; padding: 5px; -moz-border-radius: 4px; } input[type = "text"]:focus { border-color: #777; } input[name = "zip"] { width: 150px; } /* submit button */ input[type = "submit"] { cursor: pointer; border: 1px solid #999; padding: 5px; -moz-border-radius: 4px; background: #eee; } input[type = "submit"]:hover, input[type = "submit"]:focus { border-color: #333; background: #ddd; } input[type = "submit"]:active { margin-top: 1px; } [/css] Единственный, 100%-необходимый CSS в этом примере – это применение position: relatve, к оборачивающему элементу (DIV). Все остальное используется только для настройки внешнего вида формы, вы можете изменять его по своему вкусу. Теперь у нас получилась вполне симпатичная форма, в которой подписи расположены сверху непосредственных полей ввода.

jQuery

Теперь, раздел, который все обычно пропускают, переходя к демо-странице: [javascript] $('form#info .slider label').each(function(){ var labelColor = '#999'; var restingPosition = '5px'; // стилизация и позиционирование подписей $(this).css({ 'color' : labelColor, 'position' : 'absolute', 'top' : '6px', 'left' : restingPosition, 'display' : 'inline', 'z-index' : '99' }); // получение введенного в поле, значения var inputval = $(this).next('input').val(); // получение длины подписи, и добавление к ней 5px var labelwidth = $(this).width(); var labelmove = labelwidth + 5; //проверяем, если поле заполнено, то сдвигаем подпись за пределы поля if(inputval !== ''){ $(this).stop().animate({ 'left':'-'+labelmove }, 1); } // если значение поля пустое при фокусе, сдвигаем подпись влево // если оно осталось пустым, при потере фокуса, возвращаем их обратно $('input').focus(function(){ var label = $(this).prev('label'); var width = $(label).width(); var adjust = width + 5; var value = $(this).val(); if(value == ''){ label.stop().animate({ 'left':'-'+adjust }, 'fast'); } else { label.css({ 'left':'-'+adjust }); } }).blur(function(){ var label = $(this).prev('label'); var value = $(this).val(); if(value == ''){ label.stop().animate({ 'left':restingPosition }, 'fast'); } }); }) [/javascript] Вот и все, у вас должна получится полностью работающая форма со скользящими подписями. Обратите внимание, что форма остается рабочей, даже с отключенным ява-скриптом, это является основным принципом постепенного улучшения. Верите или нет, но все еще остаются люди, не использующие ява-скрипт при просмотре веб-страниц. Демонстрационная страница. Архив с примером. Перевод статьи “Form Design with Sliding Labels”, автор Tim Wright

Анимация jQuery: изучение за 7 шагов

dreamhelg — Thu, 21 Jan 2010 08:15:48 +0000

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

Вступление

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

Шаг 1. Основы jQuery

jQuery – это JavaScript библиотека, которая призвана помочь разработчику создавать многофункциональные, интерактивные веб-сайты и пользовательские интерфейсы, с использованием минимально возможного количества кода. Обычная строка кода, выглядит следующим образом: [javascript]$(DOM Element).something();[/javascript] Давайте разберем каждую часть:

$ - Сокращение для объекта jQuery. Если вы одновременно используете несколько фреймворков на одной странице, вместо знака $, воспользуетесь сокращением jQuery: jQuery(DOM Element).something();
(DOM Element) – Элемент, с которым вы собираетесь что-то сделать. Это одна из ключевых особенностей jQuery. Вы можете использовать CSS-селекторы для получения нужного элемента. Любые селекторы, работающие в CSS-файле, могут быть использованы здесь. ID, классы, псевдо-классы, все что угодно.
.something() – То, что вы хотите сделать с полученным элементом. Это может быть все что угодно от простого скрытия элемента до создания AJAX-запроса к обработчику события.

Сегодня мы рассмотрим только анимацию, и эффекты, связанные с ее функциональностью.

Шаг 2. Использование встроенных эффектов

jQuery предоставляет большое количество встроенных методов, которые вы можете использовать прямо из коробки. Это методы для отображения/скрытия элементов, с различными вариациями, включающими скольжение элемента и изменение его прозрачности. Вы также можете использовать ряд методов toggle, которые переключают видимость элемента. Прежде чем мы рассмотрим каждый из этих методов, посмотрите на основной формат вызова каждого метода: [javascript]$("#element").effect([speed, callback]);[/javascript] Выше представлена основная парадигма jQuery, сначала мы получаем необходимый элемент, используя CSS-селекторы. Далее, мы просто вызываем любой из встроенных методов. Несмотря на то, что большинство методов можно вызвать без параметров, часто возникает необходимость настроить их функциональность. Каждый из методов принимает как минимум два параметра: speed и callback. speed – определяет продолжительность анимации в секундах. Вы можете передать в качестве значения одно из ключевых слов: slow, normal или fast; или задать время в миллисекундах. callback - это функция, которая выполняется после того как анимация завершена. Вы можете использовать ее для чего угодно, например, сделать AJAX-вызов в фоне, обновить часть пользовательского интерфейса и многое другое. Вы ограничены только своим воображением. Далее представлен список функций, всходящий в состав jQuery:

show/hide – Методы для отображения и скрытия элемента. Принимают в качестве параметров speed и callback.
toggle – Метод, манипулирующий с отображением элемента, в зависимости от текущего состояния элемента. То есть если он скрыт, то отображает его и наоборот. Использует методы show и hide.
slideDown/slideUp – Вполне очевидные методы. Изменяя высоту элемента, создается скользящая анимация, отображающая или наоборот скрывающая элемент.
slideToggle – Практически то же самое что и метод toggle, за исключением того, что здесь используются методы slideDown/slideUp, для отображения/скрытия элемента.
fadeIn/fadeout – Изменение прозрачности элемента, для создания эффекта затухания.
fadeTo – Изменяет прозрачность элемента в соответствии с переданным значением. Как нетрудно догадаться, он принимает дополнительный параметр opacity, где 0 это полная прозрачность, а 1 полная непрозрачность.

В качестве дополнительной функциональности, метод toggle, может принимать в качестве параметра выражение, решающее отображать элемент, или прятать. Например, если вы хотите переключать только те элементы списка, которые имеют класс effect, ваш код будет выглядеть следующим образом: [javascript]$("li").toggle( $(this).hasClass("effect") );[/javascript] Проще говоря, функция toggle проверяет выражение, переданное ему в качестве параметра, и если оно истинно, то он переключает видимость элемента. Выражение, которые мы передали, в примере, проверяет наличие у элемента определенного класса.

Шаг 3. Создание собственной анимации

Очень часто, встроенные методы не удовлетворяют вашим потребностям, в этом случае вы, скорее всего, захотите создать свои собственные эффекты. С помощью jQuery вы легко сможете это сделать . Чтобы создать персональный анимационный эффект, вам понадобится метод animate. Это выглядит следующим образом: [javascript]$("#somelement").animate({property: value}, [speed, callback] );[/javascript] Метод animate весьма похож на любые другие методы тем, что используется точно так же. Мы получаем элемент, и затем передаем ему некоторые параметры. Принимаемые параметры – это то, в чем метод animate отличается от готовых эффектов. Параметры speed и callback выполняют те же функции, что и в предыдущих методах. Объект со свойствами, состоящими из определенного количества пар ключ/значение – то, что делает этот метод уникальным. Вы передаете каждое свойство, которое хотите анимировать, вместе с финальным результатом. Например, предположим, вы хотите анимировать изменение ширины элемента, на 90% от его текущего значения. Это можно сделать следующим образом: [javascript] $("#somelement").animate({width: "90%"}, 350, function(){ alert ("The animation has finished running."); } ); [/javascript] Указанный пример кода, анимирует изменение ширины на 90%, а затем выдает сообщение, что анимация завершена. Заметьте, что вы не ограничены в количестве. Вы можете добавить анимацию большому массиву свойств, включая прозрачность, поля, отступы, рамки, размеры шрифтов. Метод animate, удобен еще и потому, что может работать с любыми единицами измерения. Пиксели, ems, проценты – все работает. Так что, даже, представленный ниже, запутанный пример кода, будет работать. Правда выглядеть будет не очень понятно. [javascript] $("#somelement").animate({ width: "90%" fontSize: "14em", height: "183px", opacity: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm", }, 350, function(){alert ("The animation has finished running.");}); [/javascript] При указании свойства, состоящего из нескольких слов, оно записывается без тире, и первая буква второго слова должна быть заглавной. Такая запись значительно отличается от привычного синтаксиса CSS, поэтому обязательно постарайтесь это запомнить. Например, свойство border-top, следует записывать borderTop.

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

Шаг 4. Настройка эффекта

Если вы рассмотрите простой эффект на демонстрационной странице, то возможно заметите небольшую ошибку. Многократное наведение мыши на элемент, приводит к образованию длинной очереди из повторяющихся анимационных эффектов. В результате появляется неприятный, дергающийся эффект. Самый простой способ решить эту проблему – использовать метод stop, непосредственно до начала анимации. Этот метод отлично очищает очередь, и анимация выполняется в обычном режиме. Например, это ваш обычный код: [javascript] $("#someelement") .hover(function() { $(this).animate({ top: 20 }, 'fast'); }, function() { $(this).animate({ top: 0 }, 'fast'); }); [/javascript] Используя метод stop для предотвращения лишних повторений анимации, ваш новый код будет выглядеть вот так: [javascript] $("#someelement") .hover(function() { $(this).stop().animate({ top: 20 }, 'fast'); }, function() { $(this).stop().animate({ top: 0 }, 'fast'); }); [/javascript] Очень просто, правда? Но этот метод имеет одну небольшую проблему. Быстрые движения не приводят к повторяющемуся эффекту, но за это приходится расплачиваться неполной анимацией. Если вы хотите полностью решить эту проблему, вам понадобится плагин наподобие hoverFlow.

Шаг 5. Добавление реализма – Easing

Если хотите добавить чуть больше реализма, вам понадобится дополнительный контроль над скоростью, с которой выполняется анимация. Вот здесь нам на помощь приходит easing. Easing контролирует ускорение и замедление анимации по времени. Метод, который easing использует по умолчанию, называется swing, он встроен в базовый функционал jQuery. Плагин Роберта Пеннера easing, позволит вам использовать несколько различных эффектов. Существует только одно предостережение, когда речь идет об использовании персональных эффектов easing: вы можете использовать их только вместе со специальными эффектами анимации, то есть, с методом animate(). После того, как вы подключили плагин, использовать любой метод easing очень просто, передав его в качестве параметра: [javascript] $("#somelement").animate({ width: "90%" height: "183px", }, 550, "easeInElastic"); [/javascript] Вы можете проверить, как выглядят различные эффекты easing в действии, на демо-странице, в соответствующем разделе. И хотя некоторые из эффектов не подходят ко всем ситуациям, ваша анимация будет выглядеть гораздо более привлекательной при правильном использовании некоторых методов easing.

Шаг 6. Поднимаемся на ступеньку выше – jQuery UI

Апгрейд до jQuery UI приносит нам ряд необходимых функций. Фактически, для использования дополнительных функций, вам не потребуется полная библиотека. Для получения нужной функциональности, вам потребуются встроенные эффекты. Не само ядро UI, только файл со встроенными эффектами, который весит около 10 килобайт. Наиболее важными функциями, которые предоставляет библиотека эффектов jQuery UI, является поддержка анимации цветов, easing и переходы классов. Если помните, я уже говорил, что в jQuery анимацию можно применить только к числовым значениям. С jQuery UI об этом ограничении можно забыть. Теперь вы легко сможете анимировать фоновый цвет элемента, цвет рамки и тому подобное. Кроме того, вместо того чтобы создавать отдельные функции для новых возможностей, jQuery UI просто расширяет базовый функционал animate. То есть, если вы включили библиотеку в свою страницу, то можете использовать обычный метод animate, и он сделает всю грязную работу за вас. Например, если вы хотите анимировать цвет рамки элемента, при наведении, то ваш код будет выглядеть следующим образом: [javascript] $(".block").hover(function() { $(this).animate({ borderColor: "black" }, 1000); },function() { $(this).animate({ borderColor: "red" }, 500); }); [/javascript] Переходы классов отвечают за анимацию между классами. При использовании базовой библиотеки jQuery, если вы удаляете, а затем добавляете класс, изменяющий внешний вид элемента, то это происходит мгновенно. Когда в вашем распоряжении имеется библиотека UI, вы получаете возможность передавать дополнительные параметры, управляющие скоростью анимации, метод easing и callback. Эта функциональность, как и предыдущие, является надстройкой над существущим API jQuery, облегчающей процесс перехода.

Шаг 7. Создание первого, настоящего эффекта

Все вышеуказанные примеры являются всего лишь демо-версиями функциональности. Неплохо было бы использовать их для создания настоящего эффекта. Именно этим мы и займемся. Наш эффект не будет чем-то радикальным или особенным, но с его помощью, вы узнаете как применить полученные знания на практике. Предположим, нам нужно отобразить картинку, внутри которой будут появляться две секции, при наведении мыши. Верхняя секция будет содержать заголовок картинки, нижняя – ее краткое описание. Я знаю, что вы можете найти огромное количество различных плагинов, которые делают то же самое, но сегодня мы сделаем это с нуля. Это не так сложно, как кажется. Фактически, это очень просто и делается довольно быстро. Давайте начнем.

HTML

Для начала нам понадобится HTML-основа [html] Анимация с JQuery для начинающих

Анимация с JQuery для начинающих

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

Простой пример использования возможностей анимации jQuery. Наведите курсор на картинку, чтобы увидеть ее название и описание. При отведении мыши, они скроются. При наведении курсора на блоки с названием и описанием изображения, они изменят фоновый цвет.

Анимация использует easing, для создания большей привлекательности.

ThemeForest

Сайт, где вы найдете множество шаблонов и тем

CodeCanyon

Сайт, содержащий множество скриптов и примеров кода.

[/html] Для этого эффекта, нам нужно продумать структуру каждого элемента. Каждый элемент будет заключен в div, с классом item. Внутри дива, будет размещено три элемента: картинка, и два дива, содержащих название и описание картинки. Остальные части довольно простые. Нам понадобится подключить на страницу библиотеку jQuery, jQuery UI и файл, содержащий наш персональный код. Помните, что нам необходимы только эффекты jQuery UI, если вы хотите включить больше эффектов, вам понадобится специальная сборка, скачать которую можно здесь. Вот так будет выглядеть наша страница на этом этапе.

CSS

[css] .item { position: relative; margin: 20px 60px 40px 0; overflow: hidden; } .item .title, .item .desc { background: #000; color: #fff; position: absolute; display: block; width: 638px; opacity: 0.4; } .item .title { top: 0; font-size: 16px; padding: 12px 10px 25px 0; text-align: rightright; } .item .desc { bottombottom: 0; font-size: 12px; padding: 5px 0 15px 10px; } [/css] Здесь есть несколько моментов, на которые вам стоит обратить внимание. Каждому элементу установлено свойство position в значение relative, для того чтобы внутри этого элемента легко было расположить другие. Также, блокам назначено свойство overflow: hidden, с тем, чтобы мы могли скрывать название и описание картинки снаружи, когда они не нужны. Блокам, которые содержат название и описание, установлено свойство position: absolute, так что они точно позиционируются внутри блока с картинкой. Заголовку назначена координата top: 0, так что он располагается вверху, а описанию bottom: 0, и он соответственно, расположен внизу. Остальной CSS очень простой, назначены стили для шрифтов, немного позиционирования. Ничего особенного. Теперь наша страница выглядит вот так.

Включаем JavaScript-магию

[javascript] $(document).ready(function() { // Code for other parts of the demo $(".item").children("div.title").animate({top: -60}, 300); $(".item").children("div.desc").animate({bottom: -40}, 300); $(".item").hover( function() { $(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce"); $(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce"); }, function(){ $(this).children("div.title").stop().animate({top: -60}, 500); $(this).children("div.desc").stop().animate({bottom: -40}, 400); } ); $(".title, .desc").hover( function() { $(this).stop().animate({backgroundColor: "#444"}, 700, "easeOutSine"); }, function(){ $(this).stop().animate({backgroundColor: "#000"}, 700); } ); }); [/javascript] Возможно, это выглядит немного сложно, но на самом деле это не так. Давайте рассмотрим каждую часть. Логика этого эффекта очень проста. Поскольку мы позиционировали элементы абсолютно, сначала мы прячем их за пределами блока с картинкой. При наведении мыши на изображения, нам нужно просто вернуть их обратно, к изначальному положению. Сначала мы передвигаем заголовок и описание за пределы родительского блока. Но вместо того, чтобы использовать CSS, мы делаем это помощью JavaScript, по весьма конкретным причинам. Даже если JS будет отключен, страница все равно останется функциональной. Заголовок и описание останутся поверх изображения, и будут выглядеть так, как будто применен эффект наведения. А вот если бы мы скрыли эти блоки с помощью CSS, и JS на странице был бы отключен, то они так бы и не появились на экране. Наш код начинается с создания функции hover для каждого элемента. Первая функция выполняется при наведении мыши, вторая – наоборот, при отведении. Внутри функции, this – указывает на элемент, который вызвал событие. Мы используем метод animate, для изменения соответствующих значений. Мы также используем easing, для добавления большей привлекательности нашему эффекту. При отведении мыши, мы просто изменяем значения к их изначальному состоянию. В качестве небольшого дополнения, если навести курсор на блоки с заголовком или описанием, они медленно изменят цвет, спасибо jQuery UI. Вот и все, наш эффект готов к использованию. Можете посмотреть на результат и скачать архив с приведенными примерами. Перевод статьи «jQuery Animations: A 7-Step Program», автор Siddharth

Фантастическая CSS3 лайтбокс галерея с помощью jQuery

dreamhelg — Tue, 22 Dec 2009 11:31:42 +0000

С удовольствием принимаю эстафету по обзору полезных зарубежных ресурсов, предложенную блоггером cuprum, и сегодня, хочу представить вашему вниманию англоязычный блог - tutorialzine.com. Этот блог отличается от других, главным образом тем, что в нем регулярно публикуются очень красивые, а главное полезные, готовые решения для веб-разработчика. И сегодняшняя статья – не исключение. В сегодняшней статье, мы создадим отличную фото-галерею, которая использует новейшие техники CSS3 и Jquery. Созданный нами скрипт, будет сканировать папку с картинками на вашем веб-сервере, и строить на основе полученных данных полноценную drag-and-drop галерею. Это решение будет SEO-дружелюбным, кроме того оно будет работать даже с браузерами, выпущенными в одно время с IE6 (за исключением потери нескольких красивых эффектов). Мы будем использовать jQuery, jQuery UI (для реализации drag-and-drop) и плагин jQuery fancybox в дополнение к PHP и CSS, для интерактивности и стилизации. Прежде чем мы начнем, взгляните на конечный результат. Итак, давайте перейдем к первому шагу.

Шаг 1 – XHTML

Основная идея в том, чтобы использовать PHP для генерации необходимой XHTML-разметки для каждого изображения. Сгенерированный код, в дальнейшем будет включен в файл demo.php. demo.php [html]

[/html] Здесь нет ничего сложного. Обратите внимание на блок с id =”modal” - он используется для создания модального окна, которое отображается, если пользователь перетаскивает изображение на блок "drop to share". Но подробнее об этом, мы поговорим позже.

Шаг 2 – CSS

Теперь, когда у нас есть вся необходимая разметка, пришло время ее стилизовать. Сначала, нам нужно включить CSS-файлы в секции head нашей страницы. demo.php [html] [/html] После этого, можно перейти к написанию стилей. demo.css [css] body{ /* Styling the body */ color:white; font-size:13px; background: #222222; font-family:Arial, Helvetica, sans-serif; } #gallery{ /* The pics container */ width:100%; height:580px; position:relative; } .pic, .pic a{ /* Each picture and the hyperlink inside it */ width:100px; height:100px; overflow:hidden; } .pic{ /* Styles specific to the pic class */ position:absolute; border:5px solid #EEEEEE; border-bottom:18px solid #eeeeee; /* CSS3 Box Shadow */ -moz-box-shadow:2px 2px 3px #333333; -webkit-box-shadow:2px 2px 3px #333333; box-shadow:2px 2px 3px #333333; } .pic a{ /* Specific styles for the hyperlinks */ text-indent:-999px; display:block; /* Setting display to block enables advanced styling for links */ } .drop-box{ /* The share box */ width:240px; height:130px; position:absolute; bottom:0; right:0; z-index:-1; background:url(img/drop_box.png) no-repeat; } .drop-box.active{ /* The active style is in effect when there is a pic hovering above the box */ background-position:bottom left; } label, input{ /* The modal dialog URL field */ display:block; padding:3px; } label{ font-size:10px; } fieldset{ border:0; margin-top:10px; } #url{ /* The URL field */ width:240px; } [/css] Один из представленных выше классов нуждается в пояснении, это CSS-класс pic. Он используется для того картинки выглядели как полароидные снимки. Для достижения такого эффекта, каждому изображению добавляется белая рамка. Кроме того, в этом классе используется CSS3-свойство box-shadow, благодаря которому, каждый снимок отбрасывает тень. Если вы посмотрите на демо-страницу, то увидите, что фотографии разбросаны по страницы и развернуты в разные стороны. Такой эффект достигается с помощью CSS, на стороне PHP, как вы скоро увидите. Остальные стили очень простые, и не нуждаются в детальном объяснении.

Шаг 3 – PHP

Как вы помните, на шаге 1, мы рассмотрели часть XHTML-разметки, и отметили, что PHP будет использоваться для создания специальной разметки, для каждого изображения. И вот как это делается: demo.php [php] /* Configuration Start */ $thumb_directory = 'img/thumbs'; $orig_directory = 'img/original'; $stage_width=600; $stage_height=400; /* Configuration end */ $allowed_types=array('jpg','jpeg','gif','png'); $file_parts=array(); $ext=''; $title=''; $i=0; /* Opening the thumbnail directory and looping through all the thumbs: */ $dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!"); $i=1; while ($file = readdir($dir_handle)) { /* Skipping the system files: */ if($file=='.' || $file == '..') continue; $file_parts = explode('.',$file); $ext = strtolower(array_pop($file_parts)); /* Using the file name (withouth the extension) as a image title: */ $title = implode('.',$file_parts); $title = htmlspecialchars($title); /* If the file extension is allowed: */ if(in_array($ext,$allowed_types)) { /* Generating random values for the position and rotation: */ $left=rand(0,$stage_width); $top=rand(0,400); $rot = rand(-40,40); if($top>$stage_height-130 && $left > $stage_width-230) { /* Prevent the images from hiding the drop box */ $top-=120+130; $left-=230; } /* Outputting each image: */ echo '

'.$title.'

'; } } /* Closing the directory */ closedir($dir_handle); [/php] Сначала, мы открываем папку миниатюр с помощью opendir (с помощью модификатора @, мы предотвращаем появление любых возможных проблем, отображаемых пользователю) и проходим циклом по всем картинкам. В цикле, мы пропускаем файлы, не являющиеся изображениями, и генерируем некоторый XHTML-код для каждого изображения, который выводится непосредственно на экран. Как уже упоминалось ранее, в части CSS, PHP отвечает за вращение и разброс картинок по странице. Каждое изображение позиционируется по случайным X и Y координатам, и поворачивается в диапазоне от -40 до 40 градусов (для предотвращения переворачивания снимков вверх ногами). Все это генерируется с помощью PHP-функции rand() и включается в качестве CSS-стиля картинки, с помощью атрибута style. Существуют две папки с картинками, использующиеся галереей – thumbs, в которой содержатся миниатюры картинок, размером 100 х 100 пикселей, и original, которая содержит картинку реального размера. Обратите внимание на важную деталь, изображения в папке thumbnail и original, должны иметь одно и то же имя, иначе галерея будет работать не правильно. Единственно, что осталось сделать – добавить немного интерактивности.

Шаг 4 – jQuery

Итак, у нас на руках отличная CSS-галерея. Но это ничего не значит, если мы не можем перетаскивать понравившиеся картинки по экрану и увеличивать их для более детального просмотра, не так ли? Пришло время JQuery. script.js [javascript] $(document).ready(function(){ // Executed once all the page elements are loaded var preventClick=false; $(".pic a").bind("click",function(e){ /* This function stops the drag from firing a click event and showing the lightbox */ if(preventClick) { e.stopImmediatePropagation(); e.preventDefault(); } }); $(".pic").draggable({ /* Converting the images into draggable objects */ containment: 'parent', start: function(e,ui){ /* This will stop clicks from occuring while dragging */ preventClick=true; }, stop: function(e, ui) { /* Wait for 250 milliseconds before re-enabling the clicks */ setTimeout(function(){ preventClick=false; }, 250); } }); $('.pic').mousedown(function(e){ /* Executed on image click */ var maxZ = 0; /* Find the max z-index property: */ $('.pic').each(function(){ var thisZ = parseInt($(this).css('zIndex')) if(thisZ>maxZ) maxZ=thisZ; }); /* Clicks can occur in the picture container (with class pic) and in the link inside it */ if($(e.target).hasClass("pic")) { /* Show the clicked image on top of all the others: */ $(e.target).css({zIndex:maxZ+1}); } else $(e.target).closest('.pic').css({zIndex:maxZ+1}); }); /* Converting all the links to a fancybox gallery */ $("a.fancybox").fancybox({ zoomSpeedIn: 300, zoomSpeedOut: 300, overlayShow:false }); /* Converting the share box into a droppable: */ $('.drop-box').droppable({ hoverClass: 'active', drop:function(event,ui){ /* Fill the URL text field with the URL of the image. */ /* The id of the image is appended as a hash #pic-123 */ $('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id')); $('#modal').dialog('open'); } }); /* Converts the div with id="modal" into a modal window */ $("#modal").dialog({ bgiframe: true, modal: true, autoOpen:false, buttons: { Ok: function() { $(this).dialog('close'); } } }); if(location.hash.indexOf('#pic-')!=-1) { /* Checks whether a hash is present in the URL */ /* and shows the respective image */ $(location.hash+' a.fancybox').click(); } }); [/javascript] Сначала, мы вешаем, обработчик событий на клик по картинке, с тем, чтобы лайтбокс не срабатывал, когда мы просто перетаскиваем изображение. После этого, мы делаем все картинки перетаскиваемыми, а затем настраиваем lightbox. Теперь, нам нужно сделать блок «Drop to share», «принимающим», то есть блок сможет определять, когда к нему подвели и отпустили картинку. Это позволит нам применить специальный стиль к контейнеру, и открыть модальное окно. Модальное окно – это компонент пользовательского интерфейса, поставляемый вместе с jQuery UI. Он прячет все элементы страницы, под полупрозрачный слой, тем самым блокируя их использование для пользователя. Единственная вещь, полностью привлекающая внимание пользователя – это окно с сообщением, которое в нашем случае, окно содержит URL картинки. И наконец, у нас есть несколько строк кода, которые проверяют, есть ли строки вида #pic-123 в URL, c помощью которых, лайтбокс показывает соответствующие изображения при загрузке страницы. Наша CSS3-галерея готова. Скачать архив с примером. Перевод статьи «An Awesome CSS3 Lightbox Gallery With jQuery», автор Martin

Другие участники эстафеты:

Cuprum.name – Работа с цветовой моделью RGBA
rotorweb.ru — Скажем прощай overflow: hidden!

Хотите принять участие в эстафете? Это очень просто, опубликуйте перевод статьи из представляемого ресурса, сообщите мне, и я с удовольствием поставлю ссылку на ваш блог. Обязательное условие – статьи и ресурсы не должны повторятся.

Простой, перетаскиваемый элемент на jQuery

dreamhelg — Mon, 23 Nov 2009 07:54:16 +0000

Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его X и Y координат.

Сценарий

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

Начало

Для этого примера нам понадобится библиотека jQuery, jQuery UI и плагин JQuery-JSON. Кроме этого, мы также будем использовать PHP и базу данных MySQL для разбора и хранения наших данных. Если вы новичок в jQuery, не беспокойтесь. JQuery - это расширяемая, быстрая и легковесная JavaScript-библиотека, которую легко и весело использовать. Библиотека имеет хорошо структурированную документацию и огромное сообщество.

HTML и CSS

Начнем с HTML-разметки и стилей для нашего примера. Сначала CSS: [css] html, body { background:#151515; margin:0 0 0 0; padding:0 0 0 0; } #glassbox { background:#333; border:1px solid #000; height:400px; margin:30px auto auto auto; position:relative; width:960px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #element { background:#666; border:1px #000 solid; cursor:move; height:143px; padding:10px 10px 10px 10px; width:202px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #respond{ color:#fff; margin:0 auto 0 auto; width:960px; } [/css] CSS – очень простой. Мы назначаем html и body нулевые свойства, для чистки внешних и внутренних отступов, далее устанавливаем значения высоты, ширины и другие свойства для наших элементов. -moz-border-radius и -webkit-border-radius – это два свойства, позволяющие нам создать закругленные углы (работает пока только в Mozilla Firefox и Safari 3) для наших элементов. Теперь, давайте взглянем на HTML: [html] Simple Draggable Element Persistence with jQuery

Move the Box

[/html] Как видите, мы создали очень простую страницу, в которую подключили наш CSS, библиотеку JavaScript и плагины, кроме того, страница содержит элементы, к которым мы будем применять некоторые эффекты и события. Обратите внимание, что файл jquery-ui представляет собой специальную сборку, включающую в себя только ядро и функции перетаскивания элементов.

JavaScript

Теперь самое интересное! Сначала давайте рассмотрим базовые функции, которые мы будем использовать для применения некоторых эффектов к нашим элементам. Разберем все до основания. [javascript] [/javascript] Поместите этот код ниже HTML, сразу после закрывающего тега body.

PHP

Хорошо, давайте сделаем что-нибудь с данными, которые приходят от нашего JQuery. Сначала нужно создать простую базу данных, для хранения наших координат, которые мы впоследствии будем использовать для определения позиции нашего элемента. Затем, нам понадобится файл config.php, в котором будут записаны параметры подключения к базе данных, а затем мы перейдем к updatecords.php. SQL [sql] Database: 'xycoords' CREATE TABLE IF NOT EXISTS `coords` ( `id` int(11) NOT NULL AUTO_INCREMENT, `x_pos` int(4) NOT NULL, `y_pos` int(4) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; [/sql] Config.php [php] [/php] updatecoords.php [php] coords as $item) { //Extract X number for panel $coord_X = preg_replace('/[^\d\s]/', '', $item->coordTop); //Extract Y number for panel $coord_Y = preg_replace('/[^\d\s]/', '', $item->coordLeft); //escape our values - as good practice $x_coord = mysqli_real_escape_string($link, $coord_X); $y_coord = mysqli_real_escape_string($link, $coord_Y); //Setup our Query $sql = "UPDATE coords SET x_pos = '$x_coord', y_pos = '$y_coord'"; //Execute our Query mysqli_query($link, $sql) or die("Error updating Coords :".mysqli_error()); } //Return Success echo "success"; ?> [/php] Здесь все довольно просто. Первое, что мы делаем – это проверяем, были ли переданы данные в файл. Если это произошло, мы включаем наш файл с настройками config.php и назначаем переменной $data значение json_decode(passed post variable); json_decode – это PHP-функция, представленная в PHP 5.2.0, которая позволяет декодировать строку JSON. Поскольку наша переменная $data содержит массив данных, нам нужно разобрать его на части, чтобы получить нужные значения. Для этого мы пройдемся по массиву $data->coords () (который был получен из переменной order в JavaScript) и обработаем каждый элемент. В результате, из каждой пары ключ – значение будет создан объект списка, который мы в дальнейшем укажем и создадим переменную для его вывода. При этом мы будем использовать функцию preg_replace, для исключения ненужных символов. Кроме того, мы подготовим наши значения для вставки в базу данных, путем экранирования кавычек, и апострофов, с помощью функции mysqli_real_escape_string. Если все прошло хорошо, нам нужно будет вернуть успешный результат JavaScript.

В заключение

Теперь, когда у нас уже все готово, для того чтобы получить координаты элемента и передать их в PHP для записи, нам понадобится изменить нашу HTML-разметку для отображения позиции элемента. Для этого, мы удалим простую HTML-разметку и создадим ее с помощью PHP: [php]

Move the Box

'; } ?>

[/php] Здесь мы исполняем простой запрос к базе данных для выбора всех строк из таблицы coords. Затем мы вызываем цикл while, который определяет каждую выбранную нами строчку как $row. Теперь, мы можем назначить переменные равными каждой, индивидуальной строке, полученной из базы данных, и выводим их в соответствующем месте. Скачать архив с примером. Перевод статьи «Simple Draggable Element Persistence with jQuery», автор Dustin Blake

Красивая форма обратной связи на основе AJAX

dreamhelg — Fri, 13 Nov 2009 08:56:14 +0000

Предоставление посетителям сайта простого и надежного средства обратной связи – это важнейшая часть любого веб-проекта. Наиболее простым и часто используемым каналом обратной связи - являются контактные формы. Посмотреть результат можно здесь. В сегодняшней статье, мы создадим форму обратной связи на аяксе, с использованием современных техник веб-разработки. Для этого мы будем использовать PHP, CSS и jQuery в виде нескольких плагинов. Плагин formValidator будем использовать для проверки введенных значений, а с помощью плагина jQTransform, будем стилизовать текстовые поля и кнопки нашей формы. В дополнение, мы будем использовать класс PHPMailer для отправки на почту введенных данных. Кроме того, наша форма будет прекрасно работать даже с выключенным JS. *Для нормальной работы примера, вам понадобится PHP5

Шаг 1 – XHTML

Сначала нам понадобится XHTML-разметка для формы. demo.php [html]

Fancy Contact Form

Drop us a line and we will get back to you

[/html] Как вы могли заметить в строке 8, обрабатывать нашу форму будет файл submit.php. Мы будем использовать этот файл в обоих случаях – как для обычной отправки формы (для посетителей с выключенным JS), так и для аяксовой отправки формы. Это позволит легко обновлять код, без необходимости объединять изменения между файлами. Далее, мы можете видеть, что мы используем массив $_SESSION для заполнения текстовых полей значениями. Это делается для того, чтобы данные не потерялись во время перенаправления страницы, которое происходит во время отправки формы в submit.php. Другой важный аспект – это классы, назначенный текстовым полям – classs=”validate[required,custom[onlyLetter]]”. Эти классы используются плагином валидации для определения правил проверки введенных значений для каждого текстового поля. В нашем примере, мы указываем, что поле обязательное, и разрешено вводить только буквы. Существует множество доступных правил валидации, вы можете узнать о них на домашней странице плагина. Теперь взгляните, как будет выглядеть наша форма, с применением плагина JQtransform.

Шаг 2 – jQuery

МЫ используем два плагина jQuery – jQtransform для стилизации элементов формы, и formValidator для проверки введенных значений на клиентской стороне. Очень важно помнить, что кроме клиентской стороны, введенные данные всегда нужно проверять на серверной стороне. Итак, для начала нам нужно подключить все необходимые библиотеки. demo.php [php] [/php] Указанный выше код расположен в секции head, файла demo.php. Сначала мы подключаем CSS-файлы, используемые обоими плагинами, а затем уже библиотеку JQuery и плагины. Возможно, вас заинтересовала строка 5 – это специальный набор CSS-правил, который мы создадим с помощью PHP, для отображения подтверждающего сообщения, как вы увидите в дальнейшем. Теперь, давайте посмотрим на наш файл script.js. script.js [javascript] $(document).ready(function(){ /* after the page has finished loading */ $('#contact-form').jqTransform(); /* transform the form using the jqtransform plugin */ $("button").click(function(){ $(".formError").hide(); /* hide all the error tooltips */ }); var use_ajax=true; $.validationEngine.settings={}; /* initialize the settings object for the formValidation plugin */ $("#contact-form").validationEngine({ /* create the form validation */ inlineValidation: false, promptPosition: "centerRight", success : function(){use_ajax=true}, /* if everything is OK enable AJAX */ failure : function(){use_ajax=false} /* in case of validation failure disable AJAX */ }) $("#contact-form").submit(function(e){ if(!$('#subject').val().length) { $.validationEngine.buildPrompt(".jqTransformSelectWrapper","* This field is required","error") /* a custom validation tooltip, using the buildPrompt method */ return false; } if(use_ajax) { $('#loading').css('visibility','visible'); /* show the rotating gif */ $.post('submit.php',$(this).serialize()+'&ajax=1', /* using jQuery's post method to send data */ function(data){ if(parseInt(data)==-1) $.validationEngine.buildPrompt("#captcha","* Wrong verification number!","error"); /* if there is an error, build a custom error tooltip for the captcha */ else { $("#contact-form").hide('slow').after('

Thank you!

'); /* show the confirmation message */ } $('#loading').css('visibility','hidden'); /* hide the rotating gif */ }); } e.preventDefault(); /* stop the default form submit */ }) }); [/javascript] Весь блок скрипта выполняется внутри метода $(document).ready, который гарантирует нам, свое исполнение, только после окончания загрузки страницы. Далее, мы используем метод jqTransform(), который определен в плагине jqtransform. Он переделывает и стилизует все элементы формы (тестовые поля, кнопки и др.) Элемент select заменяется набором дивов и ссылок. Это выглядит здорово, однако влечет за собой некоторые проблемы с плагином валидации, в связи с чем, тултип для селекта нам придется сделать вручную. После этого, в строке 7, вешаем обработчик событий на нажатие кнопки в нижней части формы, с одной строкой кода, которая прячет отображаемые тултипы с сообщениями об ошибках. Это для того, чтобы страница правильно обновлялась, и подсказки не оставались на странице, если пользователь ввел правильные данные. Далее, мы инициализируем плагин formValidation, с помощью метода validationEngine() и в строке 24 описываем событие формы onsubmit. Пара моментов, на которые стоит обратить внимание здесь – отдельный тултип в строке 28, и дополнительный параметр ajax=1, в строке 39. Этот параметр использует файл submit.php, для того чтобы определить, передан ли запрос с помощью аякса или получен непосредственно через отправку формы. Также, обратите внимание, что мы используем специальную переменную use_ajax, для предотвращения работы аякса, если форма не прошла проверку.

Шаг 3 – CSS

Все наши CSS-правила описаны в файле demo.css demo.css [css] body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* reset some of the page elements */ margin:0px; padding:0px; } body{ color:#555555; font-size:13px; background: url(img/dark_wood_texture.jpg) #282828; font-family:Arial, Helvetica, sans-serif; } .clear{ clear:both; } #main-container{ width:400px; margin:30px auto; } #form-container{ background-color:#f5f5f5; padding:15px; /* rounded corners */ -moz-border-radius:12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius:12px; } td{ /* prevent multiline text */ white-space:nowrap; } a, a:visited { color:#00BBFF; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } h1{ color:#777777; font-size:22px; font-weight:normal; text-transform:uppercase; margin-bottom:5px; } h2{ font-weight:normal; font-size:10px; text-transform:uppercase; color:#aaaaaa; margin-bottom:15px; border-bottom:1px solid #eeeeee; margin-bottom:15px; padding-bottom:10px; } label{ text-transform:uppercase; font-size:10px; font-family:Tahoma,Arial,Sans-serif; } textarea{ color:#404040; font-family:Arial,Helvetica,sans-serif; font-size:12px; } td > button{ /* A special CSS selector that targets non-IE6 browsers */ text-indent:8px; } .error{ /* this class is used if JS is disabled */ background-color:#AB0000; color:white; font-size:10px; font-weight:bold; margin-top:10px; padding:10px; text-transform:uppercase; width:300px; } #loading{ /* the loading gif is hidden on page load */ position:relative; bottom:9px; visibility:hidden; } .tutorial-info{ color:white; text-align:center; padding:10px; margin-top:10px; } [/css] Обратите внимание на строку 85. Это правило делает кнопки шире, но, к сожалению это плохо выглядит в IE6. Поэтому мы используем специальный CSS-селектор, который игнорируется IE6, но отлично понимают остальные браузеры. Теперь, все что нам осталось – это PHP.

Шаг 4 – PHP

Сначала давайте рассмотрим код в начале файла demo.php demo.php [php] session_name("fancyform"); session_start(); $_SESSION['n1'] = rand(1,20); /* generate the first number */ $_SESSION['n2'] = rand(1,20); /* then the second */ $_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2']; /* the expected result */ /* the code below is used if JS has been disabled by the user */ $str=''; if($_SESSION['errStr']) /* if submit.php returns an error string in the session array */ { $str='

'.$_SESSION['errStr'].'

'; unset($_SESSION['errStr']); /* will be shown only once */ } $success=''; if($_SESSION['sent']) { $success='

Thank you!

'; /* the success message */ $css=''; /* a special CSS rule that hides our form */ unset($_SESSION['sent']); } [/php] Как видите, мы используем массив $_SESSION для хранения двух случайных чисел и ожидаемого результата. Это будет использоваться в дальнейшем, файлом submit.php, для подтверждения того, что капча решена. Другой интересный момент находится в строке 21, где мы описываем простой CSS-класс. Фактически здесь, мы скрываем форму, и отображаем сообщение об успешной отправке, если у пользователя отключен JS. submit.php [php] require "phpmailer/class.phpmailer.php"; session_name("fancyform"); /* starting the session */ session_start(); foreach($_POST as $k=>$v) { /* if magic_quotes is enabled, strip the post array */ if(ini_get('magic_quotes_gpc')) $_POST[$k]=stripslashes($_POST[$k]); $_POST[$k]=htmlspecialchars(strip_tags($_POST[$k])); /* escape the special chars */ } $err = array(); /* some error checks */ if(!checkLen('name')) $err[]='The name field is too short or empty!'; if(!checkLen('email')) $err[]='The email field is too short or empty!'; else if(!checkEmail($_POST['email'])) $err[]='Your email is not valid!'; if(!checkLen('subject')) $err[]='You have not selected a subject!'; if(!checkLen('message')) $err[]='The message field is too short or empty!'; /* compare the received captcha code to the one in the session array */ if((int)$_POST['captcha'] != $_SESSION['expect']) $err[]='The captcha code is wrong!'; /* if there are errors */ if(count($err)) { /* if the form was submitted via AJAX */ if($_POST['ajax']) { echo '-1'; } /* else fill the SESSION array and redirect back to the form */ else if($_SERVER['HTTP_REFERER']) { $_SESSION['errStr'] = implode('
',$err); $_SESSION['post']=$_POST; header('Location: '.$_SERVER['HTTP_REFERER']); } exit; } /* the email body */ $msg= 'Name: '.$_POST['name'].'
Email: '.$_POST['email'].'
IP: '.$_SERVER['REMOTE_ADDR'].'

Message:

'.nl2br($_POST['message']).' '; $mail = new PHPMailer(); /* using PHPMailer */ $mail->IsMail(); $mail->AddReplyTo($_POST['email'], $_POST['name']); $mail->AddAddress($emailAddress); $mail->SetFrom($_POST['email'], $_POST['name']); $mail->Subject = "A new ".mb_strtolower($_POST['subject'])." from ".$_POST['name']." | contact form feedback"; $mail->MsgHTML($msg); $mail->Send(); unset($_SESSION['post']); /* unsetting */ /* the form was successfully sent */ if($_POST['ajax']) { echo '1'; } else { $_SESSION['sent']=1; if($_SERVER['HTTP_REFERER']) header('Location: '.$_SERVER['HTTP_REFERER']); exit; } /* some helpful functions */ function checkLen($str,$len=2) { return isset($_POST[$str]) && mb_strlen(strip_tags($_POST[$str]),"utf-8") > $len; } function checkEmail($str) { return preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $str); } [/php] Обратите внимание как мы проверяем переменную $_POST[‘ajax’] на предмет установки и правильной работы. Как вы наверное помните, мы устанавливаем ее ранее, в файле script.js, для определения используется ли аякс для извлечения данных. Две переменные массива $_SESSION errStr и post используются для совместного использования данных между формой и файлом submit.php, в случае выключенного JS. Здесь переменная post содержит отправленный нами массив $_POST и используется для заполнения полей формы, после того как пользователь перенаправляется обратно. На этом работа над нашей формой обратной связи подошла к концу. Пример рабочий, за исключением одного маленького недоразумения. Плагин formValidation, создан с целью проводить валидацию только английских символов, так что если вы попытаетесь написать имя по-русски, он выдаст ошибку о том, что нужно вводить только буквы. К счастью это решается путем замены регулярного выражения в файле jquery.validationEngine.js. Найдите строчки: [javascript] "onlyLetter":{ "regex":"/^[a-zA-Z\ \']+$/", } [/javascript] и замените на следующую: [javascript] "onlyLetter":{ "regex":"/^[a-zA-Zа-яА-Я' ]+$/", } [/javascript] После этого, скрипт перестанет игнорировать русские символы. Скачать архив с примером. В связи с бесконечными вопросами, специально, отдельно сообщаю: настройка адреса email на который производится отправка писем, находится в файле submit.php, в самом начале файла, выглядит вот так: [php] /* config start */ $emailAddress = ''; /* config end */ [/php] Перевод статьи "A Fancy AJAX Contact Form", автор Martin

Решение для очень длинных выпадающих меню

dreamhelg — Thu, 29 Oct 2009 05:05:30 +0000

Мне нравится давать статьям точные заголовки, но в данном случае, правильно было бы сказать *возможное* решение для очень длинного, выпадающего меню. Проблема с такими меню состоит в том, что выпадающий список может выйти за пределы самой веб-страницы, то есть ниже видимой области окна браузера. Так, что для доступа к нижним пунктам меню, вам понадобится прокручивать страницу до нужного пункта. Для пользователей, имеющих специальное колесо прокрутки у мыши, это не большая проблема. Для тех же, у кого нет такой полезной функциональности, длинное выпадающее меню станет совершенно неработоспособным, потому что для прокрутки окна, им придется использовать полосу прокрутки браузера, для чего придется отвести мышь от меню, в связи с чем, меню, конечно же, закроется. Но есть очень простое решение для этого. Прежде чем мы начнем, взгляните на результат. Впервые, я увидел эту идею на странице аккаунта, на сайте Media Temple. У них есть выпадающее меню для «Доменов», в котором перечислены все ваши домены, находящиеся у них на хостинге. Это может быть очень длинный список. Но, Media Temple применили специальную технику – при прокручивании окна, меню также прокручивается в ускоренном режиме. И конечно, поскольку я делал скриншот, то обратил внимание, что замечательное решение, которое они так расхваливали, оказалось не таким уж хорошим. Это заставило меня задуматься, какие именно проблемы у них возникают с этим меню, так что давайте смотреть вместе. Далее представлена визуализация идеи:

JQuery делает это мгновенно

Я выложу весь код здесь, просто для справки. Код сопровождают комментарии, так что понять его будет легко. Он насчитывает 60 строк, но не пугайтесь, что это слишком много, весь код очень простой.

Устанавливаем максимальную высоту выпадающего меню
При наведении открываем дочернее меню
Рассчитываем коэффициент скорости, основанный на высоте дочернего меню
Отслеживаем движение мыши в меню
Прокручиваем меню вместе с движением мыши, основываясь на коэффициенте
При покидании мыши, закрываем меню

[javascript] var maxHeight = 400; $(function(){ $(".dropdown > li").hover(function() { var $container = $(this), $list = $container.find("ul"), $anchor = $container.find("a"), height = $list.height() * 1.1, // проверяем, достаточно ли свободного места внизу multiplier = height / maxHeight; // необходим для более быстрого движения, если список длиннее // сохраняем высоту здесь, так что она восстанавливается при покидании мыши $container.data("origHeight", $container.height()); // сохраняем цвет наведения, пока открыто выпадающее меню $anchor.addClass("hover"); // проверяем, появился ли список непорседственно под родительским списком $list .show() .css({ paddingTop: $container.data("origHeight") }); // Не применяем анимацию, если список короче максимального if (multiplier > 1) { $container .css({ height: maxHeight, overflow: "hidden" }) .mousemove(function(e) { var offset = $container.offset(); var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier); if (relativeY > $container.data("origHeight")) { $list.css("top", -relativeY + $container.data("origHeight")); }; }); } }, function() { var $el = $(this); // возвращаем все как было $el .height($(this).data("origHeight")) .find("ul") .css({ top: 0 }) .hide() .end() .find("a") .removeClass("hover"); }); // Добавляем нижнюю стрелку только для тех пунктов, у которых есть дочернее меню $(".dropdown > li:has('ul')").each(function() { $(this).find("a:first").append(""); }); }); [/javascript]

HTML и CSS

Я не стал выкладывать здесь HTML и CSS, поскольку они очень простые и не интересные. Вы, в любом случае, можете скачать архив с примером, и посмотреть. Это самый обыкновенный, вложенный, маркированный список, и немного очень простых стилей.

Тестирование

Пример тестировался во всех браузерах, вплоть до IE6, меню отлично выглядит и работает везде. Скачать архив с примером. Перевод статьи "Solution For Very Long Dropdown Menus", автор Chris Coyier

Name
Email
Subject
Message	<?=$_SESSION['post']['message']?>
+ =

Очередной блог фрилансера » jquery

10 отличных jQuery-сниппетов

Предзагрузка изображений

Ссылки target=”blank”

Добавление класса тэгу при включенном ява-скрипте

Плавная прокрутка по ссылке

Изменение прозрачности при наведении

Колонки одинаковой высоты

Включаем HTML5-разметку в старых браузерах

Проверяем поддерживает ли браузер определенное CSS3-свойство

Получаем параметры url

Отключаем клавишу “Enter” в формах

Эффект неонового текста с помощью CSS и JQuery

Шаг 1 – Дизайн

Шаг 2 – XHTML

Neon Text Effect With jQuery & CSS.

Шаг 3 – CSS

Шаг 4 – jQuery

Анимированный ландшафт с помощью CSS и JQuery

Шаг 1. Подготовка файлов

Шаг 2. HTML-страница

Шаг 2. CSS-стили

Шаг 4. jQuery

Создание навигации “волшебная линия” с помощью jQuery

Идея

HTML

CSS

JQuery JavaScript

Альтернативная версия

Создание формы со скользящими подписями

Скользящие подписи

HTML

Контактная информация

CSS

jQuery

Анимация jQuery: изучение за 7 шагов

Вступление

Шаг 1. Основы jQuery

Шаг 2. Использование встроенных эффектов

Шаг 3. Создание собственной анимации

Шаг 4. Настройка эффекта

Шаг 5. Добавление реализма – Easing

Шаг 6. Поднимаемся на ступеньку выше – jQuery UI

Шаг 7. Создание первого, настоящего эффекта

HTML

Анимация с JQuery для начинающих

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

CSS

Включаем JavaScript-магию

Фантастическая CSS3 лайтбокс галерея с помощью jQuery

Шаг 1 – XHTML

Шаг 2 – CSS

Шаг 3 – PHP

Шаг 4 – jQuery

Другие участники эстафеты:

Простой, перетаскиваемый элемент на jQuery

Сценарий

Начало

HTML и CSS

JavaScript

PHP

В заключение

Красивая форма обратной связи на основе AJAX

Шаг 1 – XHTML

Fancy Contact Form

Drop us a line and we will get back to you

Шаг 2 – jQuery

Thank you!

Шаг 3 – CSS

Шаг 4 – PHP

Thank you!

Решение для очень длинных выпадающих меню

JQuery делает это мгновенно

HTML и CSS

Тестирование