Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28


Чувашия-это моя Россия

Панели вкладок в jQuery.

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

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

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

Организация информации с помощью панели вкладок. Панель вкладок, состоящей из вкладок, расположенных вдоль верхнего края и панелей, только одна из которых видима в определенный момент времени. Когда посетитель щелкает по вкладке, текущая панель исчезает, а скрытая — появляется.

Панели вкладок, как и все виджеты пользовательского интерфейса, состоят из HTML-кода, таблицы CSS и кода JavaScript.

Панели вкладок состоят из двух основных компонентов: кнопок, расположенных рядом друг с другом вдоль верхнего или нижнего края панели, и панелей, являющихся тегами < div>, содержащими материал для отображения.

Можно использовать несколько тегов для организации и облегчения процесса программирования:

-Элемент-обертка. Наличие тега < div>, в который заключены вкладки и панели, может помочь отметить начало и окончание панели вкладок и облегчить процесс написания программного кода, если создаете на странице больше одной панели вкладок. HTML-код для данного элемента прост:

                      < div class="tabbedPanels">
                      < /div>

Добавление тегу < div> класса помогает идентифицировать тег, настроить стиль элементов внутри панели вкладок и использовать библиотеку jQuery для определения и выбора вкладок, панелей. Если на странице присутствует только одна панель вкладок, то для этих же целей можно использовать идентификатор.

-Вкладки часто структурируются как неупорядоченные списки элементов, содержащих ссылки:

                    < ul class="tabs">
                      < li>< a href="#panel1">Описание товара< /а>< /li> 
                      < li>< a href="#раnеl2">Технические характеристики< /а>< /li>
                      < li>< a href="#раnеl3">Информация о доставке< /а>< / li>
                    < /ul>

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

-Обертка панели. Тег < div>, который окружает все панели, полезен для стилизации и предоставляет способ фокусировки на вкладках с использованием библиотеки jQuery:

                    < div class="panelContainer">
                    < /div>

-Панели — это место, где располагается содержимое. Каждая панель представлена тегом < div> и может содержать любой контент: заголовки, абзацы, изображения и т. д. Каждый тег < div> должен иметь уникальный id, который соответствует идентификатору, используемому в атрибуте href ссылок вкладок:

                    < div class="panel" id="panell">
                             
                    < /div>
                    < div class="panel" id="panel2">
                              
                    < /div>
                    < div class="panel" id="panel3">
                              
                    < /div>

Следует добавлять класс каждому тегу < div>, например: class="panel", так как это предоставляет еще одну возможность для настройки стилей элементов и их выбора с помощью библиотеки jQuery. Все теги < div> панели размещаются внутри обертки панели < div> и основного элемента-обертки.

HTML-код простой панели с тремя вкладками выглядит так:

                    < div class="tabbedPanels"> 
                        < ul class="tabs">
                           < li>< a href="#panel1">Описание товара< /а>< /li> 
                           < li>< a href="#panel2">Технические характеристика< /a>< /li>
                           < li>< a href="#panel3">Информация о доставке< /а>
                        < /ul>
                    < div class="panelContainer">
                    < div class="panel" id="panell">
                            
                    < /div>
                    < div class="panel" id="panel2"> 
                           
                    < /div>
                    < div class="panel" id="panel3"> 
                           
                    < /div> 
                    < /div> 
                    < /div>

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

-Контейнер. Нет необходимости устанавливать стиль для тега < div> , который окружает весь остальной код панели вкладок. Однако создание стиля пригодиться, если решите ограничить ширину панели вкладок, чтобы поместить данную панель рядом с другим элементом страницы или разместить две панели рядом. Тогда можете создать стиль и установить значение свойства width таким образом:

                     .tabbedPanels {
                     width: 50%; 
                     }

-Маркированный список и его элементы. Так как аркированные списки создаются с отступом, то Вам необходимо установить свойство padding на значение 0, если хотите, чтобы вкладки были выровнены по левому краю. Кроме того, чтобы вкладки находились рядом друг с другом вместо того, чтобы располагаться одна над другой, Вы должны применить к элементам списка свойство float. И еще элементы списка обычно имеют маркеры, Вам следует удалить их. Для этого достаточно использовать простейшие стили:

                     .tabs {
                     margin: 0;
                     padding: 0; 
                     }
                     .tabs li {
                     float: left;
                     list-style: none; 
                     }

Данный код CSS применяется к приведенному выше HTML-коду. Фрагмент .tabs относится к маркированному списку < ul class="tabs">, а часть .tabs li относится к элементам списка внутри тега < ul>.

-Вкладки представлены тегами < а> внутри элементов списка. Для них нужно установить несколько свойств. Во-первых, нужно удалить подчеркивание ссылок. Далее Вы зададите свойству ссылок display значение block, так что свойства padding и margin будут к ним применимы:

                     .tabs а {
                     display: block;
                     text-decoration: none;
                     padding: Зрх 5px;
                     }

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

-Активная вкладка. Хорошей идеей является подсвечивание вкладки, относящейся к отображенной в настоящий момент панели. Это сигнал вроде «Вы находитесь здесь», который идентифицирует информацию в панели для посетителя. Распространенной техникой является создание стиля класса, который динамически применяется библиотекой jQuery после того, как посетитель щелкает по вкладке. Для данного стиля нет обязательных свойств, однако назначение активной вкладке того же фонового цвета, как и панели создает визуальную целостность между выбранной вкладкой и соответствующей панелью:

                     .tabs a.active {
                     background-color: white; 
                     }

Распространенной техникой является добавление границы вокруг панелей и вокруг вкладок. Когда щелкаете по вкладке, нижняя граница вкладки исчезает и вкладка как бы сливается с панелью. Чтобы добиться такого эффекта, сначала добавьте в стиль .tabs а границу и установите значение свойства margin-bottom на -1рх. Отрицательное значение сдвигает вкладку вниз на один пиксель, что приводит к ее наложению на панель. Затем придайте стилю .tabs а.active цвет нижней границы, который соответствует фоновому цвету панели — граница по-прежнему будет присутствовать, но из-за совпадения цветов и пересечения верхней границы панели, вкладка и панель будут казаться одним целым. ( Нужно добавить в стиль фрагмент кода position: relative, чтобы данная техника работала в браузерах IE8 и более ранних версиях). Еще, добавьте границу в контейнер панели — придайте ей тот же стиль, толщину и цвет, что и границе для стиля .tabs а.

-Контейнер панелей. Стиль для тега < div>, который окружает все панели, имеет большое значение. Все вкладки выровнены по левому краю так, что они располагаются рядом друг с другом должны для этого надо применить к контейнеру панели свойство clear. Иначе он будет помещен справа от вкладок вместо того, чтобы появиться под ними:

                     .panelContainer {
                     clear: left; 
                     }

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

-Панели. Можете использовать стиль контейнера панелей для создания базового формата панелей — границы, фонового цвета и т.д. При желании можете применить данное форматирование к отдельному тегу < div> панели, создав стиль .panel.

-Содержимое панели. Чтобы настроить стиль для содержимого панели, можно использовать селекторы потомков для нацеливания на теги внутри тега < div> каждой панели. Если хотите создать внутри панели тег < h2>, отображающий текст оранжевым цветом и шрифтом Arial, то можете создать такой стиль:

                     .panel h2 {
                     color: orange;
                     font-family: Arial, Helvetica, sans-serif;
                      }

Для форматирования абзаца внутри панели создайте стиль .panel р.

