jQuery UI 对话框 - 缺少关闭图标 [英] jQuery UI Dialog - missing close icon
问题描述
我使用的是自定义 jQuery 1.10.3 主题.我从主题滚轮上直接下载了所有内容,并且故意没有更改任何内容.
我创建了一个对话框,我得到一个空的灰色方块,关闭图标应该是:
我比较了在我的页面上生成的代码:
在对话框演示页面上生成的代码:
编辑
代码的不同部分由 jQueryUI 生成,而不是我,所以我不能只添加 span 标签而不编辑 jqueryui js 文件,这似乎是实现正常的错误/不必要的选择功能.
这是用于生成该部分代码的 JavaScript:
this.element.dialog({appendTo: "#summary_container",标题:this.title(),closeText: "关闭",宽度:this.width,位置: {我的:中心顶部",在:(中心顶部+"+(window.innerHeight*.1)),碰撞:无"},模态:假,可调整大小:假,可拖动:假,显示:折叠",隐藏:折叠",关闭:函数(){如果(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="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
<块引用>编辑 - 26/06/2015 - 这在几个月后一直吸引着人们的兴趣,所以我认为值得编辑.我真的很喜欢 noConflict此答案下方的评论中提供的解决方案并澄清由用户 Pretty Cool 作为单独的答案.由于有些人报告了问题交换脚本时使用引导工具提示.我没有然而,遇到这个问题,因为我下载了 jquery UI 没有工具提示,因为我不需要它,因为引导程序.所以这个问题从来没有来找我了.
编辑 - 22/07/2015 - 不要将 jquery-ui
与 jquery
混淆!尽管Bootstrap 的 JavaScript 需要之前加载 jQuery,它不依赖于 jQuery-UI.所以jquery-ui.js
可以在bootstrap.min.js
之后加载,而jquery.js
总是需要在Bootstrap之前加载.
I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.
I created a dialog box and I get an empty gray square where the close icon should be:
I compared the code that is generated on my page:
<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>
To the code generated on the 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>
EDIT
The different parts of the code are generated by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.
Here is the JavaScript used that generates that part of the code:
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);
}
}
});
I'm at a loss and need help.
I am late to this one by a while, but I'm going to blow your mind, ready?
The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.
Literally, swap the two so that instead of:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
it becomes
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
:)
Edit - 26/06/2015 - this keeps attracting interest months later so I thought it was worth an edit. I actually really like the noConflict solution offered in the comment underneath this answer and clarified by user Pretty Cool as a separate answer. As some have reported issues with the bootstrap tooltip when the scripts are swapped. I didn't experience that issue however because I downloaded jquery UI without the tooltip as I didn't need it because bootstrap. So this issue never came up for me.
Edit - 22/07/2015 - Don't confuse
jquery-ui
withjquery
! While Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. Sojquery-ui.js
can be loaded afterbootstrap.min.js
, whilejquery.js
always needs to be loaded before Bootstrap.
这篇关于jQuery UI 对话框 - 缺少关闭图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!