在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中選擇菜單樣式

回答

相關問題