После работы над кодами HTML и CSS увидите вкладки вдоль верхнего края и три тега < div> панели под ними, расположенные друг на друге. Базовый вид задан. Вам лишь нужно добавить программный код, чтобы панели открывались и закрывались, а изменить класс вкладок, чтобы сделать одну из них " активной", а остальные — обычными. Базовая программа включает:

                     1.	Добавление ссылкам внутри вкладок события щелчка.
                        Панели вкладок создаются для того, чтобы пользователь 
                        взаимодействовал с вкладками: щелчок по одной вкладке 
                        отображает одну панель, щелчок по другой вкладке — другую.
                     2.	Добавление анонимной функции событию щелчка для:
                            • скрывания видимой в данный момент панели;
                            • удаления класса active из вкладки, выделенной ранее;
                            • добавления класса active вкладке, по которой только 
                               что был произведен щелчок, чтобы сделать ее активной;
                            • отображения соответствующей данной вкладке панели.
                     3.	Запуск события щелчка по первой вкладке.
                        Данный шаг необходим, потому что когда страница загружается 
                        в первый раз, все панели видимы, но ни одна из вкладок не выделена.

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

Главное Вы поняли, что структура HTML-кода панели вкладок довольно проста: тег < div>, неупорядоченный список, несколько ссылок и еще несколько тегов < div>

Добавьте коды CSS и JavaScript для трансформации простого HTML-меню в панель вкладок.

Начнем писать коды программы для панели вкладок, как обычно, с оболочки jQuery:

                     $(document).ready(function() {
                     $('.tabs a').click(function() {
                     }); // конец click
                     }) ; // конец ready

Часть $('.tabs a') выбирает все теги < a> внутри неупорядоченного списка ( которому присвоен класс tabs). На данном этапе у Вас есть анонимная функция и Вы начнете заполнять ее программным кодом. Для начала добавьте выражение $(this), чтобы код был более эффективным. Внутри анонимной функции добавьте:

                     $('.tabs а').click(function() { 
                     $this = $(this);
                     }); // конец click

Ключевое слово $(this) относится к элементу, к которому добавлено событие, в данном случае $(this) относится к вкладке, по которой щелкнул посетитель. Каждый раз при использовании фрагмента $() для выбора элемента, на самом деле вызываете функцию jQuery, заставляя браузер выполнять множество строк программного кода JavaScript. Если нужно использовать один и тот же селектор внутри функции более одного раза, то следует сохранить его в переменной. В данном примере $this — это просто переменная. Сохранение значения $(this) в переменной означает, что когда потребуется получить доступ к ссылке, Вам всего лишь нужно будет использовать переменную $this, т.е. не придется заставлять библиотеку jQuery выбирать ссылку снова. Если сначала сохраните $(this) в переменной $this, то сможете использовать эту переменную в своем коде многократно, не загружая браузер лишней работой. Теперь Вы скроете панели и активируете вкладку, по которой совершен щелчок:

                     1 $('.tabs а').click(function() {
                     2 $this=$(this);
                     3 $('.panel').hide();
                     4 $('.tabs a.active').removeClass('active');
                     5 }); // конец click

Строка 3 скрывает панели. Так как каждая панель представляет собой тег < div> с классом panel, то фрагмент кода $('.panel') выбирает все панели, а функция hide() скрывает их. Вам нужно это сделать, потому что иначе при открытии одной панели предыдущая панель останется видимой. Строка 4 удаляет класс active из любой ссылки внутри вкладок. Далее выделите вкладку, по которой совершен щелчок:

                     1 $('.tabs а').click(function() {
                     2 $this=$(this);
                     3 $('.panel').hide();
                     4 $('.tabs a.active').removeClass('active');
                     5 $this.addClass('active').blur();
                     6 }); // конец click

Помните, что $this — это переменная, которую создали в строке 2. Переменная $this содержит ссылку на вкладку, по которой щелкнул посетитель. Таким образом, код $this.addClass('active') добавляет ссылке класс active: браузер будет использовать каскадную таблицу стилей для форматирования вкладки. Часть blur() в конце использует возможность связывания функций. Это просто еще одна функция, выполняемая после функции addClass(). Функция blur() удаляет фокус со ссылки ( или поля формы): в данном случае она также удаляет линию, отображаемую браузерами вокруг ссылок, по которым щелкнул посетитель. Без этого активная вкладка выглядела бы не лучшим образом. Вам остается только заставить панель появиться:

                     1 $('.tabs а').click(function() {
                     2 $this=$(this);
                     3 $('.panel').hide();
                     4 $('.tabs a.active').removeClass('active');
                     5 $this.addClass('active').blur();
                     6 var panel=$this.attr('href');
                     7 $(panel).fadeln(250);
                     8 });// конец click

Каждая вкладка является ссылкой, указывающей на соответствующую панель. Помните, что HTML-код панели выглядит примерно так:

                     < div id= "panel1" class="panel">
                     
                      HTML-код каждой вкладки — так: 
                      
                      < а href= "#panel1">

Обратите внимание, что значение атрибута href выглядит точно так же, как селектор CSS id. Поскольку библиотека jQuery использует селектор CSS для выбора элемента страницы, можете извлечь атрибут href ссылки и использовать его для нахождения панели, которую желаете отобразить. Строка 6 создает новую переменную ( panel) для хранения свойства ссылки href. Строка 7 использует значение href для выбора панели, а затем отображает ее, используя функцию jQuery fadeIn(), где значение аргумента функции 250 - время проявления в миллисекундах. Вы можете заменить функцию fadeIn() любой другой функцией библиотеки jQuery, например, show(), slideDown() или animate().

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

                      1	$('.tabs а').click (function() {
                      2	$this=$(this);
                      3	$('.panel').hide();
                      4	$('.tabs a.active').removeClass('active');
                      5	$this.addClass('active').blur();
                      6	var panel=$this.attr('href');
                      7	$(panel).fadeln(250);
                      8	});// конец click
                      9	$('.tabs li:first a').click();

