Главная → Программирование → by

Создать Fancy Раздвижные меню с JQuery

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

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

В этом уроке we’ создадим раздвижных меню с помощью Jquery рамки.Вы найдете загружаемые файлы источника в конце урока, если вы хотите использовать их на своем сайте.Но главной целью этой статьи является показать вам несколько основных приемов для создания подобных эффектов и предоставит вам инструменты, необходимые для реализации собственных творческих идей.Этот урок предназначен для начинающих разработчиков JQuery и те просто попасть в сценариев на стороне клиента.You’ узнаете, как постепенно построить этот простой эффект от scratch.

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

Почему JQuery

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

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

Мы выбрали JQuery, потому что it’ одна из самых популярных рамок там, с довольно обширной и простой в использовании (не говоря уже о хорошо документированных) API.Тем не менее, вы можете очень вероятно реализации те же методы продемонстрировали здесь в любом рамках вашего choice.

Перед Мы Start

Прежде чем писать ни строчки кода, всегда рассматривать как you’ повторно собирается интегрировать код JavaScript в вашем HTML, как пользователи будут взаимодействовать с интерфейсом и, как общее решение будет влиять на пользовательский опыт.В меню, например, вы должны рассмотреть вопрос о целесообразности содержания создается динамически или статическими.С динамического контента, меню, анимация по щелчку мыши будет работать прекрасно, но этоwouldn’ T выглядит так фантазии для статического контента, в котором странице, чтобы перезагрузить каждый раз, когда пользователь нажимает на пункт меню.Когда вы должны играть анимацию тогда?До или после перезагрузки страницы?Качество и скорость эффекта зависит от многих факторов, в том числе user’ компьютер с, будь то website’ с содержанием в кэш, сколько содержание вы хотите показать и так on.

Вы должны рассмотреть все возможности вашей конкретной ситуации, чтобы получить лучшее из него.There’ нет золотого правила здесь.Ради простой демонстрации, we’ ве решили сосредоточиться в основном на код JavaScript, но we’ будем предлагать некоторые возможные решения в конце article.

Основы HTML и CSS

Let’ S начать уже!Мы должны создать прочную основу для нашего кода JavaScript в первую очередь.Никогда не забывайте, что, хотя наличие используется практически везде в настоящее время, некоторые пользователи (и поисковые системы, конечно) до сих пор не имеют его включить.Поэтому мы должны убедиться, что все работает отлично и выглядит хорошо даже без фантазии effects.

<div class="menu">

    <div class="menu_button"><img src="button_1.png" alt="" /></div>
    <div class="menu_slider"><img src="img_1.png" alt="" /></div>

    <div class="menu_button"><img src="button_2.png" alt="" /></div>
    <div class="menu_slider"><img src="img_2.png" alt="" /></div>

    <div class="menu_button"><img src="button_3.png" alt="" /></div>
    <div class="menu_slider"><img src="img_3.png" alt="" /></div>

    <div class="menu_button"><img src="button_4.png" alt="" /></div>
    <div class="menu_slider"><img src="img_4.png" alt="" /></div>

    <div class="menu_button"><img src="button_5.png" alt="" /></div>
    <div class="menu_slider"><img src="img_5.png" alt="" /></div>
</div>
.menu {
    width : 100%;
}

.menu .menu_button, .menu .menu_slider {
    margin : 0;
    float : left;
    height : 158px;
}

.menu .menu_button {
    width : 33px;
    cursor : pointer;
}

.menu .menu_slider { /* Hide the contents by default */
    width : 0px;
    overflow : hidden;
}

.menu .menu_button:hover {
    background : #ddd;
}

Выше код генерирует простую строку меню, которое состоит из 12 контейнера (div) элементов, каждый из которых содержит одно изображение, чередуя кнопки меню и меню изображения слайдера.Мы могли бы использовать только img элементы и просто положить их один за другим, но действительным XHTML требует, чтобы мы обернуть их в еще один элемент, так что мы сделали, что с помощью div контейнеры.Это также позволяет заменить изображение с любой другой элемент позже (см. пример в конце этого урока), потому что we’ будем иметь дело только с контейнерами.Положим menu_slider класса контейнера шириной 0px, так что они будут невидимы по умолчанию, и we’ VL скрыть и показать их динамически с JavaScript.

Мы используем float: left здесь, чтобы держать div элементов на одной line.

Кроме того, обратите внимание, что я опустил width height, и alt атрибуты в img теги для удобства чтения (ну, they’ повторно там, но пустой), но вы всегда должны включать, по крайней мереalt атрибут на ваш сайт действительно HTML/XHTML.

