Как отключить jQuery Мобильный стиль в папке <select>?

Мне нужно отключить 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 только для выпадающего списка?

Ответ 1

согласно 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>

Ответ 2

Начиная с версии 1.1, правильный способ сделать это: data-enhance="false"

Вам также потребуется добавить эту строку в конфигурацию:

$.mobile.ignoreContentEnabled = true;

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Ответ 3

Внутри mobileinit, установите селектор jQM, чтобы вести себя как ожидалось:

$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';

Ответ 4

Хотя этот вопрос уже рассмотрен, я хотел бы добавить еще несколько строк, так как ответ не работал "из коробки" для меня, и это может сэкономить время для других.

В моем случае я отключу собственные выпадающие списки для приложения для смартфонов, когда он запускается в 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. Важно сохранить порядок, иначе элементы управления уже инициализируются и не имеют никакого эффекта!

Я надеюсь, что этот совет может сэкономить некоторое время кому-то!

Ответ 5

Да, вам нужно войти в файл CSS, который управляет стилем выпадающего меню JQuery Mobile UI и удалить любой стиль, который вы не хотите отображать.

Ответ 6

Они все еще работают над этим, работают в последнем коде git, но я бы не рекомендовал его: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

Ответ 7

Использование этого свойства должно помочь

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...

Ответ 8

просто попробуйте data-native-menu="true"

из документа: Добавляя атрибут data-native-menu = "true" к выбору, среда будет использовать меню выбора на основе браузера при нажатии кнопки выбора. Поскольку этот параметр не использует какой-либо пользовательский синтаксический анализ меню и логику генерации меню, он значительно быстрее, чем пользовательская версия меню. Пользовательские меню выбора добавляют возможность выбора темы и обеспечивают визуальную согласованность между платформами. Кроме того, она исправляет некоторые недостающие функциональные возможности на определенных платформах: поддержка optgroup на Android, возможность множественного выбора в WebOS и добавление элегантного способа обработки заполнителя значения.

для получения дополнительной информации