Question

有点愚蠢的问题，但是我已经下载了JqueryUI selectmenu小部件，即使Firebug显示正在加载的相关CSS和JavaScript文件，它也无法正常工作。

页面上的脚本：

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

Answer 1

嗨这肯定与包含所有必需的脚本有关。从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元素like this之后放置<script>标记来执行此操作。或者将JS封装在$(function(){});中，如下所示：

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

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

注意如果将脚本部分放在HTML元素上方而不使用$(function(){});（就绪函数），样式将不起作用：http://jsfiddle.net/8WWMT/11/

JQuery UI selectmenu没有样式

1 个答案: