Кнопка для открытия списка в select

для стандартного меню в ICMS2

 
Посетитель
small user social cms
Медаль
Сообщений: 180
Здравствуйте!

Для одного проекта в Главном меню в шаблоне default в ICMS2 требуется оставить сам список select (его options), а поле заменить на кнопку открытия меню (т.е. само поле скрыть от показа).

Разместил внутри nav второй div, в котором имеется div-кнопка. Поменял z-index слоев с кнопкой и select для адаптивной версии и теперь div с кнопкой внутри полностью закрывает поле select, как и задумано.

Вопрос, к вам, господа: я не силен в Java Script, а требуется обработчик раскрывающий список поля select Главного меню при клике на div-кнопку.

Помогите пожалуйста с кодом.
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1930
http://htmler.ru/2015/07/31/kak-raskryit-select-javascript-vneshney-knopkoy-menyu-dlya-mobilnyih-ekranov/

или в гугле поищите, быстрее будет
Реклама
cms
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1981
Это можно сделать не с помошью z-индекса, а присвоив диву display: none. Если нужно показать этот элемент, просто пишите $('id_элемента').show(); Снова скрыть $('id_элемента').hide();
NOP
Посетитель
small user social cms
Медаль
Сообщений: 180
Странник:

Это можно сделать не с помошью z-индекса, а присвоив диву display: none. Если нужно показать этот элемент, просто пишите $('id_элемента').show(); Снова скрыть $('id_элемента').hide();

Так мне то не нужно отключать показ элементов. Мне нужно, чтобы select размещался позади блока с кнопкой и само поле не было видно в итоге, а его разворачивающийся список открывался бы под блоком скнопкой (т.е. из-под него внизу вылезал при открытии). Так вот задача как раз и стоит - симитировать нажатием на кнопку раскрытие списка поля select. Если я отключу показ select, то я никогда не открою его список, а мне он нужен.
Посетитель
small user social cms
Медаль
Сообщений: 180
Дмитрий Кайдаш:
Дмитрий, я как раз сперва искал в гугле решение этой проблемы и как раз начал именно с той страницы на которую вы дали ссылку, но это не сработало. Я к тому же пытался для начала просто воссоздать код из этого урока (прилагаю файл). Может быть я чего напартачил (я же фантик в Java Script), но даже приведенный в уроке код у меня не работает.
Прикрепленные файлы:
select_78es0.rar | 0.5 Кб | Скачали: 208
Посетитель
no avatar
Сообщений: 62
Alexey Zagrebelniy:
Так мне то не нужно отключать показ элементов
Имеется ввиду, что для реализации Вашей затеи средствами JS, нужно сначала прятать список селекта при помощи $('id_блока_списка').hide() и показывать кнопку при помощи $('id_блока_кнопки').show() + сделать функцию которая при событии нажатия на блок кнопки будет менять состояния вышеописанных элементов на соответственно $('id_блока_списка').show() и $('id_блока_кнопки').hide(). Учитывая что в текущей версии ICMS списков используется chosen, который подменяет стандартный select собственными блоками div, раскрывать по клику надо его блок со списком.
Согласно документации к chosen это делается это посредством $('.my_select_box').trigger('chosen:updated'), а значит выглядеть будет примерно так:
Код PHP:
  1.  
  2. $("#id_кнопки").click(function(){
  3. $('.класс_списка').trigger('chosen:open');
  4. });
  5.  
Если хочется прямо по ссылке выше, то будет выглядеть примерно так:
Код PHP:
  1.  
  2. $(document).ready(function() {
  3.  
  4. $("#id_кнопки").click(function(){
  5. showDropdown($('#id_списка'));
  6. });
  7.  
  8. showDropdown = function (element) {
  9. var event;
  10. event = document.createEvent('MouseEvents');
  11. event.initMouseEvent('mousedown', true, true, window);
  12. element.dispatchEvent(event);
  13. };
  14. }
  15.  
За приличность этого кода не ручаюсь :)
Редактировалось: 4 раз (Последний: 4 июля 2016 в 21:35)
Посетитель
small user social cms
Медаль
Сообщений: 180
Поясню подробнее что мне нужно:

