dialog jquery UI: bagaimana cara menginisialisasi tanpa bilah judul?

Apakah mungkin untuk membuka Dialog UI jQuery tanpa bilah judul?

Saya pikir solusi terbaik adalah dengan menggunakan opsi dialogClass.

Ekstrak dari jquery UI docs:

selama init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

atau jika Anda ingin setelah init. :

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

Jadi saya membuat beberapa dialog dengan opsi dialogClass = 'noTitleStuff' dan css seperti itu:

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

terlalu sederhana !! tapi saya butuh 1 hari untuk memikirkan mengapa metode pengeboran kelas id saya sebelumnya tidak berfungsi. Bahkan ketika Anda memanggil .dialog()metode div yang Anda ubah menjadi anak dari div lain (dialog dialog yang sebenarnya) dan mungkin 'saudara' dari titlebardiv, jadi sangat sulit untuk mencoba menemukan yang terakhir mulai dari yang sebelumnya.

Saya menemukan perbaikan untuk menghapus bilah judul secara dinamis.

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

Ini akan menghapus semua elemen dengan kelas 'ui-dialog-titlebar' setelah kotak dialog diberikan.

Saya yakin Anda bisa menyembunyikannya dengan CSS:

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

Atau, Anda dapat menerapkan ini pada dialog tertentu dengan dialogClassopsi:

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

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

Periksa " Theming " Dialog. Saran di atas memanfaatkan dialogClassopsi, yang tampaknya ada di jalan keluar yang mendukung metode baru.

Saya menggunakan ini dalam proyek saya

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

Ini bekerja untuk saya:

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

Coba gunakan

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

Ini akan menyembunyikan semua judul dialog

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

Sebenarnya masih ada cara lain untuk melakukannya, menggunakan dialog widgetlangsung:

Anda bisa mendapatkan Widget Dialog demikian

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

dan kemudian lakukan

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

untuk menyembunyikan titlebardialog itu saja

dan dalam satu baris kode (saya suka chaining):

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

Tidak perlu menambahkan kelas tambahan ke dialog dengan cara ini, langsung saja lakukan. Bekerja dengan baik untuk saya.

Saya merasa lebih efisien, dan lebih mudah dibaca, untuk menggunakan acara terbuka , dan menyembunyikan bilah judul dari sana. Saya tidak suka menggunakan pencarian nama kelas global-halaman.

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

Sederhana.

Anda dapat menggunakan jquery untuk menyembunyikan bilah judul setelah menggunakan dialogClass saat menginisialisasi dialog.

selama init:

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

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

Dengan menggunakan metode ini, Anda tidak perlu mengubah file css Anda, dan ini juga dinamis.

Saya suka mengganti widget jQuery.

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

Jadi sekarang Anda dapat mengatur apakah Anda ingin menampilkan bilah judul atau tidak

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

Jika Anda memiliki banyak dialog, Anda dapat menggunakan ini:

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

Ini adalah cara termudah untuk melakukannya dan itu hanya akan menghapus batang judul dalam satu dialog tertentu;

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

Satu hal yang saya temukan ketika menyembunyikan bilah judul Dialog adalah bahwa, meskipun tampilan tidak ada, pembaca layar masih mengambilnya dan akan membacanya. Jika Anda sudah menambahkan bilah judul Anda sendiri, itu akan membaca keduanya, menyebabkan kebingungan.

Apa yang saya lakukan dihapus dari menggunakan DOM $(selector).remove(). Sekarang pembaca layar (dan semua orang lain) tidak akan melihatnya karena sudah tidak ada.

Coba ini

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

ganti dividdengan yang sesuaiid

Bentuk selanjutnya ini memperbaiki saya.

$('#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>

Saya pikir cara paling bersih untuk melakukannya adalah membuat widget myDialog baru, yang terdiri dari widget dialog minus kode batang judul. Menekan kode batang judul terlihat langsung.

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

Ini berhasil bagi saya untuk menyembunyikan bilah judul kotak dialog:

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

Inilah yang bisa dilakukan.

Buka folder tema -> basis -> buka jquery.ui.dialog.css

Temukan

Berikut ini

jika Anda tidak ingin menampilkan titleBar maka cukup atur display: tidak seperti yang saya lakukan di berikut ini.

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

Samil untuk judul juga.

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

Sekarang, tutup tombol Anda juga dapat mengaturnya tidak ada atau Anda dapat mengaturnya

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

}

Saya melakukan banyak pencarian tetapi tidak ada yang muncul di pikiran saya. Namun ini akan memengaruhi seluruh aplikasi untuk tidak memiliki tombol tutup, bilah judul untuk dialog, tetapi Anda juga dapat mengatasinya dengan menggunakan jquery dan menambahkan serta mengatur css melalui jquery

di sini adalah sintaks untuk ini

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

Bagi saya, saya masih ingin menggunakan sudut yang cukup besar, hanya saja tidak ingin jadi melihat garis diagonal. Saya menggunakan

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

Baru sadar saya mengomentari pertanyaan yang salah. Hidup sesuai dengan nama saya :(

Sudahkah Anda mencoba solusi dari jQuery UI docs? https://api.jqueryui.com/dialog/#method-open

Seperti dikatakan Anda dapat melakukan seperti ini ...

Dalam CSS:

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

Di JS:

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

Anda dapat menghapus bilah dengan ikon tutup dengan teknik yang dijelaskan di atas dan kemudian menambahkan ikon tutup sendiri.

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

// tambahkan div ini ke div yang menyimpan konten Anda

JS:

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

buka jquery-ui.js Anda (dalam kasus saya jquery-ui-1.10.3.custom.js) dan cari this._createTitlebar (); dan berkomentar.

sekarang siapa pun dialog Anda akan muncul dengan tajuk. Jika Anda ingin mengkustomisasi header, buka _createTitlebar (); dan edit kode di dalamnya.

oleh