Данный код использует довольно сложный селектор (.tabs li:first а) для выбора первой вкладки. Вы можете прочитать селектор справа налево. С правой стороны часть а указывает на то, что нашей целью является выделение ссылки < а>. В середине код li:first — это первый дочерний псевдоэлемент, который соответствует тегу < li>, т.е. первому потомку другого тега. Поскольку вкладки созданы посредством маркированного списка, часть li:first относится к первому элементу списка или, в данном случае, к первой вкладке. Часть .tabs гарантирует, что выбираем ссылку внутри элемента списка, являющегося частью панели вкладок. Это предотвращает случайный выбор ссылки внутри другого маркированного списка ( вроде панели навигации) в другом месте страницы. Вы можете использовать функцию .click() не только для реагирования на событие щелчка, но и для запуска данного события. Так строка 9 дает команду: «Браузер, щелкни по первой вкладке», которая запускает целую серию действий: скрывание панелей, выделение вкладки и отображение нужной панели. Далее поскольку вкладки являются внутренними ссылками, указывающими на раздел текущей страницы, если просмотрите страницу на маленьком мониторе, то увидите, что браузер перескакивает вниз к панели в дополнение к ее отображению. Вам нужно приказать браузеру не следовать по ссылке и для этого добавить return false; в конец обработчика события:

                      1	$(document.ready(function() {
                      2	$($('.tabs a').click(function() {
                      3	$this=$(this);
                      4	$('.panel').hide();
                      5	$('.tabs a.active').removeClass('active');
                      6	$this.addClass('active').blur();
                      7	var panel=$this.attr('href');
                      8	$(panel).fadeln(250);
                      9	return false;
                     10 }); // конец click
                     11	$('.tabs li:first a').click();
                     12	}); // конец ready

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

Добавление слайдера на сайт. Еще другой инструмент, чтобы справиться с обилием информации, имеется слайдер — простой интерфейс вроде слайд-шоу, который позволяет показывать одно изображение или фрагмент информации в один момент времени. Многие сайты, содержащие большой объем информации, используют слайдеры для показа изображений, текста и ссылок небольшими порциями, которые " скользят" по экрану. Слайдер подобен панели вкладок, за исключением того, что слайды обычно имеют одинаковый размер, " скользят" по экрану и часто используют таймер, чтобы изображение менялось каждую пару секунд. Слайдеры часто используются на страницах сайта, чтобы сделать страницу проще и привлекательнее и в то же время представить много материала. Часто слайдеры используются в качестве инструмента привлечения внимания, рекламируя продукты или контент других страниц сайта. Щелчок по панели слайдера обычно ведет на другую веб-страницу.

Создание слайдеров требует умения создавать некоторые элементы с помощью языка JavaScript и библиотеки jQuery, включая анимацию и таймеры, манипулирования кодами CSS и HTML. Хотя можете создать собственный слайдер. Имеется множество плагинов библиотеки jQuery, которые предлагают широкий спектр полезных возможностей. Один из наиболее гибких подобных плагинов jQuery называется AnythingSlider.

Использование плагина AnythingSlider. Для работы плагина AnythingSlider требуется наличие нескольких файлов: библиотеки jQuery, внешнего файла JavaScript, содержащего программный код слайдера, файла CSS для форматирования эффекта и файла с изображениями элементов управления ( кнопки «Вперед» и «Назад»). Вы можете загрузить плагин AnythingSlider с сайта: github.com/ProLoser/AnythingSlider/.

Использования плагина AnythingSlider прост:

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

-Присоедините файл библиотеки jQuery. Библиотека jQuery предоставляет стандартный набор инструментов, необходимый плагину AnythingSlider. Как и в случае с использованием любого другого плагина jQuery, должны сначала загрузить файл библиотеки. Если загрузите jQuery после файла плагина, он не будет работать.

-Присоедините файл плагина AnythingSlider. Файл содержит базовый программный код для трансформирования Вашего HTML-кода в слайдер.

-Добавьте код HTML. Плагин AnythingSlider не требует сложного HTML-кода. Вам нужно добавить тег-контейнер < div> с id="slider" < div id="slider"> и внутри этого тега < div> вставить по одному тегу для каждой панели или " слайда". Это похоже на устройство панелей вкладок.

-Добавьте теги < script> и функцию S(document).ready (), а затем вызовите функцию AnythingSlider. Одно из преимуществ работы с плагинами jQuery заключается в том, что они не требуют длительной работы над кодом. В данном случае добавление простого кода на страницу после ссылки на файл плаги¬на AnythingSlider — это все, что нужно:

                 < script>
                      $(document).ready(function) { 
                      $('#slider").anythingSlider(); 
                      }); // конец ready
                 < /script>

Существует много способов настройки плагина AnythingSlider. Однако сначала попробуете данный плагин в действии.

Применение плагина AnythingSlider. Создать простой слайдер легко. Вы можете использовать любой текстовый редактор. Добавьте файл плагина CSS. 2. Щелкните в пустой строке после фрагмента < link href = "../_css/ site.ess " rel= "stylesheet> введите:

                 < link rel="stylesheet" href="anythingSlider/anythingslider.css">

Эта строка загружает файл anythingslider.css, содержащий конкретные стили для форматирования слайдера. Далее добавьте ссылки на необходимые файлы JavaScript:

              < script src="../_js/jquery-1.9.0.min.js">< /script> 
			  < script src="anythingSlider/jquery.anythingslider.min.js">< /script>

Первая строка загружает файл jQuery, а вторая — файл плагина. Теперь пришло время добавить HTML-код. Файлы изображений, JavaScript и CSS для плагина AnythingSlider находятся в папке anythingslider. Хранение всех необходимых плагину файлов в одной папке поможет не потерять их, а также облегчит использование плагина на другом сайте. Если понравится результат, Вы можете просто скопировать папку anythingslider на свой сайт ( поместите ее в корневой каталог или в папку, содержащую остальные файлы JavaScript).

Найдите тег < h1>Плагин Anything Slider< /h1> и в пустой строке под ним введите:

                     < div id="slider">
                     < /div>

Это тег < div> ( HTML-тег, отмечающий область или раздел веб¬страницы). Этот конкретный тег < div> представляет собственно слайдер. Внутри этого тега добавите другие теги < div>, по одному для каждого отображаемого слайда.

Внутри тега < div> слайдера, т.е. между открывающим и закрывающим тегами < div>) введите:

                    < div>
                    < а href="pagel.html">< img src="images/pumpkin.jpg" 
                       width="700" height="390" alt="Pumpkin">< /a> 
                    < /div>

Это второй тег < div>, содержащий ссылку на изображение. Щелчок по изображению направит Вас на другую страницу. Это распространенный подход при использовании слайдеров, которые часто играют роль анимированных рекламных баннеров для сайта. Каждый слайд привлекает внимание к определенному контенту, так что посетители могут щелкнуть по нему, чтобы перейти к соответствующей статье или разделу. С помощью плагина AnythingSlider можете добавить любой HTML-код. Вы не ограничены одним крупным изображением. Вы можете поместить в слайд любое содержимое, включая текст, картинки и другие теги < div>.

Добавьте еще два тега < div> в тег < div> слайдера:

                    < div>
                    < а href="page2.html">< img src="images/grapes.jpg"
                    width="700" height="390" alt="Grapes">< /a>
                    < /div>
                    < div>
                    < a href="page3.html">< img src="images/various.jpg"
                    width="700" height="390" alt="Various">< /a>
                    < /div>

Эти два тега представляют еще два слайда. Вы можете добавить столько слайдов, сколько захотите. Теперь добавьте программный код. Вверху файла добавьте пустую строку после второго тега < script>, но перед закрывающим тегом < /head>, и введите:

                 < script>
                   $(document).ready(function() { 
                   $('#slider').anythingSlider(); 
                   });
                 < /script>

Все, что Вам нужно сделать, — это выбрать тег, содержащий слайды $('#slider') и применить функцию anythingSlider(). Об остальном позаботится плагин.

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

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

Настройка вида слайдера. Плагин AnythingSlider прост в использовании. Разумеется, стандартный вид слайдера может не соответствовать дизайну Вашего сайта и могут быть не нужны все его возможности - вроде автоматизированного слайд-шоу или кнопок навигации. Вид плагина AnythingSlider может быть изменен несколькими способами: редактированием графического файла, изменением таблицы стилей и настройкой плагина. Благодаря использованию техники CSS Sprites, один графический файл содержит изображения стрелок в обычном и " активном" - при наведенном на них указателе мыши - состоянии, изображения кнопок с номерами и кнопки " Start". Вы можете отредактировать графический файл - каждая стрелка имеет размер 45 х 140 пиксилей - добавить собственные изображения стрелок. Вы можете отредактировать таблицу стилей, чтобы настроить вид слайд-шоу. Ниже приведен список наиболее распространенных параметров и стилей, которые можно измененить:

-Высота и ширина слайдера. Первый стиль в файле anythingslider.css (#slider) определяет ширину и высоту слайдера. Вы можете подстроить ширину, чтобы сделать слайдер шире или уже, и высоту, чтобы сделать его выше или ниже по отношению к значению 390 пикселей, установленному по умолчанию.

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

                      div.anythingSlider.activeSlider
                      .anythingControlsula.cur,
                      dw.anythingSlider.active Slider 
                      .anythingControls ul а

Измените значение свойства background-color с #7C9127 на то, которое соответствует дизану Вашего сайта. Если вам требуется изменить цвет шрифта, можете добавить свойство color с нужным цветом:

                      color: #F44 439;

-Цвет кнопок навигации при наведении на них указателя мыши. Можете изменить значение свойства background-color кнопок навигации на новое, изменить шрифт и т. д., отредактировав стиль:

                      div.anythingSlider .anythingControls ul a:hover. 

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

-Кнопка навигации, выделенная в настоящий момент. Вы можете выделить кнопку, соответствующую отображенному слайду, добавив в таблицу стилей стиль:

                      div.anythingSlider.activeSlider 
                      .anythingControls ul а.сur 

Установить другой цвет, шрифт и т.д. Удостоверьтесь, что Вы либо поместили этот стиль после стиля " Цвет кнопок навигации", либо отредактировали этот стиль, удалив из него:

                      div.anythingSlider. activeSlider 
                      .anythingControls ul а.сur

Поскольку приведенный стиль уже имеет фоновый цвет, он проигнорирует Ваш новый стиль, если Вы не поместите этот новый стиль после него в таблице стилей.

-Цвета кнопок Start и Stop. Кнопки, использующиеся для запуска и остановки автоматизированного слайд-шоу, контролируются двумя стилям. Чтобы изменить зеленый цвет кнопки Start, а также цвет шрифта, отредактируйте стиль:

                       div.anythingSlider.start-stop

Чтобы изменить красный цвет кнопки Stop, отредактируйте стиль:

                       div.anythingSlider.start-stop.playing

-Удаление теней и другие изменения вида кнопок навигации. Если не нравятся тени на кнопках навигации и кнопках Start и Stop, то отредактируйте стили:

                       div.anythingSlider .anythingControls ul а
                       div.anythingSlider .start-stop
                       
                        удалив свойство background-image

Можете отредактировать свойства:

                       border-radius
                       -moz-border-radius 
                       -webkit-border-radius 
                       
                       в этих стилях, чтобы удалить или увеличить 
                       закругленные углы кнопки. 

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

-Зеленые границы над и под слайдером. Слайдер имеет зеленую границу шириной в 3 пикселя вверху и внизу. Чтобы изменить ее, отредактируйте стиль:

                       div.anythingSlider .anythingWindow
                       
                  Просто удалите свойства border-top и border-bottom
                  чтобы полностью удалить границы, или задайте новые значения, 
                  чтобы изменить цвет и толщину границ.

-Местоположение стрелок. Вы можете определить, где должны находиться стрелки " вперед" и "назад", отредактировав стили:

                  div. anythingSlider .back 
                    для левой стрелки 
                    
                  div.anythingSlider .forward 
                    для правой стрелки
                    
                  div.anythingSlider.arrow 
             устанавливает базовые свойства для обеих стрелок, 
             включая их расположение в центре слайда. 

Например, если Вы хотите поместить стрелки ближе к верхней границе слайда, просто отредактируйте стиль:

                  div.anythingSlider .arrow 
                  и измените значение top: 50%, 
                  например, на top: 20%. 
                  Вы также можете использовать 
                  значение в пикселях: top: 45рх;

Настройка поведения слайдера. Можете многое изменить в слайдере, просто редактируя файл CSS. Однако чтобы внести существенные изменения в его работу, Вам нужно использовать настройки плагина. Для этого передаете плагину объектную константу:

                 {
                  buildArrows: false, 
                  startText: "Start slideshow",
                  stopText: "Stop slideshow"
                    }
              В данном примере buildArrows — это настройка 
              плагина AnythingSlider, а false — это значение.

Установка этого значения не позволяет плагину создать левую и правую стрелки. Вы добавляете запятую после каждой пары настройка: значение, кроме последней ( обратите внимание, что после части "Stop slideshow" нет запятой). Затем помещаете данную объектную константу внутри функции вызова плагина. Например:

                     $('#slider').anythingslider({
                     buildArrows: false, 
                     startText: "Start slideshow", 
                     stopText: "Stop slideshow" 
                     });

Полезные настройки.

-Скрыть стрелки навигации. Чтобы скрыть левую и правую стрелки, установите значение false для настройки buildArrows:

                     buildArrows: false

-Измените надписи на кнопках Start и Stop. Чтобы изменить текст, отображаемый на кнопках Start и Stop, используйте настройки startText и stopText:

                     startText: "Start slideshow", 
                     stopText: "Stop slideshow"

-Отключите настройку автоматического проигрывания. Вы можете не отображать кнопки Start и Stop, чтобы посетители самостоятельно выбирали слайд, который они хотят просмотреть. В этом случае установите значение настройки buildStartStop на false:

                     buildstartStop: false

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

                     vertical: true

-Автоматическое проигрывание. Чтобы слайд-шоу запускалось автоматически при загрузке страницы, установите значение true для настройки autoPlay:

                     autoPlay: true

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

-Переменный размер слайдов. Если каждый слайд содержит различный объем информации, то можете сделать так, чтобы окно слайдера изменялось в размере. Например, Ваш первый слайд — это тег < div>, содержащий один абзац текста, а второй слайд — тег < div> с заголовком, двумя большими картинками и тремя абзацами. Если установите значение свойства resize Contents на значение true, то плагин AnythingSlider будет изменять размер слайдера для каждого слайда. В вышеприведенном примере слайдер, отображающий один абзац текста, будет ниже. Однако после нажатия кнопки " Далее" и перехода к следующему слайду, содержащему гораздо больше контента, высота слайдера увеличится. Данная настройка используется так:

                     resizeContents: true

Плагин AnythingSlider легко добавить на сайт и также легко настроить. Вы можете внедрять видео, добавлять спецэффекты и собственный программный код, чтобы заставить плагин работать так, как Вам нужно. За более полной информацией обратитесь на сайт.

Определение размера и положения элементов страницы. Когда динамически вносите на страницу дополнения и изменения с помощью JavaScript и jQuery, часто бывает полезно знать размер и положение элементов на странице сайта. Допустим, необходимо поместить наложение поверх страницы - эффект, при котором страница как бы тускнеет. Для этого помещаете абсолютно позиционированный тег < div> так, чтобы он закрыл окно браузера. Чтобы полностью закрыть окно, нужно убедиться, что тег < div> имеет тот же размер, что и окно, поэтому сначала необходимо выяснить ширину и высоту окна браузера.

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

Определение высоты и ширины элементов. Библиотека jQuery имеет функции height() и width() для определения высоты и ширины элементов страницы. Применив нужный селектор, можете узнать высоту и ширину любого тега на странице сайта и определить размер окна браузера и самого документа.

-Высота и ширина окна браузера. Если хотите извлечь значение высоты и ширины окна браузера - часто именуемого viewport, используйте селектор $(window) и функции height() и width():

                     var winH=$(window).height();
                     var winW=$(window).width();

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

-Высота и ширина документа. Документ и окно браузера — это не одно и то же. Они чаще всего имеют различные размеры. Документ представляет веб-страницу: если страница включает небольшой фрагмент информации - абзац, то размер документа — это размер данного абзаца - плюс отступы и поля. На большом мониторе высота документа будет меньше высоты окна браузера. И наоборот, если на странице так много контента, что посетителю приходится прокручивать ее, то высота документа будет больше высоты окна браузера. Если задали стиль для тега < body> или тега < div>, содержащего контент страницы, и установили значение ширины этого стиля, например, на 1500 пикселей, то документ может быть шире окна браузера. Для того чтобы определить ширину и высоту документа, используйте селектор $(document) и функции height() и width():

                    var docH = $(document).height();
                    var docW = $(document).width();

Вы можете применять функции height() и width() к обычным элементам HTML-кода: к абзацам, тегам < div> и изображениям. Однако это не всегда будет приводить к ожидаемым результатам. Функции height() и width() возвращают значения свойств CSS height и width, которые не обязательно соответствуют параметрам высоты и ширины элемента страницы. В языке CSS свойства height и width определяют параметры пространства, выделенного содержимому внутри тега - тексту внутри тега абзаца или др.. Однако если добавите к элементу отступ, поля и границы, то пространство, занимаемое элементом на странице, будет больше, чем значения свойств CSS height и width.

Чтобы разобраться в этой концепции, рассмотрим простую таблицу стилей для тега < div>:

                    div {
                    width: ЗООрх; 
                    height: ЗООрх;
                    padding: 20рх;
                    border: 10рх solid black;
                    
                      }

Действительная ширина и высота данного тега < div> — 360 пикселуй, поскольку занимаемое пространство страницы складывается из высоты ( или ширины), отступов и границы. Поэтому фактическая ширина = левая граница + левый отступ + значение свойства CSS width + правый отступ + правая граница, а фактическая высота = верхняя граница + верхний отступ + значение свойства CSS height + нижний отступ + нижняя граница: 10рх + 20рх + ЗООрх + 20рх + 10рх = З6Орх.

Параметры высоты и ширины не всегда однозначны, когда дело касается CSS. Свойства CSS width и height определяют только пространство, выделенное для содержимого тега. Общая высота и ширина элемента на странице рассчитывается путем сложения значений высоты и ширины со значениями отступов и границ элемента. Из-за разницы в измерениях библиотека jQuery предусматривает три набора функций для определения различных размеров элементов страницы:

-Функции width() и height() возвращают значения свойств CSS width и height элемента. Например, на Вашей странице есть код CSS, описанный выше, и тег < div>:

                    var divW = $(1div').width(); // 300px
                    var divH = $('div')•height(); // 300px

В приведенном коде переменные divW и divH содержат значение 300px — высоту и ширину, установленные в таблице стилей.

-Функция innerWidth() возвращает значение свойства CSS width + левый и правый отступы. Функция innerHeight() возвращает значение свойства CSS height + верхний и нижний отступы:

                    var divW = $('div').innerWidth(); // 340px
                    var divH = $('div').innerHeight(); //340px

В приведенном коде переменные divW и divH содержат значение 340px — высоту и ширину, установленные в таблице стилей + значения отступов.

-Функция outerWidth() возвращает значение свойства CSS width + левый и правый отступы + левая и правая границы. Функция outerHeight() возвращает значение свойства CSS height + верхний и нижний отступы + верхняя и нижняя границы:>/

                    var divW = $('div').outerWidth(); // 360px
                    var divH = $('div').outerHeight(); // 360px

В приведенном коде переменные divW и divH содержат значение 360px — высоту и ширину, установленные в таблице стилей + значения отступов и границ.

Свойства outerWidth() и outerHeight() принимают необязательный аргумент {true), который также учитывает поля вокруг элемента. Например, таблица стиля для тега < div> выглядит так:

                    div {
                    width: ЗООрх;
                    height: ЗООрх;
                    padding: 20рх;
                    border: Юрх solid black;
                    margin: 20px;
                }

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

                   var divW = $('div').outerWidth(true); // 400px
                   var divH = $('div').outerHeight(true); // 400px

Выбор функции зависит от того, чего пытаетесь достичь. Например, Вам нужно закрыть часть текста на странице черным прямоугольником, чтобы позже открыть текст. Одним из вариантов решения такой задачи является наложение на текст тега < div>, заполненного черным цветом. В данном случае Вы бы использовали функции height() и width() для определения высоты и ширины текста ( без учета отступов и границ), чтобы точно задать размеры тега перед его размещением поверх текста. Или, допустим, Вы хотите создать игру, в которой маленький шарик отскакивает от границ экрана. Вам нужно, чтобы шарик оставался внутри границ игровой области ( это может быть тег < div>, вокруг которого есть граница). Тогда Вам необходимо знать площадь внутри границ, чтобы удостовериться, что анимированный шарик не пересечет рамку. В этом случае Вы используете функции innerHeight() и innerWidth(), поскольку шарик может двигаться куда угодно внутри рамки, независимо от используемых отступов.

Не применяйте свойства inrierHeight(), innerWidth(), outerHeight(), outerWidthf) к объектам окна $('window') или документа $(document). К ним применимы только функции height() и width().

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

-offset(). Функция offset() возвращает объект, содержащий координаты элемента относительно верхнего левого угла документа. Например, хотите поместить надпись вверху изображения, которая бы появлялась при наведении на изображение указателя мыши. В этом случае понадобится выяснить положение данного изображения. Пусть изображение имеет id="captionlmage". Вы могли бы определить его координаты таким образом:

                   var imagePosition=$('#captionImage').offset();

В данном примере переменная imagePosition содержит координаты изображения, которые хранятся в объекте JavaScript и доступны при использовании точечного синтаксиса. Координата относительно левого края хранится в свойстве left, а относительно верхнего края — в свойстве top:

                   imagePosition.top // кол-во px от верхнего края документа
                   imagePosition.left // кол-во px от левого края документа

Допустим, хотите использовать эту информацию для размещения тега div> с id="caption". Используйте функцию jQuery css() для установки свойств надписи top, left и position:

                   $('#caption').css({
                   'position': 'absolute',
                   'left': imagePosition.left,
                   'top': imagePosition.top
                   }) ;

Функции offsetf) и position() всегда возвращают числа, представляющие количество пикселей от левого и верхнего краев. То есть даже если Вы используете единицы измерения (% или em) для размещения элемента на странице, эти две функции извлекают значение в пикселях.

-position(). Функция position() возвращает объект, содержащий координаты элемента относительно верхнего левого угла его ближайшего элемента-предка.

Функция offset() обычно является наиболее полезной из этих двух функций, поскольку функция offset() позволяет Вам определить местоположение элемента относительно всей веб-страницы и предоставляет необходимую информацию для размещения других элементов на странице относительно этого элемента. Вы можете использовать функцию offset() для установки значений местоположения элемента на странице, просто передайте функции объект со значениями свойств left и top так:

                   $('#element1) .offset ({
                   left: 100,
                   top: 200
                   });

