|
|
|
|
Как используя jQuery создать на сайте выезжающий блок (Слайдер)? Автор: Андрей Краснокутский Дата: 2011-08-19 Создаем выезжающий Слайдер с помощью библиотеки jQuery.Гораздо интереснее и нагляднее изучать любой предмет на практике. Вспомните школьные уроки… Я например был в восторге от уроков химии, смешал что-то (кто его знает что :) ) и тут же получил результат, увы иногда печальный... Но зато сколько эмоций и как хорошо все запоминалось без скучной зубрежки. Поэтому, эту же методику применим и здесь, при изучении jQuery. Давайте будем разбираться со скучной теорией на практике. В этом уроке мы подробно разберем как создаются Слайдеры. Что это такое? Видели закладки, торчащие по бокам некоторых сайтов. При клике на такую закладку выезжает блок с контетом, при повторном клике блок так же плавно уезжает назад, оставляя на виду небольшую закладку. Это и есть Слайдер. Как говорится лучше один раз увидеть, чем 100 раз услышать, поэтому смотрим живой пример. Разместить в таком блоке Слайдере можно все что угодно и размер Слайдера можно сделать каким угодно. Итак, как же реализовать такой блок – Слайдер на своем Сайте? Библиотеку jQuery Вы скачали в прошлом уроке «Что такое jQuery, как работает и что может jQuery» . И еще скачайте исходник этого урока с рабочим примером. Теперь нам нужно подключить к нашей web-странице необходимые для работы файлы. Для этого между тегами <head> </head> прописываем код Листинга 1: Листинг 1.
Первая строка указывает на то, что мы подключили каскадную таблицу стилей 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 и разберем вот этот участок кода:
Весь этот участок кода - стандартное добавление скрипта на web-страницу, ограниченное тегами <script type="text/javascript"> </script>. А вот в нутрии этого контейнера и спрятано самое интересное. В самом начале каждой строки стоит знак $. Это сокращенная запись библиотеки jQuery. Т.е. строку: $(document).ready(function() Можно заменитьстрокой: jQuery(document).ready(function() Эти записи будут равнозначны, скажу более, что вторая запись даже более корректнее и гарантирует отсутствие конфликтов с другими скриптами, также использующими знак доллара. А сейчас пойдут те 4 шага описанных выше. Весь процесс заключен в 2-х строчках кода: $(".buttontext").click(function(){ Рассмотрим подробнее. В первой строке мы обозначили цель: Объект действия – закладка с классом .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. Здесь мы указываем центровку относительно монитора: margin: 0 auto; Но имейте ввиду, если Вы будете размещать это слайдер на реальной странице Вам нужно будет еще прописать и относительное позиционирование блока: z-index или y-index, в зависимости от того как Вы хотите задать блок по вертикали или по горизонтали. Ширина блока задана произвольно 152 пикселя. Вы прописываете естественно свою ширину, нужную Вам. Следующее правило #panel. Правило: background: #1ca8f6; определяет фоновый цвет блока. Правило display: none; скрывает панель, чтобы она не вылезла раньше времени. Правилом height: 230px; задается высота блока, если пока не знаете реальное значение, поставьте наобум, позже откорректируете. Дальше определяем класс .button для картинки кнопки. Картинку используем в качестве фона, без повтора. Обязательно пропишите реальные размеры картинки. И последний набор правил .buttontext предназначен для текстовой надписи на кнопке. Надеюсь здесь все понятно текст он везде текст. В код web-страницы, на которую планируете установить Слайдер, прописываем код Листинга 3. Листинг 3.
Вот собственно говоря и все. Еще раз смотрим рабочий пример. Качаем архив с исходниками урока и учимся делать Слайдер. Всего Вам доброго.
Читайте так же другие наши материалы. Как сделать на сайте Скрытые блоки. Что такое Семантическое ядро сайта? Скрипт: Приветствие + Сегодняшняя дата. Как создать надежный Блог – работающий годами. Изучаем таблицы в редакторе Dreamweaver CS 3.
Просмотров: 22627 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Борис Мне нравится. Комментарии добавил(а): ivankc уть рок очень интересен.Но читать немного неудобно.Хорошо бы оформить в форме электронной книги и скачать ее Комментарии добавил(а): Олег Гузь Спасибо, Андрей! Как всегда, СУПЕР!!! Комментарии добавил(а): Olga Спасибо,понравилось. Комментарии добавил(а): Дмитрий В принципе понятно, но это все на простом НTML сайте, а как быть если сайт на WordPress или Joomla? Дмитрий <a href="http://udachniy-biznes.ru/" target="_blank" rel="nofollow">Дмитрий</a> Комментарии добавил(а): Дмитрий Да, не плохая тема. Андрей, ещё как сделать чтобы на кнопку не нажимать, а просто навести мышь? Комментарии добавил(а): Дмитрий 2 Я назовусь Дмитрий 2 ) Выше вопрос был мой. Чтобы был понятен вопрос - вот мой сайт - http://moneynam.ru При наведении мыши на меню (не нажимая)как сделать чтобы подобным образом выскакивало под меню? Спасибо! Комментарии добавил(а): Николай Андрей, у меня в Хроме Ваш сайт пишется крякозябрами. Приходится указывать кодировку вручную. Комментарии добавил(а): Евгений А как сделать чтобы влево выезжало или вправо? Комментарии добавил(а): Алексей Здравствуйте, уважаемый владелец сайта! Мне очень понравился ваш сайт. У вас много полезной и интересной информации. У меня к Вам деловое предложение по еще большей раскрутке Вашего сайта, увеличению притока посетителей на Ваш сайт, созданию бизнеса в Интернете с приличным доходом уже на первоначальном этапе, а также раскрутка любого бизнеса. Это реальный шанс построить за короткое время себе пассивный доход. Для этого просто добавьтесь ко мне с скайп: alekseiwww75 и я дам Вам информацию, а Вы оцените насколько это может Вам помочь. Комментарии добавил(а): Артём Подскажите пожалуйста, как сделать чтобы открывалось снизу вверх? Комментарии добавил(а): Игорь Здравствуйте. Проблема в том, что ссылка внутри слайдера не открывается. Слайдер просто сворачивается. Как можно решить эту проблему? Спасибо. Комментарии добавил(а): Vasja отлично спасибо сделал на этом сайте http://seo-payeer.ru Добавить Ваш комментарий: |
Новости сайта Почтовая рассылка Новинка! Как реально заработатьв Интернете? "Обзор видов и способов заработка."
Специальный Отчет:  В подарок всем подписчикам! Полный список наших почтовых рассылок! Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |