Как создать собственный аккордеон jQuery

Аккордеоны могут быть очень полезны для отображения множества различных разделов данных на небольшом пространстве. jQuery UI имеет встроенную функцию Accordion , но в соответствии с jQuery UI Build your Download размер сценариев Core jQuery UI и Accordion составляет 25 КБ и 16,6 КБ соответственно. Сегодня я покажу вам, как создать собственный аккордеон, который будет более «эффективным по пропускной способности».

Загрузите вложение с боковой панели, чтобы посмотреть.

Это похоже на многое для одного простого аккордеона. Особенно, когда вы добавляете в обычный скрипт jQuery, который сокращен до 18 Кбайт и Gzipped. Так что вместо увеличения времени загрузки страницы с дополнительными ненужными функциями, почему бы не создать что-то с нуля?

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

Таким образом, план этого урока — показать создание аккордеона с помощью функции пользовательского интерфейса jQuery, а затем создать его с помощью некоторого пользовательского кода. Давайте использовать боковую панель блога в качестве примера.

Разметка

Разметка очень проста, просто элемент списка для каждого раздела в аккордеоне:

CSS

Мы собираемся добавить некоторые базовые стили, чтобы аккордеон выглядел более презентабельно. Поскольку этот учебник в основном посвящен JavaScript, я собираюсь быстро познакомиться с тем, что мы делаем с CSS.

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

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

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

Далее я собираюсь стилизовать основную ссылку, которая будет переключать аккордеон, чтобы они выделялись больше:

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

Давайте посмотрим, где мы находимся до сих пор. Так же будет выглядеть аккордеон, когда мы используем JQuery UI Accordion и JavaScript отключен.

Похоже, нам нужно будет добавить несколько дополнительных CSS для IE6, чтобы учесть ошибку пробелов :

JQuery UI Аккордеон

Теперь, когда у нас есть вся разметка и стилизация, реализовать аккордеон JQuery UI очень просто. Во-первых, нам просто нужно включить jQuery и наш скрипт jQuery UI .

Затем нам нужно инициализировать аккордеон в нашем неупорядоченном списке с идентификатором аккордеона:

  <script type = "text / javascript">
	 $ (документ) .ready (function () {
		 $ ( '# Аккордеона') аккордеон ().
	 });
 </ Скрипт> 

И вот, у вас есть рабочий гармошка.

Чтобы сделать текущий открытый аккордеонный элемент более заметным, я добавил немного дополнительного CSS:

Имя класса ui-accordion-selected автоматически добавляется в текущий раздел аккордеона.

Наш Аккордеон JQuery

Теперь, когда мы сделали аккордеон jQuery UI, пришло время создать наш собственный. Одна вещь, которая мне не обязательно нравится в версии jQuery UI, это то, как она отображается, когда JavaScript отключен. Я бы предпочел, чтобы только один раздел был открыт одновременно.

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

Идея заключается в том, что мы собираемся передать переменную в URL, и если переменная совпадает с каждым разделом, мы назначаем класс текущего для этого раздела. Гораздо проще увидеть это в коде, поэтому посмотрите:

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

Нам также нужно удалить JQuery UI-скрипт и добавить наш собственный:

Дополнительный CSS

С этим небольшим изменением в разметке нам нужно добавить немного дополнительного CSS. У нас больше нет класса ui-accordion-selected , назначаемого элементам списка; сейчас это класс тока . Мы также должны учитывать это изменение имени класса во включенном состоянии для аккордеона:

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

Пользовательский JavaScript

Сначала мы хотим выполнить скрипт после загрузки документа, поэтому мы начнем с этого:

  $ (документ) .ready (function () {

 }); 

Мы хотим, чтобы аккордеон функционировал при щелчке по ссылкам заголовков, но мы не хотим покидать страницу, поэтому нам нужно убедиться и вернуть false :

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () { 
		  вернуть ложь; 
	  });
 }); 

Далее, мне не нравится схема, которая появляется вокруг ссылок, когда они нажимаются, поэтому я установил для нее значение none:

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () {
		 $ (это) .css ( 'план', 'ни');
		 вернуть ложь;
	 });
 }); 

Есть два разных случая для этого сценария.

1. Нажатая ссылка — это уже открытый раздел.
2. Ссылка, по которой щелкают, не является тем разделом, который уже открыт.

Первый случай

