如何将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？

回答

相关问题