在 jquery-mobile 中选择菜单样式答案

【问题标题】：Select menu style in jquery-mobile在 jquery-mobile 中选择菜单样式
【发布时间】：2013-02-26 14:25:25
【问题描述】：

我对选择菜单的样式有疑问。

我有一个以下代码和样式：

<select id="anredeMenu" data-native-menu="false" data-inline="true">
        <option value="1">Firma</option>
        <option value="2">Familienbetrieb</option>
        <option value="3">Herr</option>
        <option value="4">Frau</option>
        <option value="5">Familie</option>
</select>

我还有一个：

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

代码几乎相同。唯一不同的是：data-native-menu="false" data-inline="true" 我想要所有选择菜单中第一个示例中的样式。

我包含了来自 jquery mobile 的标准 css，并在我的身边包含了 iPhone 样式。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="style.css" />  //from http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile

【问题讨论】：

您必须覆盖 jquery.mobile-1.2.0.min.css 中的“选择”选择器才能更改 jquery 移动生成的标签。最好获取 jquery.mobile-1.2.0.min.css 的非最小化版本并开始覆盖适当的选择器。

标签： jquery jquery-mobile

【解决方案1】：

您可以绑定到pagebeforecreate 事件并将您想要的data- 属性添加到页面中的所有<select> 元素：

$(document).on("pagebeforecreate", function(e) {
    $("select", e.target).attr({
        "data-native-menu": "false",
        "data-inline": "true"
    });
});

由于此处理程序在 jQuery Mobile 将小部件应用于页面中的元素之前运行，因此它的行为就像所有 <select> 元素从一开始就已正确配置。

【讨论】：