我使用了一个自定义的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 page上生成的代码
<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生成的,而不是我,所以我不能在不编辑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);
}
}
});
我不知所措,需要帮助。
发布于 2013-12-09 03:25:29
我来晚了一段时间,但我会让你大吃一惊的,准备好了吗?
之所以会发生这种情况,是因为在调用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-06-03 08:49:23
这是对顶部答案的评论,但我觉得它值得自己回答,因为它帮助我回答了这个问题。
如果您想让Bootstrap在JQuery UI之后声明(我这样做是因为我想使用Bootstrap工具提示),则声明以下内容(我在$(document).ready
之后声明)将允许按钮再次出现(来自https://stackoverflow.com/a/23428433/4660870的回答)
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
发布于 2013-12-05 12:54:20
这似乎是jQuery发布方式中的一个错误。您可以通过对Dialog Open
事件进行一些dom操作来手动修复它:
$("#selector").dialog({
open: function() {
$(this).closest(".ui-dialog")
.find(".ui-dialog-titlebar-close")
.removeClass("ui-dialog-titlebar-close")
.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
}
});
https://stackoverflow.com/questions/17367736
复制相似问题