2

少しばかげた質問ですが、JqueryUI selectmenu ウィジェットをダウンロードしましたが、関連する CSS および JavaScript ファイルがロードされていることを Firebug が示していても機能しません。

ページのスクリプト:

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

生成されたフォーム マークアップ:

<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 />

Railsフォームコード:

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

1 に答える 1

1

こんにちはそれは間違いなくすべての必要なスクリプトを含めることと関係があります。このデモから必要なものを正確に伝えるのは少し難しいですが、すべて同じスクリプトを含めるようにして、例を作成しました：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が呼び出されることを確認する必要があります。このよう<script>に、HTML要素の後にタグを配置することでこれを行うことができます。または、次のようにJSをで囲みます。$(function(){});

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

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

$(function(){});（ready関数）を使用せずにスクリプト部分をHTML要素の上に配置すると、スタイルがどのように機能しないかに注意してください。http: //jsfiddle.net/8WWMT/11/

于 2012-09-12T18:12:35.227 に答える