Последняя строка может быть не столь очевидным.Мы устанавливаем цвет фона для парить до #ddd.Это гарантирует, что разные цвета для названия кнопки появляется при наведении указателя мыши на один.Если наше меню были вертикальными, мы бы просто ввести color: #ddd, а потому, что it’ с горизонтальными и наши письма находятся на 90 ° градусов, мы должны получить немного сложнее.Таким образом, мы используем прозрачные PNG-меню с кнопками, и мы вроде как вырезать текст с кнопки, оставляя буквы полностью прозрачным.С помощью этого метода мы можем управлять цветом текста, просто изменив фон, который будет показывать через прозрачную area.

overflow: hidden. Линия не является необходимым при работе с изображениями, но это пригодится, если мы хотим использовать другие эффекты слайд вместо (см. далее в руководстве)

Here’ ы, что наше меню в настоящее время выглядит следующим образом.(Наведите указатель мыши на элемент, чтобы увидеть серый фон позади кнопок).


JQuery Magic

Сейчас самое интересное.Let’ начнем путем связывания slide функции мыши события в каждом меню button.

Помните, что каждый menu_slider ‘ с шириной в настоящее время 0px.Что slide() делает, анимации ширины контейнера в непосредственной близости от нажатия кнопки, чтобы сделать это перейти от 0px к указанной ширины, создавая слайд effect.

Мы используем $(this) выражение для преобразования нажатия кнопки JQuery объекта сразу, поэтому мы можем использовать jQuery’ S next() метод, чтобы получить div рядом с кнопкой.Это будет соответствующим menu_slider, что теперь мы можем перейти к slide() функции для анимации it.

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

function slide ( menu_slider ) // Function to render the animation.
{
	menu_slider.animate (
	    { 'width' : '253' }, // The first parameter is a list of CSS attributes that we want to change during the animation.
	    1000 // The next parameter is the duration of the animation.
	);
}

