2011-02-23 6 views
0

저는 자바 스크립트에 익숙하며 내 응용 프로그램에 jQuery UI를 포함시키는 방법을 찾는 데 어려움이 있습니다. 현재 일부 라디오 버튼이 포함 된 양식을 사용하여 유형별로 색인 페이지에 표시된 장소 레코드를 필터링 할 수 있습니다. 탭 모양을 제공하기 위해 jQuery 단추 위젯을 포함하고 싶습니다. 데모 설정은 jQuery 사이트에서 내 애플 리케이션에 대한 작업을하고 있지만, 현재는 그 모습 만 볼 수 있습니다.radio_button_tag에 jQuery UI 단추 위젯을 추가하려면 어떻게해야합니까?

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> 
어떤 도움 주셔서 대단히

감사합니다!

+0

나는 당신이'venuetypes을 사용하고 있는지 깨달았을 때 대답을 쓰기 시작은 [] '의 이름에 대한 양식을 제출할 때 둘 이상을 보낼 계획임을 나타내는 라디오 버튼? 오히려 이러한 목적으로 확인란을 사용하지 않겠습니까? – polarblau

+0

@polarblau Ahh는 원래 체크 박스 였지만 라디오 버튼을 사용하는 것이 필터 종류에 더 적합 할 것이라고 생각했습니다. 레일 코드를 변경해 주셔서 감사합니다. – Dave

+0

아래의 내 대답을 참조하십시오. 확인란을 사용한다고 가정합니다. – polarblau

답변

1

당신이 (원래의 질문에 대한 코멘트보기) 체크 박스를 사용하고 있다고 가정 : 당신은 머리글이나 바닥 글 (jQuery를 UI뿐만 아니라 CSS 파일을 필요로 기억에

는 필요한 파일을 포함 - 또는 사용자 정의 스타일!) 아직 그렇게하지 않았다면. DOM을가 예를 들어,로드 된 경우

<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 방법 :

사항은 다음과 같이 일치하도록 마크 업 구조 조정 당신의 application.js에서 : 그것을해야

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

- 여기에 작업 예제 : http://jsfiddle.net/DZx3z/

+0

환상적! 대단히 감사합니다. 훌륭하게 작동합니다! – Dave

관련 문제