Latest web development tutorials

jQuery UI contoh - Dialog (Dialog)

Terbuka konten di overlay interaktif.

Untuk rincian lebih lanjut tentang komponen dialog, lihat dokumentasi API komponen dialog (Dialog Widget) .

Fungsi standar

Jendela dialog dasar diposisikan dalam zona melihat di lapisan penutup, melalui konten iframe dan halaman terpisah (seperti memilih elemen). Ini terdiri dari bar judul dan komposisi area konten, dan dapat dipindahkan, diubah ukurannya, default dengan icon 'x' untuk menutup.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Dialog (Dialog) - Fungsi standar </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#dialog") .dialog ();
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "dialog" title = "dialog dasar">
  <P> ini adalah kotak dialog default untuk menampilkan informasi. jendela dialog dapat dipindahkan, diubah ukurannya, default dengan icon 'x' untuk menutup. </ P>
</ Div>
 
 
</ Body>
</ Html>

animasi

Anda dapat menentukan efek khusus menampilkan / menyembunyikan properti animasi untuk menampilkan kotak dialog. Anda harus merujuk ke file terpisah untuk efek yang ingin Anda gunakan efek khusus.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Dialog (Dialog) - Anime </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#dialog") .dialog ({
      AutoOpen: palsu,
      Acara: {
        Efek: "buta",
        Durasi: 1000
      },
      menyembunyikan: {
        Efek: "meledak",
        Durasi: 1000
      }
    });
 
    $ ( "#opener") .Klik (Fungsi () {
      $ ( "#dialog") .dialog ( "Open");
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "dialog" title = "dialog Basic">
  <P> Ini adalah tampilan animasi dari kotak dialog, untuk menampilkan informasi. jendela dialog dapat dipindahkan, diubah ukurannya, default dengan icon 'x' untuk menutup. </ P>
</ Div>
 
<Tombol id = "pembuka"> Buka dialog </ button>
 
 
</ Body>
</ Html>

modus dasar

Modal sisa dialog dari halaman untuk mencegah pengguna di luar kotak dialog untuk berinteraksi sampai kotak dialog ditutup.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Dialog (Dialog) - modal dasar </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "# Dialog-modal") .dialog ({
      height: 140,
      modal: true
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "dialog-modal" title = "dasar modal dialog">
  <P> Add-modal layar overlay, membuat tampilan dialog lebih menonjol karena meredup membiarkan konten lainnya pada halaman. </ P>
</ Div>
 
<P> sed vel diam id libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, Arcu felis ultricies neque, sit amet auctor elit eros LECTUS a. </ p>
 
 
</ Body>
</ Html>

konfirmasi modal

Mengkonfirmasi tindakan destruktif juga dimungkinkan akal. Pengaturan modal pilihan untuk benar, dan dengan buttons untuk menetapkan pengguna pilihan tindakan primer dan sekunder.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Dialog (Dialog) - konfirmasi modal </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "# Dialog-confirm") .dialog ({
      resizable: palsu,
      height: 140,
      modal: benar,
      Tombol: {
        "Hapus semua item": function () {
          $ (Ini) .dialog ( "dekat");
        },
        Batal: function () {
          $ (Ini) .dialog ( "dekat");
        }
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "dialog-confirm" title = "Kosongkan sampah?">
  <P> <span class = "ui-icon ui-icon-peringatan" style = "float: left; margin: 0 7px 20px 0;"> </ span> item ini akan dihapus secara permanen dan tidak dapat dipulihkan. Apakah Anda yakin? </ P>
</ Div>
 
<P> sed vel diam id libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, Arcu felis ultricies neque, sit amet auctor elit eros LECTUS a. </ p>
 
 
</ Body>
</ Html>

Form modal

kotak dialog modal untuk meminta pengguna untuk memasukkan data dalam proses multi-langkah. Tertanam dalam tag form area konten mengatur modal opsi untuk benar, dan dengan buttons untuk menetapkan pengguna pilihan tindakan primer dan sekunder.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Dialog (Dialog) - Modal Bentuk </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
    body {font-size: 62,5%;}
    label, masukan {display: block;}
    input.text {margin-bottom: 12px; width: 95%; padding: .4em;}
    fieldset {padding: 0; border: 0; margin-top: 25px;}
    h1 {font-size: 1.2em; margin: .6em 0;}
    div # pengguna-berisi {width: 350px; margin: 20px 0;}
    div # pengguna-berisi tabel {margin: 1em 0; border-collapse: collapse; width: 100%;}
    div # pengguna-berisi tabel td, div # pengguna-berisi tabel th {border: #eee padat 1px; padding: 10px .6em; text-align: left;}
    Ui-dialog Ui-negara-kesalahan {padding: .3em;}
    .validateTips {border: 1px solid transparan; padding: 0.3em;}
  </ Style>
  <Script>
  $ (Fungsi () {
    Nama var = $ ( "#name"),
      email = $ ( "#email"),
      password = $ ( "# password"),
      Allfields = $ ([]) .add (nama) .add (email) .add (password),
      kiat = $ ( ".validateTips");
 
    updateTips fungsi (t) {
      Tips
        .text (t)
        .addClass ( "ui-negara-highlight");
      setTimeout (function () {
        tips.removeClass ( "ui-negara-highlight", 1500);
      }, 500);
    }
 
    Fungsi checkLength (o, n, min, max) {
      jika (o.val (). length> max || o.val (). length <min) {
        o.addClass ( "ui-negara-error");
        updateTips ( "" + n + "harus di bawah" +
          min + "antara." "dan" + max +);
        return false;
      } Lain {
        kembali benar;
      }
    }
 
    Fungsi checkRegexp (o, regexp, n) {
      if (! (regexp.test (o.val ()))) {
        o.addClass ( "ui-negara-error");
        updateTips (n);
        return false;
      } Lain {
        kembali benar;
      }
    }
 
    $ ( "# Dialog-bentuk") .dialog ({
      AutoOpen: palsu,
      height: 300,
      width: 350,
      modal: benar,
      Tombol: {
        "Buat akun": function () {
          var bValid = true;
          allFields.removeClass ( "ui-negara-error");
 
          bValid = bValid && checkLength (nama, "username", 3, 16);
          bValid = bValid && checkLength (email, "email", 6, 80);
          bValid = bValid && checkLength (password, "password", 5, 16);
 
          bValid = bValid && checkRegexp (nama, / ^ [az] ([0-9a-z _]) + $ / i, "nama pengguna harus az, 0-9, garis bawah, dan harus dimulai dengan huruf a.");
          // Dari jquery.validate.js (oleh Joern), disumbangkan oleh Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          bValid = bValid && checkRegexp (email, / ^ ((([az] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |} !? ~] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \!? ^ _` {\ |} ~] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) +) *) | ((\ x22) ((((\ x20 | \ x09) * ( \ X0D \ x0a)) (\ x20 |? \ x09) +) (([\ x01- \ X 08 \ x0b \ x0c \ x0e- \ x1f \ x7f] |? \ X21 | [\ x23- \ x5b] | [ \ x5d- \ x7e] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (\\ ([\ x01- \ x09 \ x0b \ x0c \ x0d- \ x7f] | [\ u00A0 ? - \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF])))) * (((\ x20 | \ x09) * (\ X0D \ x0a)) (\ x20 | \ x09) +) (\ x22? ))) @ ((([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ d | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az] |. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |.?. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / i, "misalnya ui @ jquery.com ");
          bValid = bValid && checkRegexp (password, / ^ ([0-9a-zA-Z]) +, $ / "field password hanya diperbolehkan: az 0-9");
 
          jika (bValid) {
            $ ( "#users Tbody") Append ( "<tr>" +
              "<Td>" + name.val () + "</ td>" +
              "<Td>" + email.val () + "</ td>" +
              "<Td>" + password.val () + "</ td>" +
            "</ Tr>");
            $ (Ini) .dialog ( "dekat");
          }
        },
        Batal: function () {
          $ (Ini) .dialog ( "dekat");
        }
      },
      dekat: function () {
        allFields.val ( "") .removeClass ( "ui-negara-error");
      }
    });
 
    $ ( "# Buat pengguna")
      .button ()
      .Klik (function () {
        $ ( "# Dialog-bentuk") .dialog ( "open");
      });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "dialog-bentuk" title = "Create New User">
  <P class = "validateTips"> semua kolom formulir yang diperlukan. </ P>
 
  <Form>
  <Fieldset>
    <Label untuk = "nama"> Nama </ label>
    <Input type = "text" name = "nama" id = "nama" class = "text ui-widget-konten ui-sudut-semua">
    <Label untuk = "email"> kotak surat </ label>
    <Input type = "text" name = "email" id = "email" value = "" class = "text ui-widget-konten ui-sudut-semua">
    <Label untuk = "password"> Sandi </ label>
    <Input type = "password" name = "password" id = "password" value = "" class = "text ui-widget-konten ui-sudut-semua">
  </ Fieldset>
  </ Form>
</ Div>
 
 
<Div id = "pengguna-berisi" class = "ui-widget">
  <H1> pengguna yang sudah ada: </ h1>
  <Table id = "pengguna" class = "ui-widget ui-widget-content">
    <Thead>
      <Class Tr = "ui-widget-header">
        <Th> Nama </ th>
        <Th> mailbox </ th>
        <Th> sandi </ th>
      </ Tr>
    </ Thead>
    <Tbody>
      <Tr>
        <Td> John Doe </ td>
        <Td> [email protected] </ td>
        <Td> johndoe1 </ td>
      </ Tr>
    </ Tbody>
  </ Table>
</ Div>
<Tombol id = "membuat-friendly"> Buat pengguna baru </ button>
 
 
</ Body>
</ Html>

pesan modal

kotak dialog modal untuk mengkonfirmasi informasi dan tindakan sebelum tindakan berikutnya dijalankan. Pengaturan modal pilihan untuk benar, dan dengan buttons untuk menentukan pilihan tindakan utama (Ok).

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI Dialog (Dialog) - pesan modal </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "# Dialog-pesan") .dialog ({
      modal: benar,
      Tombol: {
        Ok: function () {
          $ (Ini) .dialog ( "dekat");
        }
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "dialog-pesan" title = "download lengkap">
  <P>
    <Span class = "ui-icon ui-icon-lingkaran-check" style = "float: left; margin: 0 7px 50px 0;"> </ span>
    File Anda telah berhasil didownload ke folder.
  </ P>
  <P>
    Penggunaan saat ini ruang penyimpanan <b> 36% </ b>.
  </ P>
</ Div>
 
<P> sed vel diam id libero <a href="http://www.w3cschool.cc"> rutrum convallis </a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, Arcu felis ultricies neque, sit amet auctor elit eros LECTUS a. </ p>
 
 
</ Body>
</ Html>