我正在使用自定义 jQuery 1.10.3 主题。我直接从主题滚轴下载了所有内容,并且我故意没有更改任何内容。
我创建了一个对话框,我得到一个空白的灰色方块,关闭图标应该是:
我比较了在我的页面上生成的代码:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> <spanid="ui-id-2" class="ui-dialog-title">Title</span> <button class="ui-dialog-titlebar-close"></button> </div>
到Dialog Demo 页面上生成的代码:
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span> <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"> <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span> <span class="ui-button-text">close</span> </button> </div>
代码的不同部分是由 jQueryUI 生成 的,而不是我,所以我不能只添加 span 标签而不编辑 jqueryui js 文件,这似乎是实现正常功能的错误/不必要的选择。
以下是用于生成该部分代码的 JavaScript:
this.element.dialog({ appendTo: "#summary_container", title: this.title(), closeText: "Close", width: this.width, position: { my: "center top", at: ("center top+"+(window.innerHeight*.1)), collision: "none" }, modal: false, resizable: false, draggable: false, show: "fold", hide: "fold", close: function(){ if(KOVM.areaSummary.isVisible()){ KOVM.areaSummary.isVisible(false); } } });
我不知所措,需要帮助。
我迟到了一段时间,但我要让你大吃一惊,准备好了吗?
发生这种情况的原因是因为您在调用 jquery-ui 之后调用了 bootstrap。
从字面上看,交换两者,而不是:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="js/bootstrap.min.js"></script>
它成为了
<script src="js/bootstrap.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
编辑 - 2015 年 6 月 26 日 - 几个月后这继续引起人们的兴趣,所以我认为值得编辑。实际上,我真的很喜欢此答案下方评论中提供的 noConflict 解决方案,并由用户 Pretty Cool 澄清为单独的答案。正如一些人报告了交换脚本时引导工具提示的问题。但是我没有遇到这个问题,因为我下载了没有工具提示的 jquery UI,因为我不需要它,因为 bootstrap。所以这个问题从来没有出现在我身上。 编辑 - 22/07/2015 - 不要jquery-ui混淆jquery!虽然 Bootstrap 的 JavaScript 需要事先加载 jQuery,但它不依赖 jQuery-UI。所以jquery-ui.js可以在 之后加载bootstrap.min.js,而jquery.js始终需要在 Bootstrap 之前加载。
编辑 - 2015 年 6 月 26 日 - 几个月后这继续引起人们的兴趣,所以我认为值得编辑。实际上,我真的很喜欢此答案下方评论中提供的 noConflict 解决方案,并由用户 Pretty Cool 澄清为单独的答案。正如一些人报告了交换脚本时引导工具提示的问题。但是我没有遇到这个问题,因为我下载了没有工具提示的 jquery UI,因为我不需要它,因为 bootstrap。所以这个问题从来没有出现在我身上。
编辑 - 22/07/2015 - 不要jquery-ui混淆jquery!虽然 Bootstrap 的 JavaScript 需要事先加载 jQuery,但它不依赖 jQuery-UI。所以jquery-ui.js可以在 之后加载bootstrap.min.js,而jquery.js始终需要在 Bootstrap 之前加载。
jquery-ui
jquery
jquery-ui.js
bootstrap.min.js
jquery.js