Как "отключить" стиль выпадающих окон jQuery Mobile?

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

23
html jquery mobile mobile-website

8 ответов

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

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

Вам также нужно будет добавить эту строку в config:

$.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") )';
1

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

в моем случае я отключаю собственные раскрывающиеся списки для приложения смартфона, когда он запускается в 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;
    }               
});

эти строки находятся в скрипте настройки, загруженном сразу после jQuery и непосредственно перед jQuery-Mobile. важно сохранить порядок, в противном случае элементы управления уже инициализированы, и это не имеет никакого эффекта!

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

1

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

0

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

0

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

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

просто попробовать data-native-menu="true"

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

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

0