Multi Выберите <select> на мобильных устройствах

У меня есть интерфейс, который использует множественные списки выбора с высотой набора css для заполнения других списков.

В основном:

<select multiple="multiple" size="5" style="height:150px;"> <option value='1'>one</option> <option value='2'>two</option> <option value='3'>three</option> <option value='4'>four</option> </select> <select multiple="multiple" style="height:150px;"></select> 

Используя jQuery, в основном вы выбираете некоторые вещи в первом, и он перемещает их во второй.

Это отлично работает, и наши пользователи любят это в немобильных средах. НО, на Android-планшетах, телефонах, iphones и ipads, списки выглядят пустыми, пока вы не нажмете, и в нем отображается встроенный интерфейс выбора прокрутки. Таким образом, вы не можете видеть новые, когда они добавляются ко второму списку.

Этот очень простой jsFiddle показывает, о чем я говорю, когда поля выбора не отображают их содержимое:

http://jsfiddle.net/VhXwA/2/

Есть ли способ переопределить это поведение без необходимости делать свою собственную вещь или использовать совершенно другой способ сделать это для мобильных устройств?

Если нет способа сделать это, что было бы лучшим способом реализовать что-то подобное, мобильное?

Редактировать:

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

Редактировать: Я не могу себе представить, что я единственный, кто сталкивался с этим! Должен быть способ заставить мобильные браузеры вести себя правильно.

Такое поведение в мобильных браузерах по дизайну улучшает работу пользователей. Согласно Руководству по веб-контенту Safari

Использование элемента выбора. Если вы используете элемент HTML для выбора на своей веб-странице, iOS отображает пользовательский элемент управления, который оптимизирован для выбора элементов в списке с помощью пальца в качестве устройства ввода. На iOS пользователь может щелкнуть, чтобы прокрутить список и нажать, чтобы выбрать элемент из списка.

Это сказано:

  • Я бы рекомендовал не бороться с ним, но использовать его ради мобильных пользователей
  • Использовать медиа-запросы для применения разных css для ваших элементов select для настольных и мобильных браузеров;
  • Если количество отображаемых параметров достаточно мало, рассмотрите возможность использования <input type="checkbox">

    Вместо того, чтобы select потому что это поведение согласовано между браузерами.

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

Я не понимаю, почему вы не можете просто использовать раскрывающийся список флажков. Они совместимы почти везде и конечно на всех смартфонах.

 <select name="Dropdown1"> <option value="o1">Option 1</option> <option value="o2">Option 2</option> <option value="o3">Option 3</option> <option value="o4">Option 4</option> </select> 

Или

 <input type="checkbox" name="checkbox" value="o1">Option 1<br> <input type="checkbox" name="checkbox" value="o2">Option 2 

( http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2 и http://www.w3schools.com/html/html_forms.asp )

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

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

Eric Hynds Jquery UI multiselect: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

Quasi Partikels сортируемый многопользовательский виджет с возможностью поиска: http://quasipartikel.at/multiselect/

Оба они кажутся немного затруднительными на устройстве размера телефона, но особенно в версии Quasi Partikel, которая использует небольшой «+» слева от элемента, чтобы добавить его, в то время как Eric Hynds позволяет задействовать весь элемент для выбора / отмены выбора , Либо можно улучшить с помощью мобильных конкретных стилей, чтобы увеличить размер критических элементов, я полагаю.

Intereting Posts
Поддержка ACS ACR122 SDK Android Peer-to-Peer? Как обеспечить различные виджеты Android для 1.6 и 3.0+? Android-предупреждающий баннер не отображается на некоторых устройствах Фрагменты как статические классы Как createBitmap (int width, int height, Bitmap.Config config) заполняет битмап? Как я могу нарисовать вертикальную линию в Activity при нажатии кнопки? Как удалить взломанную оценку из списка лидеров Google Play Game Services? Поиск полосы, изменение цвета пути с желтого на белый Android BottomSheet как рухнуть при нажатии на внешнюю сторону? Индивидуальный межстрочный интервал для каждой линии Android GPS не работает до перезагрузки на новых телефонах В чем разница между открытием приложения на экране приложений и недавно используемым списком приложений? (андроид Android 2.2 – образец 0 SoundPool не ГОТОВ Как добавить изображение в панель инструментов OnClickListener ребенка, предотвращающий использование Android ViewPager