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

Question

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

我很茫然,需要帮助.提前致谢.

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

:)

编辑 - 26/06/2015 - 这几个月后仍然引起人们的兴趣所以我认为值得编辑.我实际上非常喜欢在这个答案下面的评论中提供的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之前加载.

Answer 2

这是对最佳答案的评论,但我觉得值得自己回答,因为它帮助我回答了问题.

如果你想在JQuery UI之后保持Bootstrap声明(我这样做是因为我想使用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

Answer 3

这似乎是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>");
    }
});

Answer 4

据报道,这在1.10中被打破

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip于2013年1月29日上午7:36说:在CDN版本中,对话框关闭按钮丢失.只有按钮标签,span ui-icon是missong.

我下载了以前的版本,关闭按钮的X显示备份.

Answer 5

我发现了三个修复:

1. 你可以先加载bootsrap.他们加载jquery-ui.但这不是一个好主意.因为你会在控制台中看到错误.

2. 这个:

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;
   

   帮助.但其他按钮看起来很糟糕.而现在我们没有自举按钮.

3. 我只是想使用bootsrap样式,而且我想要一个带图标的关闭按钮.我做了以下事情:

   修复后关闭按钮的样子

   .ui-dialog-titlebar-close {
       padding:0 !important;
   }
   
   .ui-dialog-titlebar-close:after {
       content: '';
       width: 20px;
       height: 20px;
       display: inline-block;
       /* Change path to image*/
       background-image: url(themes/base/images/ui-icons_777777_256x240.png);
       background-position: -96px -128px;
       background-repeat: no-repeat;
   }
   

Answer 6

我有同样的问题,也许你已经破坏了这个,但只是把"images"文件夹放在与jquery-ui.css相同的位置就解决了

Answer 7

我遇到了同样的问题，在阅读并尝试了上述所有建议之后，我只是尝试在下载并保存到我的应用程序和image的images文件夹中后，在CSS中手动替换此图片（您可以在此处找到它），问题解决了！

这是CSS：

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}