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

2020/10/19 17:22 · javascript ·  · 0评论

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

在“对话框演示”页面上生成的代码

<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);
        }
    }
});

我很茫然,需要帮助。

我迟到了一段时间,但是我要打动您,准备好了吗?

发生这种情况的原因是因为您在调用jquery-ui之后调用了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>

:)

编辑-2015年6月26日-几个月后,这一直吸引着人们的兴趣,因此我认为值得进行编辑。实际上,我真的很喜欢此答案下方的注释中提供的noConflict解决方案,并由用户Pretty Cool澄清为单独的答案。正如有些人报告的那样,交换脚本时,引导工具提示出现问题。但是我没有遇到这个问题,因为我下载了没有工具提示的jquery UI,因为我不需要它,因为引导程序。所以这个问题从来没有想过。

编辑- 22/07/2015 -不要混淆jquery-uijquery虽然Bootstrap的JavaScript需要先加载jQuery,但它并不依赖jQuery-UI。因此jquery-ui.js可以在之后加载bootstrap.min.js,而jquery.js始终需要在Bootstrap之前加载。

这是对最佳答案的评论,但我认为它值得自己回答,因为它可以帮助我回答问题。

如果要保留在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

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

据报告在1.10中已损坏

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

phillip在2013年1月29日上午7:36说:在CDN版本中,缺少对话框关闭按钮。只有按钮标签,范围ui-icon是missong。

我下载了以前的版本,然后关闭按钮的X出现了。

我发现了三个修复程序:

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

我有一个完全相同的问题,也许您已经检查了这个问题,但是仅通过将“ images”文件夹放在与jquery-ui.css相同的位置就解决了

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

这是CSS:

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

我使用的是jQuery UI 1.8.17,遇到了同样的问题,另外我还将其他CSS样式表应用于页面上的内容,包括标题栏颜色。因此,为避免任何其他问题,我使用以下代码定位了确切的ui元素:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

然后,我在对话框本身的属性中添加了一个关闭按钮:...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

由于某种原因,我必须同时定位这两个项目,但它确实有效!

我知道这个问题很旧,但是jquery-ui v1.12.0刚出现了这个问题。

简短回答
确保你有一个文件夹,名为
Images同一个地方,你有jquery-ui.min.cssimages文件夹必须包含通过全新下载的jquery-ui找到的图像

长答案

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

作为参考,这是我按照@ john-macintyre的建议扩展open方法的方式:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});
  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

如果要在js函数中调用dialog(),则可以使用以下引导按钮冲突代码

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

一个智者曾经帮助过我。

在所在的文件夹中jquery-ui.css,创建一个名为“ images”的文件夹,并将以下文件复制到其中:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

并显示关闭图标。

只需添加缺少的内容:

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

我也有这个问题。这是为关闭按钮插入的代码:

从Web Developer显示jQuery创建的代码

当我关闭按钮上的style =“ display:none:”时,将显示关闭按钮。因此出于某种原因显示:无;正在设置,但我看不到如何控制它。因此,解决此问题的另一种方法可能是简单地覆盖display:none。虽然看不到该怎么做。

我注意到KyleMit发布的答案确实有效,但是使外观看起来与众不同。

我还注意到,此问题并不影响页面上的所有对话框,而仅影响其中的一部分。一些对话框按预期工作;当关闭按钮出现时,其他没有标题(即,包含标题的跨度为空)。

我认为有些严重错误,可能不是1.10.x的时间。

但是经过进一步的工作,我发现在某些情况下标题设置不正确,并且在解决此问题后,X关闭按钮重新出现了应有的状态。

我以前是这样设置标题的:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

该ID在我的代码中不存在,但显然是由jQuery从ac-popup和ui-dialog-title创建的。有点笨拙。但是正如我所说的那样,它不再起作用,而我必须使用以下内容:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

完成此操作后,尽管我不确定它们是否绝对相关,但缺少按钮的问题似乎更好。

即使在jquery-ui之后加载引导程序,我也可以使用以下命令进行修复:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}

我遇到了同样的问题,以我为例,JQuery-ui.js版本为1.10.3,在引用jquery-ui-1.12.1.min.js之后,关闭按钮开始可见。

本文地址:http://javascript.askforanswer.com/jquery-uiduihuakuang-queshaoguanbitubiao.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!