Это не та функциональность, которая есть в версии jQuery UI, но я думаю, что пользователь должен иметь возможность закрыть все разделы, если он этого захочет. Если по нажатой ссылке есть родительский класс, у которого есть класс current, мы хотим сдвинуть вверх неупорядоченный список и удалить класс current.

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () {
		 $ (Это) .css ( 'план', 'ни');
		 if ($ (this) .parent (). hasClass ('current')) { 
			  $ (this) .siblings ('ul'). slideUp ('slow', function () { 
				  $ (это) .parent () removeClass ( 'ток'). 
			  }); 
		  }
		 вернуть ложь;
	 });
 }); 

Еще одна вещь, которая меня беспокоит в версии jQuery UI, это то, что вы можете прокрутить аккордеон, чтобы он был почти не виден, щелкните по нему, и тогда взаимодействие произойдет выше того, что вы видите. Прокрутите вниз пример JQuery UI и попробуйте.

Поэтому я решил использовать этот замечательный маленький скрипт под названием jQuery ScrollTo . Это очень маленький скрипт, который добавляет плавную прокрутку страницы.

Давайте добавим это к заголовку документа перед нашим аккордеонным скриптом:

Когда секция прокручивается вверх, я хочу прокрутить окно до верхней части аккордеона:

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () {
		 $ (Это) .css ( 'план', 'ни');
		 if ($ (this) .parent (). hasClass ('current')) {
			 $ (this) .siblings ('ul'). slideUp ('slow', function () {
				 $ (Это) .parent () removeClass ( 'ток').
				 $ .scrollTo ( '# гармошка', 1000);
			 });
		 }
		 вернуть ложь;
	 });
 }); 

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

Второй случай

Этот случай возникает, когда раздел, который щелкает, в данный момент не открыт. Поэтому первое, что мы хотим сделать, это скрыть открытый в данный момент раздел и удалить класс current (этот фрагмент кода очень похож на первый случай):

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () {
		 $ (Это) .css ( 'план', 'ни');
		 if ($ (this) .parent (). hasClass ('current')) {
			 $ (this) .siblings ('ul'). slideUp ('slow', function () {
				 $ (Это) .parent () removeClass ( 'ток').
				 $ .ScrollTo ( '# гармошка', 1000);
			 });
		 } еще {
			 $ ('ul # accordion li.current ul'). slideUp ('slow', function () { 
				  $ (это) .parent () removeClass ( 'ток'). 
			  });
		 }
		 вернуть ложь;
	 });
 }); 

Далее мы хотим открыть раздел, на который мы нажали, и добавить класс current:

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () {
		 $ (Это) .css ( 'план', 'ни');
		 if ($ (this) .parent (). hasClass ('current')) {
			 $ (this) .siblings ('ul'). slideUp ('slow', function () {
				 $ (Это) .parent () removeClass ( 'ток').
				 $ .ScrollTo ( '# гармошка', 1000);
			 });
		 } еще {
			 $ ('ul # accordion li.current ul'). slideUp ('slow', function () {
				 $ (Это) .parent () removeClass ( 'ток').
			 });
			 $ (this) .siblings ('ul'). slideToggle ('slow', function () { 
				  $ (это) .parent () toggleClass ( 'ток'). 
			  });
		 }
		 вернуть ложь;
	 });
 }); 

Наконец, давайте прокрутим окно к вершине аккордеона, как мы это делали в первом случае:

  $ (документ) .ready (function () {
	 $ ('ul # accordion a.heading'). click (function () {
		 $ (Это) .css ( 'план', 'ни');
		 if ($ (this) .parent (). hasClass ('current')) {
			 $ (this) .siblings ('ul'). slideUp ('slow', function () {
				 $ (Это) .parent () removeClass ( 'ток').
				 $ .ScrollTo ( '# гармошка', 1000);
			 });
		 } еще {
			 $ ('ul # accordion li.current ul'). slideUp ('slow', function () {
				 $ (Это) .parent () removeClass ( 'ток').
			 });
			 $ (this) .siblings ('ul'). slideToggle ('slow', function () {
				 $ (Это) .parent () toggleClass ( 'ток').
			 });
			 $ .scrollTo ( '# гармошка', 1000);
		 }
		 вернуть ложь;
	 });
 }); 

Вот и все. Шутки в сторону. Вы думали, что создание аккордеона может быть таким простым?

Вывод

Теперь давайте сравним размеры файлов JavaScript с помощью вкладки «Сеть» в Firebug .

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

Теперь выйдите и напишите свой собственный jQuery.