JQuery: find ()
JQuery большой рамки JavaScript. Если вы еще не приходилось работать с ним, я надеюсь, что следующее издание будет рекомендуем Вам воспользоваться данном решении. Потому что характеризуется скоростью, оптимизируя код для размещения в нем, как многие браузеры, а также, что, вероятно, многие из самых интересных - легко строить сложные решения.
В сегодняшней статье основное внимание будет уделено очень полезный метод find ().
Если вы еще не занимались этой связи я призываю вас, чтобы ознакомиться с основами селекторы с помощью официального API на selectorów , или подготовленные Бартош Medonia конечно JQuery основы . Эта информация значительно облегчит понимание решений, представленных в настоящем документе.
Лучший давайте конкретные пример этого метода. На большинстве страниц, одним из основных элементов меню. Мы постараемся, чтобы создавать свои собственные анимированные меню с помощью минимального количества компонентов и действующая в рамках любого браузера, поддерживающего JavaScript.
Первый Подготовка элементов
Давайте начнем с создания пустой HTML документ:
<DOCTYPE HTML PUBLIC! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> меню </ title> </ HEAD> <body> </ Body> </ Html>
Затем взять последнюю версию JQuery с официального сайта проекта (производство) и скопируйте его в папку нашего HTML-файлов.
В этом документе, можно использовать некоторые примеры содержания, и наше меню. Используется для этого дел и диапазон теги. Конечно, эти элементы в нашем меню, должны быть ссылки, тем самым ставя их в блок. Весь положить внутрь блока DIV с ID = меню. Добавлен файл с помощью JQuery теги сценария. Все должно выглядеть примерно так:
<div id="menu"> <div> HREF # 1 Меню </ a> <span> HREF # 1.1 Меню </ a> HREF # 1.2 Меню </ a> HREF # 1,3 меню </ a> </ SPAN> </ Div> <div> HREF # 2 Menu </ a> <span> HREF № 2.1 Меню </ a> HREF # 2.2 Меню </ a> HREF # 2.3 Меню </ a> HREF # 2,4 меню </ a> HREF # 2.5 Меню </ a> </ SPAN> </ Div> <div> HREF № 3 Меню </ a> <span> HREF # 3.1 Меню </ a> HREF # 3.2 Меню </ a> HREF # 3.3 Меню </ a> HREF # 3,4 меню </ a> </ SPAN> </ Div> <div> HREF # 4 меню </ a> <span> HREF # 4,1 меню </ a> HREF # 4.2 Меню </ a> </ SPAN> </ Div> </ Div> <! - End # меню -> Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. Там некоторые примеры содержания. <script type="text/javascript" src="jquery.js"> </ SCRIPT>
Специально поставил многие пункты меню, чтобы показать, насколько легко будет привлекательным для многих из них с JQuery, в зависимости от блока мы перемещаем мышь.
Второй Определить внешний вид меню (CSS)
В этом разделе мы определим вид используется в HTML-файл, блоки кода. Я подготовил себя следующий код в стиле, расположен в головной части:
<style type="text/css"> <! - * {Маржа: 0px, обивка: 0px;} {текст-отделка: нет; шрифта: 20px Грузии, "Times New Roman", Times, с засечками;} HTML, BODY {маржа: 10px;} # {Верхнем меню: 0px; float: left; ширина: 100%;} Div # {меню позицию: относительный; float: left;} Div # меню: активный, раздел меню #: ссылки, раздел меню #: visited {Дисплей: блок; позиция: относительная, вертикальная-align: средний; фон: # CCC; цвет: # FFF; обивка: 5px 10px; Ширина: 150px;} Div # меню: при наведении {фон: # 999;} Div # {меню промежуток дисплей: нет; позицию: абсолютная, вверху: 100%; налево: 0; поплавок: нет;} Раздел меню DIV #: активный, # меню DIV DIV: ссылки, раздел меню # диапазон: visited {позицию: относительный; дисплей: блок; float: left; сверху: 0px; фон: # DDD; цвет: # FFF; обивка: 5px 10px; ширина: 150px;} Раздел дел # меню: при наведении {фон: # 999;} -> </ Style>
В нашем примере, мы создаем только простые двухуровневые меню, но нет ничего в том, как изменить их и адаптировать к любым количеством уровней.
Если мы в этот момент, вы должны также обратиться к основа для создания css'owego меню .
Треть Гвоздь программы - найти.
К таким мерам, мы готовы реализовать всю страницу JavaScript код. Мы также знаем, как уже упоминалось, заявив, что селектор. В нашем случае, например, довольно просто, так как существует всего четыре основных меню, но это не трудно представить, что может быть и больше, и каждый может иметь несколько ветвей. Это лишает цикл метода, также не грубой силой, рассмотрев все случаи отдельно. Но благодаря найти метод, проблема сводится к одному очень четкие строки кода, которые выполняют всю работу за нас. Это хорошо, что наш код JavaScript был $ (документ). Ready, обеспечения мы имеем в виду, когда страница загружается, все внешние скрипты, стили и другие файлы.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Документ). Ready (функция () { $ ("Div # меню"). Hover ( функция () { . $ (Это) Искать ("Диапазон") CSS ({непрозрачность: 0.98}) SlideToggle ("быстрый").. } функция () { . $ (Это) Искать ("Диапазон") SlideToggle ("быстрый"). } ); }); / /]]> -> </ SCRIPT>
Этот код я рекомендую поставить тег, который мы называем JQuery, на дне.
В основном выбор, обратитесь к тегу ID = "меню", внутри которого находится дел. Метод. Наведите (), означает появление вторгнуться мыши, выбранный пункт и в качестве параметров, занимает одну или две функции, которые выполняются во время начала этого события. Второй особенностью является обязательным и осуществляется при наведении курсора мыши покинуть территорию нашего элемента. Пытался ввести код так, что обе функции являются прозрачными для читателя, но я рекомендую минимизации кода в уже существующих проектах.
Перейдем теперь к анализу кода внутри функции. Опять же, здесь мы используем селектор, на этот раз мы обращаемся к теме, в которой мы живем. Каждая возвращает JQuery селектор, который может быть решена путем настоящего пункта. Но если вы хотите внутри элемента, см. пункт в пункт, используйте Найти метод, который находит и возвращает все соответствующие элементы. Имейте это в виду, потому что если вы хотите обратиться к конкретному объекту, вы должны использовать такой класс, а после апелляции. Найти (". ClassNazwa"). Конечно, внутри найти, мы можем обратиться к более сложным элементам структуры, а также JQuery селекторы.
Первая особенность, как вы можете видеть, изменять найти метод возвращает объект и изменить его прозрачность, а затем использовать метод slideToggle (), должны быть начаты анимации, в данном случае, это анимация, "по убыванию" на дно, которое определяет набор параметров для отображения ни в настройках элемента (элемент невидим, так скользить только самое можно сделать, это показать его).
Во второй функции, все выглядит очень похоже, за исключением того, что мы больше не нужно изменять прозрачность, потому что она уже изменилась. Мы делали это на JQuery, в том числе потому что в CSS, не было бы возможно, таким образом, чтобы обеспечить полное соответствие W3C валидатор, и прозрачность была корректно отображаться на всех современных браузерах, поддерживающих JavaScript.
Четвёртое Резюме
Целью этой статьи было научиться создавать анимированные меню, но, знакомясь с множеством интересных вопросов, касающихся метода find (), а также JQuery. Возможности огромны, и я надеюсь, что после прочтения этой статьи, она получит несколько энтузиастов.
В то время как эффект от нашей работы, мы можем увидеть демонстрацию .
Очень хорошая статья - очень полезный метод, описанный JQuery, и вполне практический пример. Все понятно и приятно, я жду следующего художников