Вы можете использовать только значения в пикселах для свойств left и top, значения в процентах 20% или 0.2em работать не будут.

Определение позиции прокрутки страницы. Веб-страница часто превышает размеры окна браузера, который ее отображает. Веб-документы, содержащие большой объем информации, часто бывают выше и иногда шире браузера, что заставляет посетителей прокручивать страницы сайта. Когда посетитель прокручивает страницу, часть документа исчезает из виду, документ прокручивается влево и вверх, так что левая и верхняя часть страницы скрываются за пределами окна программы. Это означает, что верхний левый угол окна браузера не соответствует верхнему левому углу документа. При попытке поместить новый элемент, например анимированный баннер, вверху экрана, возникнет проблема: если просто установите значения свойств элемента left и top на 0, то Вы поместите его вверху документа, но за пределами окна браузера. Библиотека jQuery имеет две функции, позволяющие определить, насколько страница прокручена относительно верхнего и левого краев ( другими словами, сколько пикселей документа расположено сверху и слева от окна браузера). Чтобы выяснить, сколько пикселей документа находится над верхней границей окна браузера, используйте следующий код:

                    $(document).scrollTop()
                Чтобы выяснить, сколько px документа находится 
                за левой границей, используйте такой код:
                
                    $(document).scrollLeft()

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

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

