Модуль select box

Здравствуйте, уважаемые коллеги. Пожалуйста, подскажите. Необходим модуль типа табов для вывода разных модулей во вкладке, но в виде низпадающего списка select box. При выборе опредленного пункта, ниже появляется модуль, привязанный через настройки к этому пункту.

Записан

sivers

Живу я здесь
2626
363 / 0

Re: Модуль select box

« Ответ #1 : 31.03.2019, 22:37:22 »

Как вариант - сделать обычные табы (любые - можно бутстрапные или какие удобней), разместить селект, в опшнах в качестве value прописать селекторы закладок (по которым кликают) и добавить скрипт вроде такого:

Код

jQuery(function(){
   jQuery('#ИдВашегоСелекта').bind('change', function(){
      jQuery(this.value).trigger('click');
   });
});

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

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

Technic

Захожу иногда
194
7 / 0

Re: Модуль select box

« Ответ #2 : 31.03.2019, 22:46:42 »

Аккордеон не вариант? Он же спойлер

Записан

Fanatnn

Новичок
3
0 / 0

Re: Модуль select box

« Ответ #3 : 01.04.2019, 23:20:05 »

Цитата: sivers от 31.03.2019, 22:37:22

Как вариант - сделать обычные табы (любые - можно бутстрапные или какие удобней), разместить селект, в опшнах в качестве value прописать селекторы закладок (по которым кликают) и добавить скрипт вроде такого:
Код
jQuery(function(){
   jQuery('#ИдВашегоСелекта').bind('change', function(){
      jQuery(this.value).trigger('click');
   });
});
Сами эти закладки (по которым кликают) можно скрыть стилями, если требуется переключение только селектом. В итоге выбор в селекте будет вызывать эмуляцию клика по закладке.

Спасибо за Ваш ответ. Скажите пожалуйста, как мне привязать к табам строку jQuery(this.value).trigger('click');. Вкладки прописаны через <li>. Спасибо

Записан

sivers

Живу я здесь
2626
363 / 0

Re: Модуль select box

« Ответ #4 : 02.04.2019, 09:15:27 »

Цитата: Fanatnn от 01.04.2019, 23:20:05

Скажите пожалуйста, как мне привязать к табам строку jQuery(this.value).trigger('click');. Вкладки прописаны через <li>.

Точнее всего смогу сказать, если покажете ссылку на страницу с табами. Но общий принцип я уже описал: смотрите какой атрибут id у ваших табов (если нет ИД, то сойдет селектор по классам) и вставляете этот ИД с решеткой (т.е. селектор на таб) в качестве value ваших option в селекте.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

Fanatnn

Новичок
3
0 / 0

Re: Модуль select box

« Ответ #5 : 02.04.2019, 21:43:11 »

Цитата: sivers от 02.04.2019, 09:15:27

Точнее всего смогу сказать, если покажете ссылку на страницу с табами. Но общий принцип я уже описал: смотрите какой атрибут id у ваших табов (если нет ИД, то сойдет селектор по классам) и вставляете этот ИД с решеткой (т.е. селектор на таб) в качестве value ваших option в селекте.

Спасибо за Ваш ответ

Код

	    		
<ol class="gkTabsNav">    	
<li id="gkTab gkTabs-1 active" class="gkTab gkTabs-1 active" data-animation="default">Вкладка 1</li>
<li id="gkTab gkTabs-2" class="gkTab gkTabs-2" data-animation="default">Вкладка 2</li>
<li id="gkTab gkTabs-3" class="gkTab gkTabs-3" data-animation="default">Вкладка 3</li>
<li id="gkTab gkTabs-4" class="gkTab gkTabs-4" data-animation="default">Вкладка 4</li>
 </ol>
                <select id="new" name="new">
                    <option value="gkTab gkTabs-1">Вкладка 1</option>
                    <option value="gkTab gkTabs-2">Вкладка 2</option>
                    <option value="gkTab gkTabs-3">Вкладка 3</option>
                    <option value="gkTab gkTabs-4">Вкладка 4</option>
                </select>

Записан

sivers

Живу я здесь
2626
363 / 0

Re: Модуль select box

« Ответ #6 : 02.04.2019, 22:13:20 »

id не должен содержать пробелы. Поправьте, чтоб был такой вид:

Код

<li id="gkTabs2" class="gkTab gkTabs-2" data-animation="default">Вкладка 2</li>

а в option надо указывать правильный селектор, раз по ИД, значит с решеткой:

Код

<option value="#gkTabs2">Вкладка 2</option>

обработчик можно либо интегрировать как отдельный фрагмент (я уже его приводил), либо встроить непосредственно в селект:

Код

<select id="new" name="new" onchange="jQuery(this.value).trigger('click');">

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

Плагин/модуль для встраивания видео с Дзена или ВК Автор KingSnake	Ответов: 0 Просмотров: 9139	03.12.2024, 15:32:02 от KingSnake
Модуль голосования Автор Grandrom	Ответов: 0 Просмотров: 7160	21.11.2024, 10:45:04 от Grandrom
[Решено] j5.2 + PHP модуль Автор x1	Ответов: 0 Просмотров: 6891	05.09.2024, 10:26:19 от x1
Модуль "Скачать фаил" Автор Alex_iPod	Ответов: 6 Просмотров: 7450	07.06.2024, 14:09:11 от Alex_iPod
Модуль отображения сообщений группы телеграмм на сайте Автор kunsaid	Ответов: 2 Просмотров: 7177	08.02.2024, 13:13:27 от kunsaid

Модуль select box - Поиск компонентов, модулей, плагинов

Новости Joomla

Вышли релизы безопасности Joomla 6.1.3 и Joomla 5.4.8

👩‍💻 WT Otpravkapochtaru - библиотека сервиса Отправка Почты России для Joomla-разработчиков.

👩‍💻 В Joomla 6.2 появятся встроенный функционал мультикатегорий.

Fanatnn

Модуль select box

sivers

Re: Модуль select box

Technic

Re: Модуль select box

Fanatnn

Re: Модуль select box

sivers

Re: Модуль select box

Fanatnn

Re: Модуль select box

sivers

Re: Модуль select box

Похожие темы