我使用一个自定义的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>

EDIT

代码的不同部分是由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 v1.12.0的问题。

简短的回答 确保在jquery-ui.min.css所在的位置有一个名为Images的文件夹。images文件夹必须包含在新下载的jquery-ui中找到的图像

长回答

我的问题是,我使用gulp将所有的css文件合并为一个文件。当我这样做时,我正在改变jquery-ui.min.css的位置。对话框的css代码期望在同一目录中有一个名为Images的文件夹,在这个文件夹中它期望默认的图标。因为gulp没有将图像复制到新的目的地,所以它没有显示x图标。

其他回答

我有同样的问题,也许你已经检查了这一点,但它解决了只是通过放置“图像”文件夹在相同的位置作为jquery-ui.css

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

发生这种情况的原因是,在调用jquery-ui in之后,你调用了bootstrap in。

从字面上看,交换这两个,这样就不是:

<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>

:)

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 with jquery! While Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.

作为参考,这是我如何根据@john-macintyre的建议扩展开放方法:

美元。ui小部件(“。对话框”,美元。ui。对话框中,{ 打开:函数(){ $ (this.uiDialogTitlebarClose) .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>"); //调用父部件的open()。 返回this._super (); } });

只需要加上缺失的部分:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

我知道这个问题很老了,但我刚刚遇到了jquery-ui v1.12.0的问题。

简短的回答 确保在jquery-ui.min.css所在的位置有一个名为Images的文件夹。images文件夹必须包含在新下载的jquery-ui中找到的图像

长回答

我的问题是,我使用gulp将所有的css文件合并为一个文件。当我这样做时,我正在改变jquery-ui.min.css的位置。对话框的css代码期望在同一目录中有一个名为Images的文件夹,在这个文件夹中它期望默认的图标。因为gulp没有将图像复制到新的目的地,所以它没有显示x图标。