Intereting Posts
Просмотр фрагмента в ViewPager не восстанавливается при возобновлении Получение ошибки разрешения при импорте проекта в студию android, Не удается загрузить класс 'org.codehaus.groovy.runtime.typehandling.ShortTypeHandling' Фрагмент, не получающий обратные вызовы меню Записать на экран Android Wear Внедрение рекомендаций по дизайну Google для слайдеров Как я могу отклонить навигационный ящик, чтобы использовать кнопку Back-home-icon? Как добавить динамический переключатель в соответствии с заданным количеством отсчетов? Android SeekBar не может быть полной шириной, даже если установить дополнение 0 в AppCompat 23.1.0 Android Studio Git .gitignore vs Project> Настройки> Управление версиями> Игнорируемые файлы Как технология push-уведомлений работает на Android? Как нарисовать круг с прозрачной средой Биллинг в приложении – запрашиваемый элемент не доступен для покупки Что называется этой синей тенью? Загрузка двоичного файла с помощью okhttp из ресурсов Android заставляет приложения Кордовы перезагружаться при использовании плагинов Кордовы и Capture

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/

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

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

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

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

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

Solutions Collecting From Web of "Multi Выберите <select> на мобильных устройствах"

Такое поведение в мобильных браузерах по дизайну улучшает работу пользователей. Согласно Руководству по веб-контенту 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 позволяет задействовать весь элемент для выбора / отмены выбора , Либо можно улучшить с помощью мобильных конкретных стилей, чтобы увеличить размер критических элементов, я полагаю.