JQuery UI 选择菜单没有样式

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。您可以通过定位 <script> 来做到这一点HTML 元素之后的标记，like this 。或者将 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/