Question

我是javascript的新手，我很难找到将jQuery UI添加到我的应用程序中的方法。我目前有一个包含一些单选按钮的表单，让我按类型过滤索引页面上显示的场地记录。我想包含jQuery按钮小部件来给出标签的外观。我有jQuery网站上的演示设置正在我的应用程序上工作，但它只是目前的目光。

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>

非常感谢您的帮助！

Answer 1

假设您正在使用复选框（请参阅原始问题的评论）：

在页眉或页脚中包含必要的文件（请记住，jQuery UI也需要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>

在加载DOM时调用buttonset方法，例如在你的application.js：

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

应该这样做 - 这是一个有效的例子：http://jsfiddle.net/DZx3z/

如何将jQuery UI按钮小部件添加到我的radio_button_tag？

1 个答案: