jQuery для чайников | Начальные сведения | Простой слайдер

10.02.2010 Верстка сайта 3956 2 комментария

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

Сегодня разберем базовый принцип использования библиотеки jQuery на примере простейшего слайдера — блока с контентом, плавно вылезающим из-за края экрана при клике по торчащей закладке. Также плавно и сноровисто он заползает обратно при повторном клике по той же самой закладке.

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

Но обо всем по порядку. Для начала еще раз остановимся на том, как пристегнуть библиотеку jQuery к странице вашего сайта. Понятное дело, что саму библиотеку нужно вначале скачать. Идем на родину — jquery.com.

Скачать можно как полную версию (156 Кб), так и минимизированную (69 Кб). Разница между ними лишь в удобстве чтения для разработчиков. Если хотите поковыряться в коде самой библиотеки, то качайте полную версию. Если только для использования на вашем сайте, то минимальную. В минимальной просто оставлен весь функционал, но убраны все комментарии.

Файл с библиотекой jQuery кладем в корневую папку сайта.

Чтобы пристегнуть библиотеку к странице, необходимо в пределах тэгов <head></head> прописать адрес к ней:

<script type="text/javascript" src="jquery.js"></script>

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

Так что решайте сами. Если вам этот вариант подходит, то подключаете таким образом:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

С этим, надеюсь, разобрались. А теперь пойдет самое интересное!

Как я уже упоминал во введении к данному циклу статей, библиотека jQuery позволяет добавлять всевозможные эффекты непосредственно к деталям страницы сайта, цепляясь за селекторы и классы из CSS.

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

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

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

1. Объект ~~нападения~~ действия. То есть, в кого, грубо говоря, будем тыкать мышкой.
2. Действие — что конкретно происходит после наведения на цель.
3. Жертва — кто выполняет наши прихоти.
4. Результат — что конкретно выполняет жертва.

Теперь разберем подробнее. С первым пунктом уже, в общем-то, все понятно: торчит из-за края экрана завлекалочка в виде закладки с приглашением «Дерни меня!» Что это может быть? Верно! Обычная картинка-кнопка.

Как и у любого элемента страницы, у этой кнопки есть свой селектор id или класс, прописанные в файле стилей CSS. Стало быть, объектом действия будет эта самая кнопка.

Пусть для нее в CSS будет прописан класс .buttontext.

Далее. Понятно, что на эту кнопку нужно не просто навести мышку, но и кликнуть, чтоб заработало. Клик в jQuery так и обзывается — .click (обратите внимание, команды тоже пишутся с точкой перед словом).

Теперь необходимо наметить жертву. В нашем случае после клика по кнопке должен выползти слайдер с какой-то информацией. Что это такое? Да просто обычный блок с текстом. Ему мы также пропишем несколько правил в файле стилей, обозначив селектором #panel.

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

Для этого в jQuery существует специальная команда .slideToggle, которая позволяет чередовать два простых действия: показать и скрыть.

А теперь приведем кусок необходимого для работы кода, который нужно также добавить на страницу в пределах тэгов <head></head>, Только учтите, что он должен располагаться после ссылки на библиотеку! Это важно.

<script type="text/javascript"> $(document).ready(function(){ $(".buttontext").click(function(){ $("#panel").slideToggle("normal"); return false; }); }); </script>

Как видите, это стандартное добавление скрипта на страницу, ограниченное тэгами <script></script>. Разберем его подробнее:

