jquery UI iletişim kutusu: başlık çubuğu olmadan nasıl başlatılır?

Başlık çubuğu olmadan bir jQuery UI İletişim Kutusu açmak mümkün müdür?

Bence en iyi çözüm seçeneği kullanmak dialogClass.

Jquery UI dokümanlarından bir alıntı:

init sırasında: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

ya da init sonra istiyorum. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Bu nedenle, dialogClass = 'noTitleStuff' ve css gibi bazı iletişim kutuları yarattım:

.noTitleStuff .ui-dialog-titlebar {display:none}

çok basit !! ama önceki id-> class delme yöntemimin neden çalışmadığını düşünmek için 1 günümü aldım. Aslında .dialog()div yöntemini çağırdığınızda , dönüştürdüğünüz başka bir div (gerçek diyalog div) ve muhtemelen div'ın bir 'kardeşi' çocuğu olur titlebar, bu yüzden ikincisini başlangıçtan başlayarak bulmak çok zordur.

Başlık çubuğunu dinamik olarak kaldırmak için bir düzeltme buldum.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Bu, iletişim kutusu oluşturulduktan sonra 'ui-dialog-titlebar' sınıfındaki tüm öğeleri kaldıracaktır.

CSS ile gizleyebileceğinizi düşünüyorum:

.ui-dialog-titlebar {
    display: none;
}

Alternatif olarak, aşağıdaki dialogClassseçenekle belirli iletişim kutularına uygulayabilirsiniz :

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

İletişim Kutusunu " Temanın " bölümüne bakın. Yukarıdaki öneri, yeni bir yöntem lehine çıkmış gibidialogClass görünen seçeneği kullanıyor .

Bunu projelerimde kullanıyorum

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Bu benim için çalıştı:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Kullanmayı deneyin

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Bu, tüm iletişim kutularının başlıklarını gizler

$(".ui-dialog-titlebar").hide();

Aslında, iletişim kutusunu widgetdoğrudan kullanarak başka bir yol daha var :

İletişim Pencere Öğesi'ni bu şekilde alabilirsiniz.

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

ve sonra yap

$dlgWidget.find(".ui-dialog-titlebar").hide();

titlebaryalnızca o iletişim kutusunun içinde gizlemek için

ve kod tek bir satırda (zincirleme gibi):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Diyaloga bu şekilde ekstra bir sınıf eklemenize gerek yok, sadece doğrudan gidin. Benim için iyi çalışıyor.

Ben daha verimli ve daha okunabilir, kullanımı bulmak açık olayı ve oradan başlık çubuğunu gizlemek. Sayfa-global sınıf adı aramalarını kullanmayı sevmiyorum.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Basit.

İletişim kutusunu başlatırken dialogClass kullandıktan sonra başlık çubuğunu gizlemek için jquery kullanabilirsiniz.

init sırasında:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Bu yöntemi kullanarak, css dosyanızı değiştirmeniz gerekmez ve bu da dinamiktir.

JQuery widget'larını geçersiz kılmayı seviyorum.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Artık başlık çubuğunu göstermek isteyip istemediğinizi ayarlayabilirsiniz

   $('#mydialog').dialog({
      headerVisible: false // or true
});

Birden fazla iletişim kutunuz varsa, bunu kullanabilirsiniz:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

Bu, bunu yapmanın en kolay yoludur ve yalnızca belirli bir iletişim kutusundaki başlık çubuğunu kaldırır;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

İletişim Kutusu başlık çubuğunu gizlerken keşfettiğim tek şey, ekran hiçbiri olmasa bile, ekran okuyucular hala onu alıp okuyacak olmasıdır. Kendi başlık çubuğunuzu zaten eklediyseniz, her ikisini de okuyarak karışıklığa neden olur.

Ne yaptığımı kullanarak DOM kaldırıldı $(selector).remove(). Artık ekran okuyucuları (ve diğer her biri) artık görünmeyeceği için bunu görmeyecek.

Bunu dene

$("#ui-dialog-title-divid").parent().hide();

dividkarşılık gelen ile değiştirid

Bu sonraki form bana sorunu çözdü.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

Bunu yapmanın en temiz yolunun, diyalog widget'ı eksi başlık barkodundan oluşan yeni bir myDialog widget'ı oluşturmak olacağını düşünüyorum. Başlık barkodunun eksize edilmesi açıktır.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Bu, iletişim kutusu başlık çubuğunu gizlemem için işe yaradı:

$(".ui-dialog-titlebar" ).css("display", "none" );

Bu nasıl yapılabilir.

Temalar klasörüne gidin -> base -> open jquery.ui.dialog.css

bulmak

Aşağıdakilerden

titleBar'ı görüntülemek istemiyorsanız, display: none'ı aşağıdaki gibi yaptığım gibi ayarlayın.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly de unvan için.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Şimdi kapat düğmesi geliyor da hiçbirini ayarlayabilirsiniz veya ayarlayabilirsiniz

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

Çok fazla arama yaptım ama o zaman aklımda bu fikri aldım. Ancak bu, tüm uygulamanın kapatma düğmesi, iletişim kutusu başlık çubuğu içermemesine neden olur, ancak jquery kullanarak ve jquery üzerinden css ekleyip ayarlayarak bunun üstesinden gelebilirsiniz.

işte bunun için sözdizimi

$(".specificclass").css({display:normal})

Benim için hala yeniden boyutlandırılabilir köşeleri kullanmak istedim, sadece çapraz çizgileri görmek istemedim. kullandım

$(".ui-resizable-handle").css("opacity","0");

Sadece yanlış soruya yorum yaptığımı fark ettim. Benim adıma yaşarken :(

JQuery UI belgelerinden çözüm denediniz mi? https://api.jqueryui.com/dialog/#method-open

Dediği gibi böyle yapabilirsin ...

CSS'de:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

JS'de:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

Kapat simgesiyle çubuğu yukarıda açıklanan tekniklerle kaldırabilir ve ardından kendiniz bir kapatma simgesi ekleyebilirsiniz.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// bu div'i içeriğinizi tutan div'e ekleyin

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

jquery-ui.js (benim durumumda jquery-ui-1.10.3.custom.js) adresine gidin ve this._createTitlebar () öğesini arayın; ve yorum yapın.

şimdi herhangi birinin iletişim kutusu başlıklarla birlikte görünecektir. Başlığı özelleştirmek istiyorsanız _createTitlebar () öğesine gidin; ve içindeki kodu düzenleyin.

tarafından