Основная идея всплывающих подсказок довольно проста: при наведении указателя мыши на элемент, рядом с ним отображается другой элемент ( обычно тег < div>) и при смещении указателя мыши с элемента подсказка исчезает. Вы будете использовать сочетание кодов CSS, HTML и JavaScript для создания эффекта. Вы будете использовать HTML-код для определения элемента, вызывающего подсказку ( элемент, на который наводится указатель мыши) и для создания самой подсказки. Код CSS Вы используете для форматирования вида окна подсказки. Вы примените код JavaScript, чтобы скрыть подсказку во время загрузки страницы. Вы также добавите обработчик события hover ко всем элементам на странице, запускающим подсказку.

HTML-код. Всплывающая подсказка состоит из двух компонентов. Первый — подсказка - элемент, появляющийся при наведении указателя мыши на элемент-триггер. Второй компонент - триггер — элемент вроде изображения, ссылки, заголовка, абзаца или тега < span>.

Всплывающая подсказка является тегом < div> с классом class="tooltip" и уникальным идентификатором id. Вы можете поместить дополнительный HTML-код внутри тега < div> - заголовки, абзацы или изображения. Но не вставляйте ссылки, поскольку они не будут работать так, как надо. Наведение указателя мыши на подсказку с целью щелкнуть по размещенной в ней ссылке смещает указатель мыши с триггера, что приводит к исчезновению подсказки. Вот, HTML-код для простой всплывающей подсказки:

                      < div class="tooltip" id="aardvarkTooltip"> 
                      < h2>Лягушка< /h2>
                      < р>Машина для сбивания масла.< /р>
                      < /div>

