Latest web development tutorials

jQuery UI API - komponen dialog (Dialog Widget)

kategori

Widget (widget)

pemakaian

Keterangan: Konten Buka di hamparan interaktif.

Versi baru: 1.0

Dialog adalah jendela mengambang yang mencakup judul bar dan area konten. jendela dialog dapat dipindahkan, diubah ukurannya, default dengan icon 'x' untuk menutup.

Jika panjang konten melebihi ketinggian maksimum, bar gulir akan muncul secara otomatis.

Sebuah tombol bawah bar, dan mode overlay semi-transparan adalah umum untuk menambahkan opsi.

fokus

Ketika Anda membuka kotak dialog, fokus otomatis akan bergerak untuk memenuhi kriteria di bawah item pertama:

  1. Dengan autofocus elemen pertama dalam dialog properti
  2. Isi kotak dialog pertama dalam :tabbable elemen
  3. Panel pertama dalam tombol dialog :tabbable elemen
  4. kotak dialog, tombol Tutup
  5. Kotak dialog itu sendiri

Ketika terbuka, komponen dialog (Dialog Widget) memastikan kotak untuk beralih fokus antara elemen dengan tab, kotak dialog tidak termasuk unsur-unsur luar. dialog modal mencegah pengguna mengklik elemen tikus luar kotak dialog.

Ketika menutup dialog, fokus otomatis kembali ke kotak dialog sebelumnya terbuka pada fokus elemen.

Menyembunyikan tombol tutup

Dalam beberapa kasus, Anda mungkin ingin menyembunyikan tombol tutup, misalnya, sebuah panel tombol memiliki tombol untuk menutup kasus ini. Solusi terbaik adalah melalui CSS. Sebagai contoh, Anda dapat menentukan aturan sederhana, seperti: 

.no-dekat Ui-dialog-Titlebar-dekat {
  display: none;
}

Kemudian, Anda dapat menambahkan no-close , kelas untuk kotak dialog yang sewenang-wenang, digunakan untuk menyembunyikan tombol tutup: 

$ ( "#dialog") .dialog ({
  dialogClass: "no-dekat",
  Tombol: [
    {
      teks: "OK",
      klik: function () {
        $ (Ini) .dialog ( "dekat");
      }
    }
  ]
});

theming

komponen Dialog (Dialog Widget) menggunakan jQuery framework UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan kotak dialog untuk menentukan gaya, Anda dapat menggunakan berikut nama kelas CSS:

  • ui-dialog : wadah luar dialog.
    • ui-dialog-titlebar : kotak dialog berisi judul dan tombol tutup dari judul bar.
      • ui-dialog-title : teks judul Dialog sekitar kontainer.
      • ui-dialog-titlebar-close : tombol untuk menutup kotak dialog.
    • ui-dialog-content : konten dialog di sekitar kontainer. Ini juga merupakan bagian dari elemen diberi contoh.
    • ui-dialog-buttonpane : berisi panel tombol dialog. Hanya ketika set buttons ketika pilihan disajikan.
      • ui-dialog-buttonset : tombol sekitar kontainer.

Selain itu, ketika mengatur modal pilihan waktu, dengan ui-widget-overlay nama kelas elemen ditambahkan ke <body> .

mengandalkan

informasi tambahan

  • bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.

contoh

Sebuah sederhana jQuery UI Dialog (Dialog). 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> komponen dialog (Dialog Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Kepala>
<Body>
 
<Tombol id = "pembuka"> Buka dialog </ button>
<Div id = "dialog" title = "Dialog Judul"> Saya dialog </ div>
 
<Script>
$ ( "#dialog") .dialog ({AutoOpen: false});
$ ( "#opener") .Klik (Fungsi () {
  $ ( "#dialog") .dialog ( "Open");
});
</ Script>
 
</ Body>
</ Html>