$(".menu .menu_button").bind ( "click", function ( event ) // We're binding the effect to the click event on any menu_button container.
{
	// Get the item next to the button
	var menu_slider = $(this).next(); // We convert it to a jQuery object: $(HTMLElement)
	// Do the animation
	slide ( menu_slider );
}

Как вы можете видеть, события щелчка начинается весь процесс.Во-первых, мы сохраняем элемент рядом с кнопкой (т.е. соответствующего изображения) в переменную menu_slider.Тогда мы передать его в slide function.

Наконец, слайд функция использует jQuery’ с живой метод для создания эффекта.Ее первый параметр является списком атрибутов CSS, что мы хотим изменить (в данном случае, только ширина изображения, чтобы 253px).Вторым параметром является длительность анимации в миллисекундах.We’ ве установить его в 1 second.

Дайте ему попробовать:

Вы можете видеть, что it’ с работы, хотя и далеко от совершенства.Задание высоты изображения заранее (как мы это делали в CSS) очень важно, иначе высота будет расти пропорционально ширине, в результате чего различные effect.

В настоящее время, вы можете нажать на каждый пункт меню и выдвиньте соответствующее изображение, которое является не то, что мы хотим, так we’ будете исправить это сейчас.Нам просто нужно ввести новую переменную active_menu который хранит активного в данный момент menu_button объекта, а we’ будете также изменить slide функции принять еще один параметр, который будет указывать направление слайда или,Точнее, ширина свойства анимации.Таким образом, если мы передаем параметр больше 0, то будет скользить, и если мы передаем 0, она будет скользить назад in.

// Global variables
var active_menu; // We introduce this variable to hold the currently active (i.e. open) element.
function slide ( menu_slider, width )
{
	menu_slider.animate (
	    { 'width' : width }, // We replaced the specific value with the second parameter.
	    1000
	);
}

$(".menu .menu_button").bind ( "click", function ( event )
{
	// Get the item next to the button.
	var menu_slider = $(this).next();
	// First slide in the active_menu.
	slide ( active_menu, 0 );
	// Then slide out the clicked menu.
	slide ( menu_slider, 253 );
}

// We also slide out the first panel by default and thus set the active_menu variable.
active_menu = $($( ".menu_slider" )[0]); // Notice we've converted it to a jQuery object again.
slide ( active_menu, 253 );

Одно дело иметь в виду, что каждый JQuery объект ведет себя вроде как массив, даже если он содержит только один элемент.Таким образом, чтобы получить объект DOM it’ с ссылкой на (в нашем случае img элемент), мы имеем доступ к массиву и получить первый элемент из него.Мы сделали это с ($( ".menu_slider" )[0] выражение, которое выбирает самые первые DOM элемент “ menu_slider” класса, но вы можете использовать альтернативные get методом, а также:. $(".menu_slider").get(0)

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


Несколько Fixes

Все права, в конце концов, наш скрипт работает так, как мы хотим, за исключением некоторых глюков, которые we’ LL-адреса.They’ повторно не фатальные ошибки.В самом деле, вы даже можете оставить их как есть, но если вы don’ т, here’ SA способ решить them.

Запрет нескольких открытых Panels

Если you’ ве играл с демо выше, вы, вероятно, заметили, что если вы нажмете более чем одной панели в течение 1 секунды, более чем одна анимация может работать в то же время, иногда делая меню шире, чем должен быть.

Чтобы решить эту проблему, мы можем просто ввести еще одну переменную, которая определяет, будет ли анимация играет или нет.We’ будем называть это is_animation_running.Мы устанавливаем эту переменную в true, как только слайд эффект начинается, и мы его обратно в false когда заканчивается анимация.Чтобы достичь этого, мы используем animation function’ S another параметр, который определяет другую функцию для запуска сразу после завершения анимации.Это важно, потому что если вы только что установили is_animation_running до false после анимации функция, ничего не случится, потому что он будет выполнять почти мгновенно, когда скольжение только начался.С помощью этого третий параметр, мы гарантируем, что переменная будет установлена ​​на false в нужное время, независимо от effect’ продолжительности с.Тогда мы просто позволяем нашим приложение для запуска только тогда, когда is_animation_running составляет false. (То есть при отсутствии других раздвижные панели на данный момент) 

var active_menu;
var is_animation_running = false; // New variable.
function slide ( menu_slider, width )
{
	is_animation_running = true; // Indicates that an animation has started.
	menu_slider.animate (
	    { 'width' : width },
	    1000, // <- Notice the column!
	    function () // This third parameter is the key here.
	    {
		  is_animation_running = false; // We set is_animation_running to false after the animation finishes.
	    }
	);
}

$(".menu .menu_button").bind ( "click", function ( event )
{
	// First check if animation is running. If it is, we don't do anything.
	if ( is_animation_running )
	{
		return; // Interrupt execution.
	}
	var menu_slider = $(this).next();
	slide ( active_menu, 0 );
	slide ( menu_slider, 253 );
}

active_menu = $($( ".menu .menu_slider" )[0]);
slide ( active_menu, 253 );

Теперь, если нажать несколько кнопок, только одна анимация будет работать на time.

Свернуть Self-Glitch

Возможно, вы также заметили, что происходит, когда вы нажимаете на активную в данный момент кнопку.Он скользит и затем снова.Если that’ круто с вами, то хорошо, но, возможно, вы хотите, чтобы исправить активной item’ S width.

Чтобы сделать это, мы просто добавим немного чек.Всякий раз, когда меню нажата кнопка, мы проверяем, если контейнер рядом с ним находится active_menu или нет.(Помните, active_menu переменная магазинах div контейнер, который в настоящее время выскользнула.) Если это так, мы ничего не делаем, в противном случае мы будем играть анимации.Просто, как пирог

Но помните, мы говорили, что каждый JQuery объект ведет себя как массив?В самом деле, потому что it’ просто набор элементов DOM, there’ действительно не хороший способ сравнить два таких объектов.Таким образом, we’ будете получить доступ к DOM элементов непосредственно увидеть, если they’ повторно той же или нет (т.е. active_menu[0] и $(this).next()[0]). 

var active_menu;
var is_animation_running = false;

function slide ( menu_slider, width )
{
	is_animation_running = true;
	menu_slider.animate (
	    { 'width' : width },
	    1000,
	    function ()
	    {
		  is_animation_running = false;
	    }
	);
}

$(".menu .menu_button").bind ( "click", function ( event )
{
	// First, check if the active_menu button was clicked. If so, we do nothing ( return ).
	if ( $(this).next()[0] == active_menu[0] )  // Here we make the check.
	{
		return;
	}
	if ( is_animation_running )
	{
		return;
	}
	var menu_slider = $(this).next();
	slide ( active_menu, 0 );
	active_menu = menu_slider; // Set active menu for next check.
	slide ( active_menu, 253 ); // Now we can pass active_menu if we want.
}

active_menu = $($( ".menu .menu_slider" )[0]);
slide ( active_menu, 253 );

Наше меню теперь работает.Попробуйте это: нажмите на кнопку два раза.Ничего не должно произойти на второй click.


Очистка Up

Все права, we’ Re почти нет.Если вы разместите код на веб-сайте прямо сейчас, это, скорее всего, работать нормально.Но, чтобы убедиться, что все идет гладко, let’ S избавиться от этих глобальных переменных.Сокрытие этих внутри класса всегда является хорошей идеей, так что они don’ T столкновения с …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.