Строка $(document).ready(function() является универсальным способом показать, что весь последующий код скрипта должен выполняться после полной загрузки структуры страницы. Не всего-всего, а лишь структуры, то есть скелета. Это значит, что скрипт не станет дожидаться, пока загрузятся все картинки сайта, а начнет работать практически сразу же. За это отвечает команда .ready

Обратите внимание на знак доллара $ в самом начале данной строки. Это сокращенная запись самой jQuery. Можно вполне заменить строку следующим образом, и это будет точно то же самое:

jQuery(document).ready(function()

Такая запись является более корректной и гарантирует отсутствие конфликтов с другими скриптами, также использующими знак доллара.

А теперь как раз пойдет последовательность из указанных ранее 4 шагов. Весь процесс заключается в двух строчках кода:

$(".buttontext").click(function(){ $("#panel").slideToggle("normal"); return false;

В первой строке мы обозначили цель — кнопка с классом .buttontext. Это означает, что все кнопки на странице с таким классом будут подпадать под действие скрипта. Для этой кнопки сразу же пишется действие — .click(function() (не забываем про точки!).

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

Во второй строке вновь появляется обозначение библиотеки jQuery в виде сокращенной записи — $. Теперь в дело вступает выдвижная панель с селектором #panel. Следом сразу же пишется результат того, что происходит с панелью при клике по кнопке. Панель должна выдвигаться и задвигаться — .slideToggle.

В скобках прописывается некое значение, описывающее характер движения. В нашем случае там содержится слово normal. Таким образом, панель будет выкатываться с нормальной скоростью, или иначе — за 400 миллисекунд.

Другие вариации: fast – 200 миллисекунд, slow – 600 миллисекунд. То есть, можно писать как слово, так и цифру. Причем, не обязательно только эти указанные значения. Хоть миллион. Просто открываться такой слайдер будет весьма долго.

Обратите внимание(!): если используете слово, то обязательно помещайте его в двойные кавычки — “normal”, если же число, то пишем без кавычек (это важно!).

Хвост в виде return false означает, что мы не даем перейти по ссылке, в качестве которой используется кнопка-закладка. То есть, она просто работает в качестве удобной ручки, за которую дергают, но не как непосредственно ссылка.

Вот, собственно, и вся процедура.

Обращайте внимание на сохранность всех знаков препинания и скобок обоего вида. Это необходимые детали скриптов, и потеря хотя бы одной из них означает нерабочий код.

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

Подробное рассмотрение всей этой «орфографии» не входит в задачу данного цикла статей. При желании более глубокого изучения методов программирования, рекомендую найти книгу по JS. А начать можно отсюда — JavaScript для начинающих | Введение.

Далее! А вы думали это все? :) А кто будет строчить код для файла стилей? Или вы думаете оно все и так заработает? Шиш с маслом! Поехали писать файл CSS.

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

#container { width: 152px; margin: 0 auto; } #panel { background: #1ca8f6; height: 230px; display: none; } .button { background: url(button.gif) no-repeat; width: 152px; height: 40px; border-top: #333 dotted 1px; text-align: center; padding: 7px 0 0; } .buttontext { font-weight: bold; font-size: 1.2em; text-shadow: 1px 1px 1px #666; }

Для начала мы ограничили всю конструкцию отдельным блоком с именем #container. Так как в примере кроме слайдера ничего больше нет, то я не стал прописывать этому контейнеру какое-либо позиционирование, кроме центровки относительно экрана монитора стандартным margin: 0 auto;.

Понятное дело, что если вы захотите прицепить такой «язычок» на действующей странице, то вам понадобиться как минимум задать z-index и относительное или абсолютное позиционирование. Ну, это так, к слову.

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

Следующий набор правил с селектором #panel более хитрая вещь. На счет цвета фона все ясно. А вот отображение панели необходимо скрыть, дабы она не появлялась раньше времени. Для этого прописано соответствующее правило: display: none;.

Так же здесь необходимо строго задать высоту панели. Если вы еще не знаете, как много места в ней займет полезное содержимое, то пишите вначале наобум. Потом подправите, если содержимое вылезет за нижний предел панели.

Далее идет набор правил непосредственно для картинки-кнопки с классом .button. Картинку мы цепляем в качестве фона без повтора. Обязательно прописываем размеры, соответствующие размерам самой картинки.

И последний набор правил предназначен для надписи на кнопке, которая является пустой ссылкой. Здесь все просто. Текст — он и в Африке текст. Пишите что угодно. Я, к примеру, добавил стильную тень.

Код страницы сайта выглядит следующим образом (отрывок):

<div id="container"> <div id="panel"> Полезное содержимое панели </div> <p class="button"><a href="#" class="buttontext">Потянуть слегка</a></p> </div>

Работающий пример можно посмотреть здесь.

Автор: Игорь Квентор
www.websovet.com