Как я могу добавить виджет кнопки jQuery UI в мой radio_button_tag? - PullRequest
Новая
       30

Как я могу добавить виджет кнопки jQuery UI в мой radio_button_tag?

0 голосов
/ 23 февраля 2011

Я новичок в javascript и не могу найти способ включить пользовательский интерфейс jQuery в мое приложение.В настоящее время у меня есть форма, содержащая несколько переключателей, позволяющих фильтровать записи места проведения, отображаемые на странице индекса, по типу.Я хотел бы включить виджет кнопки 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>

Большое спасибо за любую помощь!

1 Ответ

1 голос
/ 23 февраля 2011

Предполагается, что вы используете флажки (см. Комментарии к исходному вопросу):

Включите необходимые файлы в верхний или нижний колонтитул (помните, что для 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>

Вызовите метод buttonset, когда DOM загружен, например, в вашем application.js: 

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

Это должно сделать это - вот рабочий пример: http://jsfiddle.net/DZx3z/

...