1

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

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

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

1 回答 1

0

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

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

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

于 2013-02-26T14:45:30.880 回答