jQuery UI İletişim Kutusu - kapatma simgesi eksik

Özel bir jQuery 1.10.3 teması kullanıyorum. Her şeyi tema silindirinden indirdim ve kasıtlı olarak hiçbir şey değiştirmedim.

Bir iletişim kutusu oluşturuyorum ve kapat simgesinin olması gereken boş bir gri kare alıyorum:

Sayfamda oluşturulan kodu karşılaştırdım:

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

İletişim Demosu sayfasında oluşturulan koda :

<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: kodun farklı bölümleri jQueryUI tarafından oluşturulur , ben değil, bu yüzden normal işlevsellik elde etmek için kötü / gereksiz bir seçim gibi görünüyor jqueryui js dosyasını düzenlemeden span etiketleri ekleyemezsiniz.

Kodun bu bölümünü oluşturan javascript şöyledir:

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

Kayboldum ve yardıma ihtiyacım var. Şimdiden teşekkürler.

Buna bir süre geç kaldım, ama aklını başımdan alacak, hazır mısın?

Bunun olmasının nedeni, jquery-ui'yi çağırdıktan sonra bootstrap çağırmanızdır.

Kelimenin tam anlamıyla, ikisini değiştirin;

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

o olur

<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 - Bu, aylar sonra ilgi çekmeye devam ediyor, bu yüzden bir düzenlemeye değer olduğunu düşündüm. Aslında bu cevabın altındaki yorumda sunulan ve kullanıcı Pretty Cool tarafından ayrı bir cevap olarak netleştirilen noConflict çözümünü gerçekten seviyorum. Bazıları komut dosyaları değiştiğinde önyükleme araç ipucu ile ilgili sorunları bildirdi. Ancak ben bootstrap çünkü ihtiyacım yoktu gibi araç ipucu olmadan jquery UI indirdim çünkü bu sorunu yaşamadım. Yani bu mesele benim için hiç ortaya çıkmadı.

Düzenleme - 22/07/2015 - karıştırmayın Do jquery-uiile jquery! Bootstrap'ın JavaScript'i daha önce jQuery'nin yüklenmesini gerektirirken, jQuery-UI'ye dayanmaz. Bu yüzden jquery-ui.jssonra yüklenebilir bootstrap.min.js, jquery.jsher zaman Bootstrap'ten önce yüklenmelidir.

Bu, en üstteki cevaba ilişkin bir yorumdur, ancak kendi cevabına değdiğini hissettim çünkü soruna cevap vermeme yardımcı oldu.

JQuery UI'den sonra Bootstrap'i bildirmek istiyorsanız (Bootstrap araç ipucunu kullanmak istediğim için yaptım), aşağıdakileri (sonra bildirdim) bildirmek $(document).readydüğmenin tekrar görünmesine izin verecektir ( 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

Bu jQuery gemi yolunda bir hata gibi görünüyor. Olaydaki bazı dom manipülasyonuyla manuel olarak düzeltebilirsiniz Dialog Open:

$("#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>");
    }
});

Bu durum 1.10'da bozuk olarak bildirildi

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

phillip 29 Ocak 2013, 07:36 dedi: CDN sürümlerinde, iletişim kapat düğmesi eksik. Sadece düğme etiketi var, span ui-icon yanlış.

Önceki sürümü indirdim ve kapat düğmesi için X geri geliyor.

Üç düzeltme buldum:

1. Önce bootsrap'i yükleyebilirsiniz. Ve onlar jquery-ui yükler. Ama bu iyi bir fikir değil. Çünkü konsolda hatalar göreceksiniz.

2. Bu:

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

   yardım eder. Ancak diğer düğmeler korkunç görünüyor. Ve şimdi önyükleme düğmelerimiz yok.

3. Sadece bootsrap stillerini kullanmak istiyorum ve ayrıca bir simgeyle kapat düğmesine sahip olmak istiyorum. Aşağıdaki işlemleri yaptım:

   Düzeltmeden sonra düğme nasıl görünüyor?

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

Ben de aynı sorunu yaşadım, Belki bunu zaten kontrol ettiniz ama sadece "images" klasörünü jquery-ui.css ile aynı konuma yerleştirerek çözdünüz.

