Как «отключить» стиль jQuery Mobile для <select>выпадающих меню? - PullRequest
Новая
       4

Как «отключить» стиль jQuery Mobile для <select>выпадающих меню?

23 голосов
/ 03 декабря 2010

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

Ответы [ 8 ]

40 голосов
/ 28 сентября 2011

в соответствии с 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>
3 голосов
/ 17 декабря 2012

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

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

$.mobile.ignoreContentEnabled = true;

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

1 голос
/ 24 июля 2013

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

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

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

$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';
0 голосов
/ 25 марта 2014

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

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

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

0 голосов
/ 07 сентября 2011

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

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...
0 голосов
/ 14 декабря 2010

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

0 голосов
/ 03 декабря 2010

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

...