发表新帖
发表新帖

How to “turn off” jQuery Mobile's styling of <select> drop downs?

后端 未结
关注
8 2003
囚心锁ツ
囚心锁ツ 2021-01-07 18:13

I need to turn off jQuery Mobile\'s styling of

提交评论
  •  加载中...
  • 后悔当初
    2021-01-07 18:26

    Since Version 1.1 the right way to do it is: data-enhance="false"

    You will also need to add this line to config:

    $.mobile.ignoreContentEnabled = true;

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

    0 讨论(0)
  • 时光说笑
    2021-01-07 18:27

    Inside mobileinit, fix the jQM selector to behave as expected:

    $.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';
    0 讨论(0)
  • Happy的楠姐
    2021-01-07 18:29

    Yes, you have to go into the CSS file that controls the JQuery Mobile UI dropdown(s) style and remove any styling you don't want to appear.

    0 讨论(0)
  • 臣服心动
    2021-01-07 18:31

    just try data-native-menu="true"

    from doc : By adding the data-native-menu="true" attribute to the select, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version. The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: optgroup support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values.

    for more info

    0 讨论(0)
  • 再見小時候
    2021-01-07 18:33

    Although this question is considered answered already, I'd like to add some more lines, since the answer didn't work "out-of-the-box" for me, and this might save some time for others.

    In my case, I'm disabling the native dropdowns for a smartphone application when it runs into Android (since it has some ugly issues when opening native dropdowns, reported already in another thread). The "magic spell" that solved the problem to me is just the following lines:

    $(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;
    }               
});

    These lines are in a customization script loaded just after jQuery and just before jQuery-Mobile. It's important to keep the order, otherwise the controls are already initialized and it has no effect!

    I hope this advice can save some time to someone!

    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题