如何将 jqueryui 选择菜单插件添加到我的页面？

Question

我正在尝试将 selectmenu jqueryui 插件添加到我的页面。我去了https://github.com/fnagel/jquery-ui 并从ui 文件夹中复制了文件jquery.ui.selectmenu.js。然后，我从我的页面中包含了指向此 javascript 的链接。我重新安装了 jquery 和 jqueryui，其他功能还可以，但是当我在我的页面上添加 $('select').selectmenu(); 时，我最终会遇到可怕的混乱。所有新的选择菜单都附加到页面底部，而不是替换选择。

有没有我遗漏的步骤？

以下是页面中的 html，显示了我链接到的文件。我的理解是 custom.css 和 custom.min.js 文件应该包含我需要的所有脚本和样式表。这是错的吗？

<link href="/stylesheets/jquery-ui-1.8.6.custom.css?1289473366" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.4.2.min.js?1288662624" type="text/javascript"></script>
<script src="/javascripts/jquery-ui-1.8.6.custom.min.js?1289401432" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.selectmenu.js?1289469657" type="text/javascript"></script>

我的页面上的日期选择器项目显示为应用了适当的 css。

Answer 1

jquery.ui.selectmenu.js 文件有一个小问题。

一个 div 被附加在 body 的末尾，而不是被插入到 select 的元素之后。所以如果你只有一个选择它工作正常。如果要添加多个选择，则需要从以下位置更改插件：

...
this.listWrap = $( "<div />", {
        'class': self.widgetBaseClass + '-menu'
    }).append( this.list ).appendTo( o.appendTo );
...

到：

...
this.listWrap = $( "<div />", {
        'class': self.widgetBaseClass + '-menu'
    }).append( this.list ).insertAfter( this.element );
....

Answer 2

据我所知，您正在使用 fork jQuery UI 版本的 selectmenu，并且您需要适当的样式才能获得 @brad 首先注意到的预期结果。

只添加

jquery-ui-1.8.6.custom.css

作为参考不能解决您的特定选择菜单要求，您需要添加另一个 css 参考，其中将包含选择菜单元素的正确样式规则。

Answer 3

selectmenu() 不会触发错误的事实表明插件已正确加载。混乱的显示可能是由于缺少 css 文件造成的。您是否包含了主题文件夹或 jquery ui 中所有必要的 css 文件？