javascript - jQuery UI Diyalog - kapatma simgesi eksik

Özel bir jQuery 1.10.3 teması kullanıyorum. Theme roller'dan her düz indirdim ve kasıtlı olarak hiçbir şeyi değiştirmedim.

Bir iletişim kutusu oluşturdum ve kapatma simgesinin olması gereken yerde 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>

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

DÜZENLE

Kodun farklı parçaları jQueryUI tarafından üretiliyor, ben tarafından değil, bu yüzden jqueryui js dosyasını düzenlemeden span etiketlerini ekleyemem, bu da normal işlevselliği sağlamak için kötü/gereksiz bir tercih gibi görünüyor.

İşte bu kodun o kısmını oluşturan 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);
        }
    }
});

Ne yapacağımı bilmiyorum ve yardıma ihtiyacım var.

Cevap #1

Buna biraz geç kaldım, ama aklınızı başınızdan alacağım, hazır mısınız?

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

Kelimenin tam anlamıyla, yerine şunu yapacak şekilde 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>

olur

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

:)

Düzenle - 26/06/2015 - bu, aylar sonra bile ilgi çekmeye devam ediyor, bu yüzden bir düzenleme yapmanın değerli olduğunu düşündüm. Aslında, bu cevabın altındaki yorumda sunulan ve Pretty Cool kullanıcı tarafından ayrı bir cevap olarak açıklanan noConflict çözümünü gerçekten çok beğendim. Bazılarının, betikler değiştirildiğinde bootstrap tooltip ile ilgili sorunlar bildirdiğini belirtmişler. Ancak ben bu sorunu yaşamadım çünkü tooltip içermeyen jquery UI indirdim, bootstrap nedeniyle ihtiyacım yoktu. Bu yüzden bu sorun benim için hiç ortaya çıkmadı.

Düzenleme - 22/07/2015 - jquery-ui ile jquery karıştırmayın! Bootstrap'ın JavaScript'i jQuery'nin önceden yüklenmesini gerektirse de, jQuery-UI'ye dayanmaz. Yani jquery-ui.js bootstrap.min.js sonra yüklenebilirken, jquery.js her zaman Bootstrap'tan önce yüklenmesi gerekir.

Cevap #2

Bu, en iyi cevaba yapılan bir yorum, ama benim için problemi çözmeme yardımcı olduğu için kendi başına bir cevap değeri taşıdığını düşündüm.

JQuery arayüzünden sonra Bootstrap'ı ilan etmek istiyorsanız (ben bunu yaptım çünkü Bootstrap araç ipucunu kullanmak istedim), aşağıdaki açıklamayı yapmak ($ (document).ready sonra ilan ettim) düğmenin tekrar görünmesini sağlar (cevap https://stackoverflow.com/a/23428433/4660870'dan)

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Cevap #3

Bu, jQuery'nin gönderme şeklindeki bir hata gibi görünüyor. Dialog Open etkinliğinde biraz dom manipülasyonu ile manuel olarak düzeltebilirsiniz:

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

Cevap #4

Üç çözüm buldum:

  1. Önce sadece bootstrap'i yükleyebilirsiniz. Ve sonra jquery-ui'yi yükleyin. Ama bu iyi bir fikir değil. Çünkü konsolda hatalar göreceksiniz.

  2. Bu :

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

    yardım ediyor. Ama diğer düğmeler berbat görünüyor. Ve şimdi Bootstrap düğmelerimiz yok.

  3. Sadece Bootstrap stillerini kullanmak istiyorum ve ayrıca bir simgeye sahip bir kapatma düğmesi istiyorum. Şunu yaptım:

    Düzeltmeden sonra kapatma butonu 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;
}

Cevap #5

Bu 1.10'da bozulduğu bildirilmiştir

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

phillip, 29 Ocak 2013'te saat 07:36'da şöyle dedi: CDN versiyonlarında diyalog kapatma düğmesi eksik. Sadece düğme etiketi var, span kullanıcı arayüzü ikonu missong.

Önceki sürümü indirdim ve kapatma düğmesi için X yeniden görünüyor.

İlgili makaleler