Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 04.05.2015, 15:05   #1
byte916
Пользователь
 
Регистрация: 04.03.2008
Сообщений: 75
По умолчанию Вопрос про <select>

Добрый день.

Возникла необходимость создать свой кастомный селект, чтобы в выпадающем списке было полное наименование а в самом селекте показывалась аббревиатура выбранного пункта. Собственно, при помощи бутстрапа это было реализовано, но возникла некоторая проблема.
На мобильных устройствах при нажатии на настоящий селект открывается "карусель". Но при нажатии на бутстраповский селект открывается выпадающий список, как на компьютере, и это не очень удобно.
Я пробовал создать скрытый селект, вынесенный за пределы экрана, с абсолютным позиционированием, и программно кликать на него, но как оказалось, программно открыть селект невозможно (по крайней мере всё нагугленное утверждает именно так).
Собственно вопрос - как можно сымитировать "карусельку" на мобильных устройствах?
byte916 вне форума Ответить с цитированием
Старый 05.05.2015, 04:09   #2
byte916
Пользователь
 
Регистрация: 04.03.2008
Сообщений: 75
По умолчанию

Сам задал вопрос, сам ответил) Самостоятельный человек)

В общем, много гугления, думания, и таки написал я скриптик, решающий мою проблему
Данный скрипт всем селектам с классом select-extender добавляет возможность в самом селекте отображать значение из поля value, а в выпадающем списке будут показаны значения из самих option. Решение сделано для мобильных устройств, чтобы показывать карусель. На настольных устройствах лучше этот элемент скрывать и показывать кастомный.
Код:
    $('select.select-extender').each(function (i, elem) {
        $(elem).on('change', function () {
            var value = $(elem.options[elem.selectedIndex]).attr('value');
            $("<option disabled class='extender" + i + "' value='" + value + "'>" + value + "</option>").appendTo(elem);
            $(elem).val(value);
            $('.extender' + i).prop('selected', true);
        });
        $(elem).on('mousedown', function () {
            var value = $('.extender' + i).text();
            $('.extender' + i).remove();
            $(elem).children("[value=" + value + "]").prop('selected', true);
        });
        $(elem).on('blur', function () {
            $(elem).change();
        });
        $(elem).change();
    });
Посмотреть как работает можно тут

Последний раз редактировалось byte916; 05.05.2015 в 04:18.
byte916 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JSP + HQL: как в блоке <select></select> вызвать метод из DAO? Blondy Java для Web (EE, Servlet, JSP, Tomcat, Spring MVC) 4 01.06.2013 15:54
Вопрос про Свойство Visible и про иконки в imagelist Kappi4 Компоненты Delphi 2 21.05.2010 13:10
Вопрос по Select Case DENGA-RU Microsoft Office Excel 2 23.04.2009 21:03
Вопрос наверное про функции, а так точно даже не знаю про что. (Вопрос начинющего #6) Albert2008 Общие вопросы Delphi 4 21.08.2008 15:33
У меня вопрос про базы данных,а точнее про таблицы!!! Alexij Общие вопросы Delphi 1 13.04.2008 23:24