Имеется вот такое меню в компьютерной версии сайта на ICMS2:
Кнопка для открытия списка в select

Внутри порядочно подпунктов.
Для мобильных устройств оно выключается от показа и включается показ его дубликата, реализованного через поле со списком select в файле /templates/default/js/core.js
Кнопка для открытия списка в select

Я специально в CSS указал для этого поля высоту во всю строку меню, чтобы пункты select отображались сразу под меню вот так:
Кнопка для открытия списка в select

И все бы ничего, да только само поле select некрасиво мозолит глаз (именно оно, а не его список, который меня устраивает полностью). Потому, чтобы прикрыть его - добавил контейнер с контейнером-кнопкой внутри и сделал ему z-index на 1 больше, чем у nav с select. Получилось так:
Кнопка для открытия списка в select

Полю select я прописал класс .select, кнопке я прописал класс .mbtn. Задача: сочинить Java Script, который при клике на кнопку развернет у расположенного слоем ниже select его список, имитируя клик по полю select. Список развернется под строкой меню, вот так:
Кнопка для открытия списка в select

При этом кнопка остается и при повторном клике на нее - список должен закрыться.
Посетитель
small user social cms
Медаль
Сообщений: 180
Iceman:

Код PHP:
  1.  
  2. $("#id_кнопки").click(function(){
  3. $('.класс_списка').trigger('chosen:open');
  4. });
  5.  
Вставил в main.tpl.php сразу после контейнеров с менюшками и кнопкой
Код PHP:
  1.  
  2. <script type="text/javascript">
  3. $(".mbtn").click(function(){
  4. $('.select').trigger('chosen:open');
  5. });
  6. </script>
  7.  
Никакой реакции со стороны select с классом .select на клик по div с классом .mbtn.
Посетитель
small user social cms
Медаль
Сообщений: 180
Iceman:

Если хочется прямо по ссылке выше, то будет выглядеть примерно так:
Код PHP:
  1.  
  2. $(document).ready(function() {
  3.  
  4. $("#id_кнопки").click(function(){
  5. showDropdown($('#id_списка'));
  6. });
  7.  
  8. showDropdown = function (element) {
  9. var event;
  10. event = document.createEvent('MouseEvents');
  11. event.initMouseEvent('mousedown', true, true, window);
  12. element.dispatchEvent(event);
  13. };
  14. }
  15.  
За приличность этого кода не ручаюсь :)
Написал вот так:
Код PHP:
  1.  
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Как раскрыть SELECT Javascript внешней кнопкой (меню для мобильных экранов)</title>
  6. </head>
  7. <body>
  8. <span class="select_show">Menu</span>
  9. <select class="select">
  10. <option val=1>Page1
  11. <option val=2>Page2
  12. <option val=3>Page3
  13. </select>
  14. <script type="text/javascript">
  15. $(document).ready(function() {
  16.  
  17. $('.select_show').click(function(){
  18. showDropdown($('.select'));
  19. });
  20.  
  21. showDropdown = function (element) {
  22. var event;
  23. event = document.createEvent('MouseEvents');
  24. event.initMouseEvent('mousedown', true, true, window);
  25. element.dispatchEvent(event);
  26. };
  27. });
  28. </script>
  29. </body>
  30. </html>
  31.  
Не работает.
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Не работает.
Ещё бы работало. smile
Так надо?
http://codepen.io/Ureech/pen/bZRYJY
Или покрасивее smile
http://codepen.io/Ureech/pen/LkLOAw
Редактировалось: 2 раз (Последний: 5 июля 2016 в 03:22)
Посетитель
small user social cms
Медаль
Сообщений: 180
Lora:

Не работает.
Ещё бы работало. smile
Так надо?
http://codepen.io/Ureech/pen/bZRYJY
Или покрасивее smile
http://codepen.io/Ureech/pen/LkLOAw

О как! Круто! И идеи отличнейшие!
Lora, спасибо вам огромное! Направили в нужное русло.
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1164
Может пригодится:
http://jsfiddle.net/oscarj24/GR9jU/
http://jsfiddle.net/vWx2H/233/
http://jsfiddle.net/g3Ta3/4/
Посетитель
small user social cms
Медаль
Сообщений: 180
Спасибо огромное!
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.