JQuery UI 선택 메뉴가 스타일 지정되지 않습니다

Question

위키 백과가 아닌 JqueryUI selectmenu 위젯을 다운로드했는데 Firebug에서로드되는 관련 CSS 및 JavaScript 파일을 표시하더라도 작동하지 않습니다.

<script type="text/javascript"> 
    $('#brand_color').selectmenu({style:'popup'}); 
</script> 

생성 된 형태로 마크 업 : 페이지에

스크립트

<%= f.label :color %><br /> 
<%= f.select(:color, Brand::COLORS) %><br /> 

Answer 1

안녕 :

<label for="brand_color">Color</label><br /> 
<select id="brand_color" name="brand[color]"> 
    <option value="red">red</option> 
    <option value="green">green</option> 
    <option value="blue">blue</option> 
    <option value="black">black</option> 
</select><br /> 

레일 코드을 형성 확실히 필요한 모든 스크립트를 포함하는 것과 관련이 있습니다. 당신이 this demo에서 필요한 정확히 말해 조금 어렵습니다,하지만 모두 같은 스크립트를 포함해야했고 예를 들어 만든 : 여기 http://jsfiddle.net/8WWMT/7/

를 모든 스크립트입니다 : 또한 당신이

<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css"> 
<script src="http://view.jqueryui.com/selectmenu/jquery-1.8.0.js"></script> 
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script> 
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script> 
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script> 
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script> 
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script> 
<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/demos/demos.css">​ 

HTML 요소가 렌더링 된 후에 JS가 호출되는지 확인하십시오. HTML 요소 다음에 <script> 태그를 배치하여이 작업을 수행 할 수 있습니다 (like this). 또는이처럼 $(function(){}); 내부 JS를 둘러싸의 :

<script type="text/javascript"> 
    $(function(){ 
     $('#brand_color').selectmenu({style:'popup'}); 
    }); 
</script> 

당신이 $(function(){}); (준비 기능)를 사용하지 않고 HTML 요소 위의 스크립트 부분을 넣을 경우 스타일이 작동하지 않는 방법

http://jsfiddle.net/8WWMT/10/

주의 사항 : http://jsfiddle.net/8WWMT/11/