如何在JQuery上使用自定義樣式的選擇菜單？

只見some beautiful select menus，用jQuery顯然產生與下面的腳本：如何在JQuery上使用自定義樣式的選擇菜單？

<div data-role="fieldcontain"> 
<label for="select-choice-1" class="select">Choose shipping method:</label> 
<select name="select-choice-1" 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>

當我試圖腳本，它只是生產的默認選擇菜單，無需JQuery的自定義樣式。我想這是有道理的，但我該如何指定我希望上面的代碼使用我在上面的鏈接中找到的自定義樣式？

注意：我最終希望我的軟件能夠移動，但我不認爲我現在實際上正在使用JQuery Mobile;我可能剛剛導入了標準的JQuery UI，它可能包含或不包含我所知道的所有自定義樣式。我也看了其他相關的問題，但不明白答案。

來源

2011-12-29 Brian Schmitz

愚蠢的問題：但你包括jQuery手機文件？ – Ivan 2011-12-29 22:26:52

你已經在'Note：' – locrizak 2011-12-29 22:27:34

中回答了你自己的問題，可能你沒有包含jQuery。你能給全部代碼嗎？ – Dion 2011-12-29 22:28:43

你聲明你不包括jQuery Mobile，這意味着你沒有真棒選擇菜單！您不必以編程方式創建樣式化選擇菜單，如果您包含jQuery Mobile文件，jQuery Mobile會自動執行此操作。

兩者都需要對jQuery Mobile的JS和CSS文件被包含在你的網頁：

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

來源：http://jquerymobile.com/download/

注意，jQuery Mobile的和jQuery UI是完全不同的庫;儘管他們都需要jQuery Core。

來源

2011-12-29 22:54:36 Jasper

如果您只想使用jQuery Mobile中的一些或一個小部件，您可以告訴框架只初始化特定的小部件，以下是執行此操作的文檔：http://jquerymobile.com/demos/1.0/ docs/api/globalconfig.html – Jasper 2011-12-29 23:00:11

聽起來很棒！但是，我可以做到這一點，仍然保留我已經使用標準JQuery UI構建的元素，例如滑塊，主題和樣式。當我嘗試導入移動JS和CSS時，我看到了一秒鐘的東西，然後消失了？ – 2011-12-29 23:02:16

@BrianSchmitz這裏有太多可以回答的問題。 jQuery Mobile有一點學習曲線;你想要做的是閱讀jQuery Mobile的文檔以熟悉你自己，有一些基本的'Page Structure'文檔可以幫助你開始：http://jquerymobile.com/demos/1.0/docs/pages/page-anatomy 。html – Jasper 2011-12-29 23:08:41

有幾個原因可能讓您的選擇列表無法通過jquery庫進行樣式化。首先，確保jquery庫全部加載 - 請使用螢火蟲http://getfirebug.com/ - 或谷歌瀏覽器檢查器進行檢查。確保你已經從上面的演示中加載了CSS。

有一件事情可能會導致這個問題 - 如果這些html元素是在jquery訪問它們之前定義的，那麼腳本將無法找到它們。確保將JavaScript代碼放入$（function（）{（your javascript）}）;或者將它放在頁面的底部，就在關閉正文標籤之前。

如果您在臨時網站或http://jsfiddle.net/上發佈任何內容，它將會有所幫助 - 如果沒有更多信息，很難說出了什麼問題。

來源

2011-12-29 22:49:22 danbgray

如何在JQuery上使用自定義樣式的選擇菜單？

回答

相關問題