Мне нужно отключить jQuery Mobile для стилей <select>. В конечном итоге мне понравилось бы устройство (iPhone, Android, Blackberry и т.д.), Чтобы определить, как выглядит <select>.
В настоящее время моя разметка (количество опций уменьшено для целей показа):
<div data-role="fieldcontain">
<label for="state">State:</label>
<select name="state" id="state" data-role="none">
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN" selected="selected">Minnesota</option>
<option value="MS">Mississippi</option>
</select>
</div>
Я попытался использовать data-role="none" в <select>, но ничего не изменилось.
Есть ли способ отключить jQuery Mobile только для выпадающего списка?
согласно http://jquerymobile.com/test/docs/forms/docs-forms.html
Если вы предпочитаете, чтобы конкретный элемент управления формы оставался нетронутым jQuery Mobile, просто дайте этому элементу атрибут data-role = "none". Например:
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
Начиная с версии 1.1, правильный способ сделать это: data-enhance="false"
Вам также потребуется добавить эту строку в конфигурацию:
$.mobile.ignoreContentEnabled = true;
http://jquerymobile.com/test/docs/forms/forms-all-native.html
Внутри mobileinit, установите селектор jQM, чтобы вести себя как ожидалось:
$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';
Хотя этот вопрос уже рассмотрен, я хотел бы добавить еще несколько строк, так как ответ не работал "из коробки" для меня, и это может сэкономить время для других.
В моем случае я отключу собственные выпадающие списки для приложения для смартфонов, когда он запускается в Android (поскольку у него есть некоторые уродливые проблемы при открытии раскрывающихся списков, которые уже сообщаются в другом потоке). "Волшебное заклинание", которое разрешило мне эту проблему, - это всего лишь следующие строки:
$(document).bind('mobileinit',function(){
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
$("select").attr("data-native-menu","true");
} else {
$("select").attr("data-native-menu","false");
$.mobile.selectmenu.prototype.options.nativeMenu = false;
}
});
Эти строки находятся в настройке script, загруженной сразу после jQuery и непосредственно перед jQuery-Mobile. Важно сохранить порядок, иначе элементы управления уже инициализируются и не имеют никакого эффекта!
Я надеюсь, что этот совет может сэкономить некоторое время кому-то!
Да, вам нужно войти в файл CSS, который управляет стилем выпадающего меню JQuery Mobile UI и удалить любой стиль, который вы не хотите отображать.
Они все еще работают над этим, работают в последнем коде git, но я бы не рекомендовал его: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350
Использование этого свойства должно помочь
$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...
просто попробуйте data-native-menu="true"
из документа: Добавляя атрибут data-native-menu = "true" к выбору, среда будет использовать меню выбора на основе браузера при нажатии кнопки выбора. Поскольку этот параметр не использует какой-либо пользовательский синтаксический анализ меню и логику генерации меню, он значительно быстрее, чем пользовательская версия меню. Пользовательские меню выбора добавляют возможность выбора темы и обеспечивают визуальную согласованность между платформами. Кроме того, она исправляет некоторые недостающие функциональные возможности на определенных платформах: поддержка optgroup на Android, возможность множественного выбора в WebOS и добавление элегантного способа обработки заполнителя значения.