Question

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

我有一个代码和风格：

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

！[在此处输入图片说明] [1]

我还有另一个：

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

！[在此输入图片说明] [2]

代码几乎相同。唯一不同的是：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

Answer 1

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

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

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

在jquery-mobile中选择菜单样式

1 个答案: