JQuery UI 选择菜单没有样式

Question

有点愚蠢的问题，但我已经下载了 JqueryUI 选择菜单小部件，即使 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/