Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Как используя 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 условных шага:

  1. Объект действия. Т.е. то с чем будет работать библиотека.
  2. Действие – что конкретно происходит при выполнении операции.
  3. Жертва – объект выполняющий какое то действие.
  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.

 

Просмотров: 19602


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Борис
Дата: 2011-08-19

Мне нравится.

Комментарии добавил(а): ivankc
Дата: 2011-08-20

уть рок очень интересен.Но читать немного неудобно.Хорошо бы оформить в форме электронной книги и скачать ее

Комментарии добавил(а): Олег Гузь
Дата: 2011-08-20

Спасибо, Андрей! Как всегда, СУПЕР!!!

Комментарии добавил(а): Olga
Дата: 2011-08-21

Спасибо,понравилось.

Комментарии добавил(а): Дмитрий
Дата: 2011-08-22

В принципе понятно, но это все на простом НTML сайте, а как быть если сайт на WordPress или Joomla? Дмитрий <a href="http://udachniy-biznes.ru/" target="_blank" rel="nofollow">Дмитрий</a>

Комментарии добавил(а): Дмитрий
Дата: 2011-08-22

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

Комментарии добавил(а): Дмитрий 2
Дата: 2011-08-22

Я назовусь Дмитрий 2 ) Выше вопрос был мой. Чтобы был понятен вопрос - вот мой сайт - http://moneynam.ru При наведении мыши на меню (не нажимая)как сделать чтобы подобным образом выскакивало под меню? Спасибо!

Комментарии добавил(а): Николай
Дата: 2011-08-22

Андрей, у меня в Хроме Ваш сайт пишется крякозябрами. Приходится указывать кодировку вручную.

Комментарии добавил(а): Евгений
Дата: 2011-11-02

А как сделать чтобы влево выезжало или вправо?

Комментарии добавил(а): Алексей
Дата: 2013-02-27

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

Комментарии добавил(а): Артём
Дата: 2013-03-02

Подскажите пожалуйста, как сделать чтобы открывалось снизу вверх?

Комментарии добавил(а): Игорь
Дата: 2014-05-08

Здравствуйте. Проблема в том, что ссылка внутри слайдера не открывается. Слайдер просто сворачивается. Как можно решить эту проблему? Спасибо.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Как заработать деньги в Интернете?
Создай свой ИнфоБизнес


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

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

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT