如何將jQuery UI按鈕小部件添加到我的radio_button_tag？

我是全新的JavaScript，並且無法找到將jQuery UI包含到我的應用中的方法。我目前有一個包含一些單選按鈕的表單，讓我按類型過濾顯示在索引頁面上的場地記錄。我想包含jQuery按鈕小部件，以提供標籤的外觀。我有jQuery網站上的演示設置，在我的應用程序上工作，但現在只有它的外觀。如何將jQuery UI按鈕小部件添加到我的radio_button_tag？

http://jqueryui.com/demos/button/#radio

我現在的過濾器形式：

<form class="filter_form", method="get"> 
    <fieldset class="filter_form_fieldset"> 
     <legend class="filter_form_fieldset_legend">Choose a venue type:</legend> 
     <% Venuetype.all.each do |v| %> 
     <span class="filter_form_radio_button_label"> 
      <%= radio_button_tag("venuetypes[]", v.id, false)%> 
      <%= v.name %> 
     </span> 
     <% end %> 
    </fieldset> 
    <input type="submit" value="Filter" /> 
    </form>

非常感謝您的幫助！

來源

2011-02-23 Dave

我開始寫一個答案時，我意識到你正在使用'venuetypes []'爲的名稱單選按鈕似乎表明你打算在提交表單時發送多個按鈕？你不想使用複選框，而不是爲此目的？ – polarblau 2011-02-23 15:29:59

@polarblau啊，它本來是複選框，但我認爲有單選按鈕會更適合做的過濾器類型，我會更改導軌代碼，謝謝你看看。 – Dave 2011-02-23 16:19:28

請看下面的答案，假設你使用複選框。 – polarblau 2011-02-23 17:04:39

假設你使用複選框（見原題評論）：

到您的頁眉或頁腳（記住，jQuery用戶界面需要一個CSS文件以及包括必要的文件 - 或自定義樣式！）如果你還沒有這樣做。

然後調整你的標記來匹配這樣的：

<fieldset class="filter_form_fieldset venuetypes"> 
    <legend class="filter_form_fieldset_legend">Choose a venue type:</legend> 
    <% Venuetype.all.each do |v| %> 
    <%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %> 
    <label for="venuetype-<%= v.id %>"><%= v.name %></label> 
    <% end %> 
</fieldset>

調用buttonset方法時，DOM已加載例如在您的application.js：

$(function() { 
    $('.venuetypes').buttonset(); 
});

這應該做到這一點 - 這裏有一個工作示例：http://jsfiddle.net/DZx3z/

來源

2011-02-23 17:04:02 polarblau

太棒了！非常感謝它的出色表現！ – Dave 2011-02-23 18:49:14

如何將jQuery UI按鈕小部件添加到我的radio_button_tag？

回答

相關問題