Как используя jQuery создать на сайте выезжающий блок (Слайдер)?
Автор: Андрей Краснокутский
Дата: 2011-08-19 Создаем выезжающий Слайдер с помощью библиотеки jQuery.
Гораздо интереснее и нагляднее изучать любой предмет на практике. Вспомните школьные уроки… Я например был в восторге от уроков химии, смешал что-то (кто его знает что :) ) и тут же получил результат, увы иногда печальный... Но зато сколько эмоций и как хорошо все запоминалось без скучной зубрежки. Поэтому, эту же методику применим и здесь, при изучении jQuery. Давайте будем разбираться со скучной теорией на практике.
В этом уроке мы подробно разберем как создаются Слайдеры. Что это такое? Видели закладки, торчащие по бокам некоторых сайтов. При клике на такую закладку выезжает блок с контетом, при повторном клике блок так же плавно уезжает назад, оставляя на виду небольшую закладку. Это и есть Слайдер. Как говорится лучше один раз увидеть, чем 100 раз услышать, поэтому смотрим живой пример.
Разместить в таком блоке Слайдере можно все что угодно и размер Слайдера можно сделать каким угодно. Итак, как же реализовать такой блок – Слайдер на своем Сайте?
Библиотеку jQuery Вы скачали в прошлом уроке «Что такое jQuery, как работает и что может jQuery» . И еще скачайте исходник этого урока с рабочим примером.
Теперь нам нужно подключить к нашей web-странице необходимые для работы файлы. Для этого между тегами <head> </head> прописываем код Листинга 1:
Листинг 1.
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".buttontext").click(function(){
$("#panel").slideToggle("normal"); return false;
});
});
</script> |
Первая строка указывает на то, что мы подключили каскадную таблицу стилей CSS – файл style.css, вторая строка указывает, что мы подключили библиотеку jQuery, третья строка и код ниже указывает, что мы подключили конкретный JavaScript, о нем мы поговорим дальше.
Причем обратите внимание, что все файлы лежат в корневой папке, там же где и наш файл на которым мы и будем тренироваться. Давайте для ясности назовем его primer.html . Для тренировки, рекомендую создать отдельную папку и положить туда все эти файлы: style.css – таблица стилей, jquery-1.6.2.min.js – библиотека jQuery (усеченная версия), primer.html – экспериментальный файл, на котором и будем тренироваться.
В прошлом уроке я вскользь упомянул, что как раз с помощью CSS и вытаскиваются из библиотеки всевозможные эффекты и прелести. Для этого используются селекторы и различные классы. А сейчас мы будем реализовывать это на практике.
Попробую объяснить работу данного примера на пальцах. Если немного утрировать и не сильно вдаваться в детали, то весь процесс работы библиотеки jQuery можно разбить на 4 условных шага:
-
Объект действия. Т.е. то с чем будет работать библиотека.
-
Действие – что конкретно происходит при выполнении операции.
-
Жертва – объект выполняющий какое то действие.
-
Результат – что конкретно выполняет Жертва.
Теперь рассмотрим все шаги подробнее. В нашем случае Объект действия – это и есть та самая «закладочка», по которой будем кликать. Хотя это может быть любой объект на web-странице. У этой «закладочки», как в общем то и у любого элемента, есть свой селектор (id) или класс, прописанный в таблице стилей CSS. Для закладочки прописываем класс .buttontext
2-й пункт нашего списка: Действие. В данном случае по этой закладке нужно кликнуть, чтобы заработало. Клик в jQuery так и обозначается — .click (обратите внимание, команды пишутся с точкой перед словом).
3-й пункт: Жертва. После клика по закладке у нас будет выползать (а затем убираться) Слайдер. Это и будет Жертва – объект выполняющий какое то действие. Слайдеру мы в таблице стилей (style.css) пропишем несколько правил, обозначив селектором #panel.
4-й пункт: Результат. Это то, что будет происходить после клика по Слайдеру. В нашем случае Слайдер будет выползать и при повторном клике убираться обратно. Для этого существует специальная команда .slideToggle, которая позволяет чередовать два простых действия: показать и скрыть.
Теперь возвращаемся к Листингу 1 и разберем вот этот участок кода:
<script type="text/javascript">
$(document).ready(function(){
$(".buttontext").click(function(){
$("#panel").slideToggle("normal"); return false;
});
});
</script> |
Весь этот участок кода - стандартное добавление скрипта на web-страницу, ограниченное тегами <script type="text/javascript"> </script>. А вот в нутрии этого контейнера и спрятано самое интересное.
В самом начале каждой строки стоит знак $. Это сокращенная запись библиотеки jQuery. Т.е. строку:
$(document).ready(function()
Можно заменитьстрокой:
jQuery(document).ready(function()
Эти записи будут равнозначны, скажу более, что вторая запись даже более корректнее и гарантирует отсутствие конфликтов с другими скриптами, также использующими знак доллара.
А сейчас пойдут те 4 шага описанных выше. Весь процесс заключен в 2-х строчках кода:
$(".buttontext").click(function(){
$("#panel").slideToggle("normal"); return false;
});
Рассмотрим подробнее.
В первой строке мы обозначили цель: Объект действия – закладка с классом .buttontext. Это значит что все кнопки, закладки и т.д. с таким классом, будут попадать под действие скрипта. Дальше пишем конкретное действие .click(function(). Затем открывается фигурная скобка и все что будет описано далее (все действия) закончится при закрытии фигурной скобки. Такая логика введена специально, чтобы можно было прописать несколько разных действий.
Во второй строке:
$("#panel").slideToggle("normal"); return false;
Опять видим знак доллара – обозначающий библиотеку jQuery , дальше прописываем выдвижную панель с селектором #panel и следом пишем результат:
.slideToggle("normal"); - панель должна выдвигаться и задвигаться назад. В скобках указан характер движения ("normal") т.е панель будет двигаться с нормальной скоростью 400 миллисекунд. Еще есть значения : fast – 200 миллисекунд, slow – 600 миллисекунд. Написать можно как слово, так и цифры, но слово нужно обязательно взять в кавычки. А цифровое значение можно указать любое и посмотреть результат.
Значение return false говорит о том, что мы не переходим по ссылке, а используем закладку в качестве кнопки на которую нужно просто кликнуть.
Будьте внимательны, не потеряйте знаки препинания: точки, кавычки и скобки – скрипты очень привередливы. Потеряете что-то и скрипт работать не будет.
А теперь открываем файл каскадной таблицы стилей style.css и пишем следующий код (сначала запишем, а затем разберем в подробностях) Листинг 2:
Листинг 2.
#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 или y-index, в зависимости от того как Вы хотите задать блок по вертикали или по горизонтали.
Ширина блока задана произвольно 152 пикселя. Вы прописываете естественно свою ширину, нужную Вам.
Следующее правило #panel. Правило: background: #1ca8f6; определяет фоновый цвет блока. Правило display: none; скрывает панель, чтобы она не вылезла раньше времени. Правилом height: 230px; задается высота блока, если пока не знаете реальное значение, поставьте наобум, позже откорректируете.
Дальше определяем класс .button для картинки кнопки. Картинку используем в качестве фона, без повтора. Обязательно пропишите реальные размеры картинки.
И последний набор правил .buttontext предназначен для текстовой надписи на кнопке. Надеюсь здесь все понятно текст он везде текст.
В код web-страницы, на которую планируете установить Слайдер, прописываем код Листинга 3.
Листинг 3.
<div id="container">
<div id="panel">
Полезное содержимое панели
</div>
<p class="button"><a href="#" class="buttontext">Кликни меня</a></p>
</div>
|
Вот собственно говоря и все. Еще раз смотрим рабочий пример. Качаем архив с исходниками урока и учимся делать Слайдер.
Всего Вам доброго.
Читайте так же другие наши материалы.
Как сделать на сайте Скрытые блоки.
Что такое Семантическое ядро сайта?
Скрипт: Приветствие + Сегодняшняя дата.
Как создать надежный Блог – работающий годами.
Изучаем таблицы в редакторе Dreamweaver CS 3.
Просмотров: 25386
уть рок очень интересен.Но читать немного неудобно.Хорошо бы оформить в форме электронной книги и скачать ее
Спасибо, Андрей!
Как всегда, СУПЕР!!!
В принципе понятно, но это все на простом НTML сайте, а как быть если сайт на WordPress или Joomla?
Дмитрий
<a href="http://udachniy-biznes.ru/" target="_blank" rel="nofollow">Дмитрий</a>
Да, не плохая тема.
Андрей, ещё как сделать чтобы на кнопку не нажимать, а просто навести мышь?
Я назовусь Дмитрий 2 )
Выше вопрос был мой.
Чтобы был понятен вопрос - вот мой сайт -
http://moneynam.ru
При наведении мыши на меню (не нажимая)как сделать чтобы подобным образом выскакивало под меню?
Спасибо!
Андрей, у меня в Хроме Ваш сайт пишется крякозябрами. Приходится указывать кодировку вручную.
А как сделать чтобы влево выезжало или вправо?
Здравствуйте, уважаемый владелец сайта! Мне очень понравился ваш сайт. У вас много полезной и интересной информации. У меня к Вам деловое предложение по еще большей раскрутке Вашего сайта, увеличению притока посетителей на Ваш сайт, созданию бизнеса в Интернете с приличным доходом уже на первоначальном этапе, а также раскрутка любого бизнеса. Это реальный шанс построить за короткое время себе пассивный доход. Для этого просто добавьтесь ко мне с скайп: alekseiwww75 и я дам Вам информацию, а Вы оцените насколько это может Вам помочь.
Подскажите пожалуйста, как сделать чтобы открывалось снизу вверх?
Здравствуйте.
Проблема в том, что ссылка внутри слайдера не открывается. Слайдер просто сворачивается. Как можно решить эту проблему? Спасибо.
отлично спасибо сделал на этом сайте http://seo-payeer.ru
|