小编典典

jQuery UI 对话框 - 缺少关闭图标

all

我正在使用自定义 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);
        }
    }
});

我不知所措,需要帮助。


阅读 71

收藏
2022-06-30

共1个答案

小编典典

我迟到了一段时间,但我要让你大吃一惊,准备好了吗?

发生这种情况的原因是因为您在调用 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 之前加载。

2022-06-30