Хотя можете поместить теги < div> подсказки практически где угодно в HTML-коде страницы ( они все равно скрыты большую часть времени), лучше всего поместить их непосредственно перед закрывающим тегом < /body>. Это поможет избежать любых проблем с отображением, которые могут возникнуть, если Вы поместите подсказки внутри другого тега, чье свойство position установлено на значение absolute или relative.

Триггером может быть любой элемент: тег < hl>, тег < div>, тег < img>. Если хотите, чтобы триггером было одно слово или несколько слов, нужно заключить эти слова в тег < span>. Для правильной работы триггеру нужны два фрагмента информации:

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

-Данные, определяющие подсказку. Каждый триггер имеет соответствующую всплывающую подсказку. Подсказка — это тег < div>, который обычно невидим, а отображается только после наведения указателя мыши на триггер. Каждой подсказке необходим уникальный id, а Вам нужен способ ассоциации триггера с соответствующим тегом < div> подсказки, так чтобы при наведении указателя мыши на триггер знали, какую подсказку отображать. Самый простой способ — внедрение id для подсказки в атрибут триггера ( добавьте символ # перед именем и используйте библиотеку jQuery для выбора нужной подсказки). Язык HTML5 позволяет внедрять данные в HTML-теги, используя приставку data-.

Например, триггером для подсказки является слово aardvark. Наведение на него указателя мыши приведет к открытию подсказки ( т.е. тега < div> на странице с id="aardvarkTooltip"). Вы можете заключить это слово в тег < span> так:

                      < span class="trigger" data-tooltip="#aardvarkToolti p">
                      aardvark< /span>

Являющиеся особенностью HTML5 data-атрибуты весьма удобны. Они позволяют внедрять различного рода информацию в теги, которую можно будет извлечь позднее с помощью кода JavaScript. За более подробным описанием data-атрибутов обратитесь на сайт.

Если Вы используете типы документов XHTML1 или HTML4.01 и беспокоитесь по поводу прохождения проверки, Вам не стоит использовать data-атрибуты. Вместо этого Вы можете использовать атрибут HTML.014, например title:

                      < span class="trigger" title="#aardvarkTooltip">
                      aardvark< /span>

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

Вы можете поместить на страницу любое количество триггеров и подсказок.

Код CSS. Каждый тег < div> имеет класс tooltip, поэтому добавление стиля .tooltip в таблицу стилей страницы отформатирует общий вид подсказки ( включая цвет фона, границы, ширину и т. д.). Вот, базовый стиль, уже присутствующий в файле урока:

                     .tooltip {
                     width: 25%;
                     padding: 5рх;
                     background-color: white;
                     border: Зрх solid rgb(195,151,51);
                     border-radius: 5px;
                          }

Кроме того, без настройки стиля посетители не узнают, что триггер делает что-то необычное. Это особенно верно, когда добавляете подсказку к слову внутри абзаца.

Можете использовать каскадную таблицу стилей CSS, чтобы выделить триггеры: добавить границу, фоновый цвет и т.д. Например, стиль, добавляющий нижнюю границу любому элементу с классом trigger:

                     .trigger {
                     border-bottom: lpx dashed white;
                     cursor: help;
                       }

Свойство CSS cursor особенно полезно. Оно определяет, как выглядит указатель мыши в момент, когда он наведен на элемент. При наведении на обычный текст указатель мыши принимает вид столбика, но можете изменить его вид: значение help превращает указатель мыши в знак вопроса ( подходит для случаев, когда всплывающая подсказка предлагает определение термина), значение pointer заставляет указатель мыши вести себя как при наведении на ссылку. Остальные настройки указателя мыши можете найти на сайте.

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

                   .trigger:hover {
                   color: rgb(255,0,0);
                     }

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

-Скрывание всплывающей подсказки. При загрузке страницы все подсказки ( теги < div> внизу страницы) должны быть скрыты. Вы, конечно, можете это сделать в таблице стилей до загрузки страницы, но тогда посетитель с отключенным JavaScript не сможет получить доступ к содержимому подсказки. Если контент подсказки несущественен и не страшно, что некоторые посетители ( включая поисковые системы) не увидят подсказок, то можете скрыть подсказки в коде CSS:

                   .tooltip {
                   display: none;
                   }

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

• должен отобразиться тег < div> соответствующей подсказки;< /div>

• подсказка должна быть помещена рядом с триггером. Для этого необходимо определить текущее положение элемента-триггера. Кроме того, нужно гарантировать, что подсказка не закроет триггер и что подсказка будет размещена в пределах окна браузера.

-Добавьте триггеру обработчик события mouseout. Это легкая часть. Просто скройте тег < div>, когда посетитель уберет указатель мыши с триггера. Чтобы разобраться в процессе программирования, выполните следующий урок и создайте собственные подсказки.

Урок по созданию всплывающих подсказок. Создать простую всплывающую подсказку довольно легко. Вы можете использовать любой HTML-редактор.

Найдите закрывающий тег < /body> внизу страницы и добавьте следующий HTML-код для подсказки:

                    < div class="tooltip" id="tipl">
                    < h2>Подсказка< /h2>
                    < p>Это текст подсказки, который находится 
                        внутри тега div, так что можете поместить 
                        сюда все, что угодно.< /р>
                    < /div>

Самая важная часть — это внешний тег < div>. Он содержит класс tooltip, который необходим как для кода CSS, так и для программы, которую добавите чуть позже. Кроме того, уникальный id идентифицирует эту конкретную подсказку и позволяет Вам присоединить к подсказке триггер. Контент внутри тега div> может представлять собой любой HTML-код. В данном случае это заголовок и абзац.

-Найдите тег < р> сразу под заголовком < h1>Всплывающие подсказки < /h1> примерно посередине файла. Заключите несколько слов этого абзаца в тег < span>:

                    < span class="trigger" data-tooltip="#tipl">
                     который находится внутри тега div< /span>

Класс идентифицирует этот тег < span> в качестве триггера для подсказки. Таблица стилей форматирует любой тег с классом trigger особым образом. Кроме того, атрибут data-tooltip определяет HTML-код, к которому относится данный триггер.

Добавьте еще одну подсказку после тега < div>, но перед закрывающим тегом < /body>:

                   < div class="tooltip" id="tip2">
                   < h2>Еще одна подсказка
                   < p>< img src="../_images/small/yellow_h.jpg"
                    alt="yellow" width="70" height="70" class="imgRight">
                    Это еще одна подсказка, в которой даже есть фотография.< /р>
                   < /div>

Вы только что добавили еще одну всплывающую подсказку. Обратите внимание, что она имеет тот же класс, что и предыдущая подсказка, но уникальный id="tip2". Эта подсказка также включает изображение. Теперь Вы добавите триггер для этой подсказки.

-Найдите еще несколько слов внутри абзаца и заключите их в тег < span>:

                   < span class="trigger" data-tooltip="#tip2">
                   даже есть фотография< /span>

Обязательно используйте для новой подсказки id="#tip2". Вы можете продолжить добавление подсказок и триггеров, просто не забывайте создавать уникальный id для каждой подсказки и затем использовать его при установке атрибута триггера data-tooltip.

Теперь пришло время для программирования. Эта страница уже содержит файл jQuery и функцию $(document).ready(). Первым делом Вы скроете все подсказки при загрузке страницы.

-Щелкните в пустой строке внутри функции S(document).ready() и введите:

                   $('.tooltip').hide();

Функция jQuery hide() скрывает все подсказки, так что посетители не увидят их при загрузке страницы. Вам нужно, чтобы отдельные подсказки появлялись в ответ на наведение указателя мыши на триггер, поэтому следующий шаг — это выбор всех триггеров и добавление обработчика события mouseover.

-Добавьте:

                    $('.trigger').mouseover(function() {
                     }); // конец mouseover

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

Метод определения того, в каком месте экрана следует поместить подсказку, несколько запутан, и Вам потребуется много различных фрагментов информации, чтобы это сделать. Поэтому первая часть данной функции создает несколько переменных.

-Внутри анонимной функции, которую только что добавили, введите код:

                      1	$('.trigger').mouseover(function() {
                      2	var ttLeft,
                      3	ttTop,
                      4	}); // конец mouseover

Вы создали две переменные: ttLeft для координаты относительно левого края, a ttTop — относительно верхнего края. В данный момент переменные пусты, поскольку Вы точно не знаете, какими должны быть значения. Такой способ создания переменных может показаться странным. Вы, возможно, привыкли создавать две переменные, используя ключевое слово var так: var ttLeft, var ttTop. Это приемлемо, но когда создаете много переменных сразу, можете использовать одно слово var, за которым через запятую следует несколько переменных. Запятая в конце строки 3 — это не опечатка, предстоит создать еще несколько переменных.

-Добавьте еще одну переменную в код ( строка 4):

                      1	$('.trigger').mouseover(function() {
                      2	var ttLeft,
                      3	ttTop,
                      4	$this=$(this),
                      5	}); // конец mouseover

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

Сохраняя выборку jQuery в переменной, можете добавить символ $ перед именем переменной:

                      var $banner = $('#banner');
                      
                   Этот символ не обязателен: код var banner = $('#banner'); 
                   тоже сработает. Однако значок доллара напоминает, что 
                   переменная содержит выборку jQuery, а не просто какое-то 
                   значение вроде числа или строки.

-Добавьте еще одну переменную (строка 5):

                     1 $('.trigger').mouseover(function () {
                     2 var ttLeft,
                     3 ttTop,
                     4 $this=$(this),
                     5 $tip = $($this.attr('data-tooltip')),
                     6 }); // конец mouseover

Переменная $tip содержит выбранную библиотекой jQuery подсказку. Код $($this.attr('data-tooltip')) делает очень многое. Часть внутри $()— $this.attr('data-tooltip') — использует функцию jQuery, attr() для извлечения атрибута триггера 'data-tooltip' ( помните, что $this относится к триггеру). Другими словами, этот код берет текущий элемент-триггер, ищет атрибут data-tooltip и извлекает его значение. Например, для триггера, добавленного на шаге 3, данный код возвратил бы значение '#tip1', а для триггера в шаге 5 — '#tip2. После извлечения значения атрибута data-tooltip оно передается функции jQuery (часть $() в строке 5). Другими словами, код принимает вид $('#tip1') или $('#tip2'). После выполнения строки 5 у Вас появляется переменная tip, содержащая выборку jQuery для соответствующей подсказки. Далее можете ее использовать для отображения, анимации или позиционирования подсказки на экране.

-Добавьте строки 6-12 в функцию mouseover:

                      1	$('.trigger').mouseover(function () {
                      2	var ttLeft,
                      3	ttTop,
                      4	$this=$(this),
                      5	$tip=$($this.attr('data-tooltip')),
                      6	triggerPos = $this.offset(),
                      7	triggerH = $this.outerHeight(),
                      8	triggerW = $this.outerWidth(),
                      9	tipW = $tip.outerWidth(),
                     10	tipH = $tip.outerHeight(),
                     11	screenW = $(window).width(),
                     12	scrollTop = $(document).scrollTop();
                     13	}); // конец mouseover

Здесь Вы собираете большое количество информации о местоположении и размерах различных элементов. Страница прокручена вверх, так что ее часть находится выше верхней границы окна браузера, а так как страница шире и выше окна, то часть страницы скрыта за правым и нижним краями. Посетитель, просматривающий страницу, прокрутил ее вниз, так что верхняя часть страницы не видна, как и правая и нижняя части. Подсказка изображена внизу документа, так как при загрузке страницы она расположена в этом месте. Программа определяет, где должна находиться подсказка и располагает ее там. Строка 6 извлекает координаты триггера относительно верхнего и левого краев окна браузера, которые необходимы, чтобы позиционировать подсказку относительно него. Строки 7 и 8 используют функции outerHeight() и outerWidthQ для извлечения значений высоты и ширины ( включая отступы и границы) триггера, в то время как строки 9 и 10 извлекают значения ширины и высоты подсказки. Поскольку не хотите, чтобы подсказка появлялась за пределами окна, нужно определить ширину экрана ( строка 11), а также выяснить, не прокрутил ли посетитель страницу, и если так, то насколько (строка 12). Не забудьте точку с запятой в конце строки 12, поскольку это конец выражения var, начатого в строке 2.

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

-Добавьте строки 13-17 в функцию mouseover:

                      1 $('.trigger').mouseover(function() {
                      2	var ttLeft,
                      3	ttTop,
                      4	$this=$(this),
                      5	$tip = $($this.attr('data-tooltip')),
                      6	triggerPos = $this.offset (),
                      7	triggerH = $this.outerHeight (),
                      8	triggerW = $this.outerWidth(),
                      9	tipW = $tip.outerWidth(),
                     10	tipH = $tip.outerHeight(),
                     11	screenW = $(window).width(),
                     12	scrollTop = $(document).scrollTop();
                     13	if	(triggerPos.top - tipH - scrollTop > 0 ) {
                     14	ttTop = triggerPos.top - tipH - 10;
                     15	} else {
                     16	ttTop = triggerPos.top + triggerH +10 ;
                     17	}
                     18	});	// конец mouseover

Здесь происходит много всего, следует начать с определения того, где хотите позиционировать верхнюю часть подсказки относительно триггера. Обычно бы поместили подсказку на 10px выше триггера, чтобы она его не перекрывала. Чтобы выяснить местоположение верхней части, выясняете местоположение верхней части триггера, затем вычитаете высоту подсказки, а затем вычитаете еще 10px. Например, триггер располагается на расстоянии 150px от верхнего края документа, а подсказка имеет высоту 100px. Чтобы поместить подсказку так, чтобы она не перекрывала триггер, возьмите позицию верха триггера 150px, вычтите 100px (высота подсказки) и еще 10px ( чтобы оставить немного пространства над триггером). В результате подсказка будет размещена на 40px ниже верхней границы документа.

Что если триггер находится на расстоянии 10px от верхнего края документа, а подсказка имеет высоту 100px? Если бы просто использовали приведенное выше уравнение, то получили бы значение 10 - 100 = -90px, другими словами за пределами документа!

Вот где пригодится условие в строке 13. Вы берете положение триггера, вычитаете высоту подсказки и количество px, на которые посетитель прокрутил страницу. Далее проверяете, чтобы значение было больше 0 ( если оно меньше 0, то подсказка будет помещена за верхним краем окна браузера). Вам нужно учесть еще и прокрутку, поскольку подсказка может поместиться над триггером, не скрываясь за верхним пределом документа, но если страница прокручена, она по-прежнему может оказаться за пределами окна браузера. Если условие истинно, то подсказка помещается над триггером ( строка 14). Однако если условие ложно, выполняется строка 16, которая располагает подсказку на 10px под нижней частью триггера ( определяете местоположение низа триггера как положение верха ( triggerPos.top) плюс его высота ( triggerH)).

Далее нужно определить положение подсказки относительно левого края.

Данный пример помещает подсказку над триггером, но так делать необязательно. Смело экспериментируйте с кодом, чтобы поместить подсказку под триггером, слева или справа от него.

-Добавьте строку 18 в функцию mouseover:

                      1	$('.trigger').mouseover(function() {
                      2	var ttLeft,
                      3	ttTop,
                      4	$this=$(this),
                      5	$tip = $($this.attr('data-tooltip')),
                      6	triggerPos = $this.offset (),
                      7 triggerH = $this.outerHeight(),
                      8	triggerW = $this.outerWidth(),
                      9	tipW = $tip.outerWidth(),
                     10	tipH = $tip.outerHeight(),
                     11	screenW = $(window).width(),
                     12	scrollTop = $(document).scrollTop();
                     13	if (triggerPos.top - tipH - scrollTop > 0 ) {
                     14	ttTop = triggerPos.top - tipH - 10;
                     15	} else {
                     16	ttTop = triggerPos.top + triggerH +10;
                     17	}
                     18	var overFlowRight = (triggerPos.left + tipW) - screenW;
                     19	}); // конец mouseover

Вычисление положения левого края элемента немного сложнее, чем верхнего. Вы должны знать, насколько далеко расположена подсказка от левого края. Например, левый край триггера расположен на расстоянии 850px от левого края окна, ширина подсказки равна 250px, а ширина окна браузера — 1000px. Если поместите левый край подсказки на расстоянии 850px от левого края окна, то ее правый край будет расположен на расстоянии 1100px. Это означает, что 100px подсказки не будут видны. Чтобы это исправить, нужно знать, насколько подсказка заходит за правый край окна браузера, и подстроить положение ее левого края, сдвинув его на то же количество px влево.

Строка 18 вычисляет ( при необходимости), сколько px подсказки скрыто за правым краем окна браузера. Для этого сначала вычисляется положение левого края подсказки, если бы она была позиционирована слева от триггера ( triggerPos.left) + ширина подсказки ( tipW). Далее вычитается ширина экрана. Если в результате получается положительное значение, то некоторая часть подсказки окажется за пределами окна браузера. Если отрицательное, то на экране достаточно места, чтобы подсказка убралась полностью.

-Введите следующий код под только что добавленной строкой (строка 18):

                     if (overFlowRight >0) {
                     ttLeft=triggerPos.left-overFlowRight-10;} else {
                     ttLeft=triggerPos.left; 
                     }

Этот код означает, что если переменная overFlowRight содержит положительное число ( т.е. подсказка не убирается), тогда левый край подсказки ( ttLeft) устанавливается в положение левого края триггера минус количество px, которые не поместились на экране. Вычитание дополнительных 10px предотвращает соприкосновение подсказки с краем окна. Если значение переменной overFlowRight отрицательно, то подсказка убирается, поэтому положение ее левого края выравнивается с положением левого края триггера:

                     ttLeft=triggerPos.left;

Положение верхнего и левого краев подсказки рассчитаны, поэтому теперь можете заставить ее появиться на экране.

-Добавьте строки 24-28 для завершения функции mouseover:

                     1 $('.trigger').mouseover(function() {
                     2 var ttLeft,
                     3 ttTop,	
                     4 $this=$(this),	
                     5 $tip = $($this.attr('data-tooltip')),
                     6 triggerPos = $this.offset(),	
                     7 triggerH = $this.outerHeight(), 
                     8 triggerW = $this.outerWidth(),	
                     9 tipW = $tip.outerWidth(),	
                    10 tipH = $tip.outerHeight(),	
                    11 screenW = $(window).width(),	
                    12 scrollTop = $(document).scrollTop(	:);
                    13 if(triggerPos.top - tipH - scrollTop >0 )
                    14 ttTop = triggerPos.top - tipH - 10;	
                    15 } else {	
                    16 ttTop = triggerPos.top + triggerH +10;	
                    17 }	
                    18 var overFlowRight = (triggerPos.left + tipW) -
                       screenW;
                    19 if (overFlowRight >0) {
                    20 ttLeft = triggerPos.left - overFlowRight - 10;
                    21 } else {
                    22 ttLeft = triggerPos.left;
                    23 }
                    24 $tip.css({
                    25 left: ttLeft, 
                    26 top: ttTop, 
                    27 position: 'absolute' 
                    28 }), fadeln(200);
                    29 }); // конец mouseover