Aynı sorunla sıkışıp kaldım ve okuduktan ve yukarıdaki tüm önerileri denedikten sonra bu resmi manuel olarak değiştirmeye çalıştım ( burada bulabilirsiniz ) indirdikten sonra benim app ve voilá görüntüleri klasörüne kaydetmeye çalıştım, sorun çözüldü!

İşte CSS:

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

JQuery UI 1.8.17 kullanıyorum ve aynı sorunu yaşadım, ayrıca başlık çubuğu rengi de dahil olmak üzere sayfadaki şeylere uygulanan ek css stil sayfaları vardı. Diğer sorunları önlemek için, aşağıdaki kodu kullanarak tam kullanıcı arabirimi öğelerini hedefledim:

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

Sonra iletişim kutusunun özelliklerine bir kapatma düğmesi ekledim: ...

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

Nedense her iki maddeyi de hedeflemem gerekiyordu ama işe yarıyor!

Bu sorunun eski olduğunu biliyorum ama jquery-ui v1.12.0 ile bu sorunu yaşadım.

Kısa Cevap çalışmadığından emin olun ve size adlı bir klasör var Imagesiçinde aynı yerde var jquery-ui.min.css. İmages klasörü, jquery-ui'nin yeni indirilmesiyle bulunan resimleri içermelidir

Uzun cevap

Benim sorunum tüm css dosyalarımı tek bir dosyada birleştirmek için gulp kullanıyorum. Bunu yaptığımda, konumunu değiştiriyorum jquery-ui.min.css. İletişim kutusunun css kodu Imagesaynı dizinde çağrılan bir klasör bekler ve bu klasörün içinde varsayılan simgeleri bekler. gulp görüntüleri yeni hedefe kopyalamadığı için x simgesini göstermiyordu.

Referans olarak, ben bu şekilde john-macintyre'nin önerisine göre açık yöntemi genişlettim:

$.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 işlevi içindeki dialog () öğesini çağırıyorsanız, aşağıdaki önyükleme düğmesi çakışma kodlarını kullanabilirsiniz

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

Bilge bir adam bana bir zamanlar yardım etti.

Bulunan klasörde jquery-ui.css, "images" adlı bir klasör oluşturun ve aşağıdaki dosyaları bu klasöre kopyalayın:

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

ve kapat simgesi görünür.

Sadece eksikleri ekleyin:

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

Ben de bu sorunu yaşıyorum. Kapat düğmesi için eklenen kod:

Düğmede style = "display: none:" öğesini kapattığımda, kapat düğmesi görünür. Yani bir sebepten ötürü: hiçbiri; ayarlanıyor ve bunu nasıl kontrol edeceğimi göremiyorum. Bunu ele almanın başka bir yolu da ekranı geçersiz kılmak olabilir: yok. Yine de nasıl yapılacağını göremiyorum.

KyleMit'in gönderdiği cevabın işe yaradığını, ancak farklı görünümlü bir X düğmesi yaptığını not ediyorum.

Bu sorunun, sayfalarımdaki tüm iletişim kutularını değil, yalnızca bazılarını etkilediğini de unutmayın. Bazı iletişim kutuları beklendiği gibi çalışır; diğerlerinin hiçbir başlığı yoktur (yani, başlığı içeren aralık boştur) Kapat düğmesi varken.

Bir şeyin ciddi şekilde yanlış olduğunu düşünüyorum ve 1.10.x için zaman olmayabilir.

Ancak daha fazla çalışmadan sonra, bazı durumlarda başlıkların düzgün bir şekilde ayarlanmadığını keşfettim ve düzelttikten sonra X kapatma düğmesinin olması gerektiği gibi yeniden belirdi.

Başlıkları şöyle ayarlıyordum:

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

Bu kimlik kodumda mevcut değil, ancak görünüşe göre ac-popup ve ui-dialog-title jquery tarafından oluşturuldu. Bir çeşit çamur. Ama dediğim gibi artık çalışmıyor ve bunun yerine aşağıdakileri kullanmak zorundayım:

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

Bunu yaptıktan sonra, eksik düğme sorunu daha iyi görünüyor, ancak kesinlikle ilgili olup olmadıklarından emin değilim.

Hatta jquery-ui sonra bootstrap yükleme, bunu kullanarak düzeltmek başardı:

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