如何“关闭” jQuery Mobile 的

发布于 2024-10-05 12:47:07 字数 723 浏览 8 评论 0原文

我需要关闭 jQuery Mobile 的下拉列表的外观。

目前我的标记是（出于显示目的减少选项数量）：

<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>

我尝试在

有没有办法“关闭”jQuery Mobile 仅选择下拉列表？

原文

I need to turn off jQuery Mobile's styling of <select> drop downs. Ultimately I'd like the device itself (iPhone, Android, Blackberry, etc.) to determine how the <select> drop down looks.

Currently my markup is (option quantity reduced for display purposes):

<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>

I tried using data-role="none" on the <select> but nothing changed.

Is there a way to "turn off" jQuery Mobile for just the select drop down?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦归所梦 2024-10-12 12:47:07

根据 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>

according to http://jquerymobile.com/test/docs/forms/docs-forms.html

If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<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>

回复收藏 0 原文

残龙傲雪 2024-10-12 12:47:07

从版本 1.1 开始，正确的方法是：data-enhance="false"

您还需要将此行添加到配置中：

$.mobile.ignoreContentEnabled = true;

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

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 原文

咆哮 2024-10-12 12:47:07

在 mobileinit 内，修复 jQM 选择器以按预期运行：

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

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

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

回复收藏 0 原文

习惯成性 2024-10-12 12:47:07

虽然这个问题已经被认为已经得到解答，但我想添加更多行，因为答案对我来说并不是“开箱即用”的，这可能会为其他人节省一些时间。

就我而言，当智能手机应用程序运行到 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 之前加载的自定义脚本中。 保持顺序很重要，否则控件已经初始化并且没有任何效果！

我希望这个建议可以为某人节省一些时间！

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 原文

再可℃爱ぅ一点好了 2024-10-12 12:47:07

是的，您必须进入控制 JQuery Mobile UI 下拉样式的 CSS 文件，并删除您不想显示的任何样式。

回复收藏 0 原文

走过海棠暮 2024-10-12 12:47:07

他们仍在研究它，适用于最新的 git 代码，但我不推荐它：
https://github.com/jquery/jquery -mobile/issuesearch?state=close&q=select#issue/350

回复收藏 0 原文

故人如初 2024-10-12 12:47:07

使用这个属性应该有帮助

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

Using this property should help

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

回复收藏 0 原文

孤君无依 2024-10-12 12:47:07

只需尝试来自 doc 的 data-native-menu="true"

：
通过将 data-native-menu="true" 属性添加到选择，框架将在单击选择按钮时使用浏览器的本机选择菜单。由于此选项不使用任何自定义菜单解析和菜单生成逻辑，因此它比自定义菜单版本要快得多。
自定义选择菜单添加了主题选择的功能，并提供跨平台的视觉一致性。此外，它还修复了某些平台上缺少的一些功能：Android 上的 optgroup 支持、WebOS 上的多选功能，并添加了一种优雅的方式来处理占位符价值观。

了解更多信息

回复收藏 0 原文

~没有更多了~