在jquery-mobile中选择菜单样式

我有一个它下面的代码和风格：

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

[进入image description here] [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

来源

2013-02-26 alexander-fire

您必须重写jquery.mobile-1.2.0.min.css中的'select'选择器，以更改jquery移动生成的标记。最好获取jquery.mobile-1.2.0.min.css的非最小化版本，并开始覆盖适当的选择器。 – Lowkase 2013-02-26 14:33:34

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

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

因为这个处理程序运行之前jQuery Mobile的应用小部件中的元素该页面，它将表现得好像所有的<select>元素从一开始就被正确配置。

来源

2013-02-26 14:45:30

在jquery-mobile中选择菜单样式

回答

相关问题