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

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

#1 4 июля 2016 в 06:56

Здравствуйте!

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

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

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

Помогите пожалуйста с кодом.

#2 4 июля 2016 в 09:01

htmler.ru/2015/07/31/kak-raskryit-select-javascript-vneshney-knopkoy-menyu-dlya-mobilnyih-ekranov/

или в гугле поищите, быстрее будет

t.me/googleindexingapi

#3 4 июля 2016 в 13:50

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

NOP

Сегодня в 14:04

#4 4 июля 2016 в 19:55

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

Странник

Так мне то не нужно отключать показ элементов. Мне нужно, чтобы select размещался позади блока с кнопкой и само поле не было видно в итоге, а его разворачивающийся список открывался бы под блоком скнопкой (т.е. из-под него внизу вылезал при открытии). Так вот задача как раз и стоит — симитировать нажатием на кнопку раскрытие списка поля select. Если я отключу показ select, то я никогда не открою его список, а мне он нужен.

#5 4 июля 2016 в 20:15

htmler.ru/2015/07/31/kak-raskryit-select-javascript-vneshney-knopkoy-menyu-dlya-mobilnyih-ekranov/

или в гугле поищите, быстрее будет

Дмитрий Кайдаш

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

Прикрепленный файл

select_78es0.rar 1 Кб

#6 4 июля 2016 в 20:38

Так мне то не нужно отключать показ элементов
Alexey Zagrebelniy

Имеется ввиду, что для реализации Вашей затеи средствами JS, нужно сначала прятать список селекта при помощи $('id_блока_списка').hide() и показывать кнопку при помощи $('id_блока_кнопки').show() + сделать функцию которая при событии нажатия на блок кнопки будет менять состояния вышеописанных элементов на соответственно $('id_блока_списка').show() и $('id_блока_кнопки').hide(). Учитывая что в текущей версии ICMS списков используется chosen, который подменяет стандартный select собственными блоками div, раскрывать по клику надо его блок со списком.
Согласно документации к chosen это делается это посредством $('.my_select_box').trigger('chosen:updated'), а значит выглядеть будет примерно так:

 
$("#id_кнопки").click(function(){
	$('.класс_списка').trigger('chosen:open');
});

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

 
$(document).ready(function() {
 
	$("#id_кнопки").click(function(){
		showDropdown($('#id_списка'));
	});
 
	showDropdown = function (element) {
		var event;
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('mousedown', true, true, window);
		element.dispatchEvent(event);
	};
}

За приличность этого кода не ручаюсь :)

#7 5 июля 2016 в 00:02

Поясню подробнее что мне нужно:

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

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

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

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

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

При этом кнопка остается и при повторном клике на нее — список должен закрыться.

#8 5 июля 2016 в 00:11

 
$("#id_кнопки").click(function(){
	$('.класс_списка').trigger('chosen:open');
});

Вставил в main.tpl.php сразу после контейнеров с менюшками и кнопкой

 
<script type="text/javascript">
$(".mbtn").click(function(){
	$('.select').trigger('chosen:open');
});
</script>

Никакой реакции со стороны select с классом .select на клик по div с классом .mbtn.

#9 5 июля 2016 в 00:20

Если хочется прямо по ссылке выше, то будет выглядеть примерно так:
 
$(document).ready(function() {
 
	$("#id_кнопки").click(function(){
		showDropdown($('#id_списка'));
	});
 
	showDropdown = function (element) {
		var event;
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('mousedown', true, true, window);
		element.dispatchEvent(event);
	};
}
 
За приличность этого кода не ручаюсь :)

Iceman

Написал вот так:

 
<html>
<head>
<meta charset="UTF-8">
<title>Как раскрыть SELECT Javascript внешней кнопкой (меню для мобильных экранов)</title>
</head>
<body>
<span class="select_show">Menu</span>
<select class="select">
<option val=1>Page1
<option val=2>Page2
<option val=3>Page3
</select>
<script type="text/javascript">
$(document).ready(function() {
 
	$('.select_show').click(function(){
		showDropdown($('.select'));
	});
 
	showDropdown = function (element) {
		var event;
		event = document.createEvent('MouseEvents');
		event.initMouseEvent('mousedown', true, true, window);
		element.dispatchEvent(event);
	};
	});
</script>
</body>
</html>

Не работает.

#10 5 июля 2016 в 00:46

Не работает.

Ещё бы работало. smile

Так надо?
codepen.io/Ureech/pen/bZRYJY
Или покрасивее smile

codepen.io/Ureech/pen/LkLOAw

#11 5 июля 2016 в 04:09

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

Lora

О как! Круто! И идеи отличнейшие!
Lora, спасибо вам огромное! Направили в нужное русло.

#12 5 июля 2016 в 08:44

Может пригодится:
http://jsfiddle.net/oscarj24/GR9jU/
http://jsfiddle.net/vWx2H/233/
http://jsfiddle.net/g3Ta3/4/

#13 6 июля 2016 в 05:19

Может пригодится:
http://jsfiddle.net/oscarj24/GR9jU/
http://jsfiddle.net/vWx2H/233/
http://jsfiddle.net/g3Ta3/4/

Val

Спасибо огромное!

#14 10 декабря 2023 в 16:55

Может пригодится:
http://jsfiddle.net/oscarj24/GR9jU/
http://jsfiddle.net/vWx2H/233/
http://jsfiddle.net/g3Ta3/4/
Val

как сделать чтобы еще работало на Android ?

требуется сделать кнопку для сортировки на мобильных, на iOS открывается встроенный селект, на Android не реагирует не один из предложенных вариантов (