Используя возможность связывания функций, сначала к подсказке применяется функция, css() с вычисленными значениями положения верхнего и левого краев. Поскольку позиционируете подсказку, ее свойство position установлено на значение absolute. Далее функция fadeIn() быстро проявляет ее. К счастью, заставить подсказку исчезнуть при смещении указателя мыши с триггера намного проще.

-Закончите код, добавив строки 30-32, чтобы итоговая программа выглядела так:

                      1	$('.trigger').mouseover(function() {
                      2	var ttLeft,
                      3	ttTop,
                      4	$this=$(this),
                      5	$tip = $ ($this.attr('data-tooltip')),
                      6	triggerPos = $this.offset(),
                      7 triggerH = $this.outerHeight(),
                      8	triggerW = $this.outerWidth(),
                      9	tipW = $tip.outerWidth(),
                     10	tipH = $tip.outerHeight(),
                     11	screenW = $(window).width(),
                     12	scrollTop = $(document).scrollTop();
                     13	if (triggerPos.top - tipH - scrollTop > 0 ) {
                     14	ttTop = triggerPos.top - tipH - 10;
                     15	} else {
                     16	ttTop = triggerPos.top + triggerH +10 ;
                     17	}
                     18	var overFlowRight = (triggerPos.left + tipW) - screenW;
                     19	if (overFlowRight >0) {
                     20	ttLeft = triggerPos.left - overFlowRight - 10;
                     21	} else {
                     22	ttLeft = triggerPos.left;
                     23	}
                     24	$tip.css({
                     26	top: ttTop,
                     27	position: 'absolute'
                     28	}).fadeln(200);
                     29	}); // конец mouseover
                     30	$('.trigger').mouseout(function () {
                     31	$('.tooltip').fadeOut(200);
                     32	}); // конец mouseout

С функцией moueseout все просто: скройте видимую подсказку при смещении указателя мыши с триггера. И все. Сохраните файл и просмотрите его в браузере.

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

qTip2(craigsworks.com/projects/qtip2/) — это мощный плагин для создания сплывающих подсказок.. Этот плагин может не только создавать подсказки, но текстовые облачка, следовать за указателем мыши по экрану, загружать контент с сервера, чтобы отобразить в подсказке, и многое другое. Вы можете использовать его для создания диалоговых окон, выпадающих меню и не только.

Query Tools Tooltip(flowplayer.org/tools/tooltip/index.html) — отличный плагин для создания подсказок, которые выглядят качественно и легко настраиваются. Коллекция jQuery Tools включает плагины для вкладок, наложений и форм, слайдер ( как плагин AnythngSlider) и многое другое;

jQuery UI Tooltip(wiki.jqueryui.com/w/page/12138112/Tooltip). Это большая коллекция виджетов пользовательского интерфейса и инструментов.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: