Contoh untuk menerangkan cara menggunakan jquery untuk membuat kotak gesaan dengan sama ada-Soal Jawab bahagian hadapan-php.cn

Contoh untuk menerangkan cara menggunakan jquery untuk membuat kotak gesaan dengan sama ada

PHPz

Lepaskan： 2023-04-07 13:53:51

asal

643 orang telah melayarinya

Dengan populariti Internet, semakin banyak laman web mula menggunakan jQuery untuk pembangunan. Dalam jQuery, kotak gesaan adalah fungsi yang sangat praktikal. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencipta kotak gesaan dengan sama ada.

1. Gambaran Keseluruhan

Dalam kebanyakan tapak web, kami sering melihat kotak gesaan sedemikian: apabila kami mengklik butang atau pautan, kotak dialog akan muncul untuk menggesa kami sama ada Sahkan untuk melakukan ini. Kotak gesaan sedemikian biasanya mengandungi dua butang: "OK" dan "Batal", dan pengguna boleh memilih sama ada untuk meneruskan operasi.

Dalam jQuery, anda boleh melaksanakan kotak gesaan jenis ini dengan mudah sama ada. Mula-mula anda perlu menggunakan perpustakaan UI jQuery, dan kemudian gunakan kawalan dialog di dalamnya untuk mencipta kotak dialog.

2. Cipta kotak dialog

Berikut ialah halaman HTML ringkas, yang mengandungi butang dan kotak dialog:

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery 带是否的提示框</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  </head>
  <body>
    <button id="btn">删除</button>
    <div id="dialog-confirm" title="提示">
      <p>确定要删除吗？</p>
    </div>
  </body>
</html>

Salin selepas log masuk

Seperti yang anda lihat, kami berada di halaman jQuery yang diimport dan perpustakaan UI jQuery dan mencipta butang dan kotak dialog. Kandungan kotak dialog hanya mempunyai satu teks gesaan dan tajuknya ialah "Prompt".

Seterusnya, kita perlu menggunakan kawalan dialog jQuery untuk memaparkan kotak dialog. Kaedah khusus adalah seperti berikut:

$(document).ready(function() {
  $("#dialog-confirm").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确定": function() {
        // 执行删除操作
        // ...
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });

  $("#btn").click(function() {
    $("#dialog-confirm").dialog("open");
  });
});

Salin selepas log masuk

Dalam kod ini, kita mula-mula memanggil kaedah dialog() untuk mencipta kotak dialog dan mengkonfigurasinya. Antaranya, autoOpen: false bermaksud kotak dialog ditutup apabila dimulakan, modal: true bermaksud kotak dialog ialah kotak modal (iaitu selepas kotak dialog muncul, latar belakang akan menjadi kelabu dan tidak boleh dikendalikan), dan pilihan butang digunakan untuk menentukan butang kotak dialog dalam kotak. Dalam contoh ini, kami mentakrifkan dua butang, OK dan Batal, dan menentukan tindakan yang perlu dilakukan apabila pengguna mengklik butang ini.

Pada penghujung kod, kami mengikat acara klik pada butang Apabila pengguna mengklik butang, kotak dialog akan muncul.

3. Kod lengkap

Berikut ialah kod HTML dan JavaScript lengkap untuk rujukan anda:

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery 带是否的提示框</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#dialog-confirm").dialog({
          autoOpen: false,
          modal: true,
          buttons: {
            "确定": function() {
              // 执行删除操作
              // ...
              $(this).dialog("close");
            },
            "取消": function() {
              $(this).dialog("close");
            }
          }
        });

        $("#btn").click(function() {
          $("#dialog-confirm").dialog("open");
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">删除</button>
    <div id="dialog-confirm" title="提示">
      <p>确定要删除吗？</p>
    </div>
  </body>
</html>

Salin selepas log masuk

Perkara di atas adalah mengenai penggunaan jQuery untuk mencipta kotak gesaan dengan kandungan ya atau tidak. Semoga artikel ini dapat memberi manfaat kepada pembaca.

Atas ialah kandungan terperinci Contoh untuk menerangkan cara menggunakan jquery untuk membuat kotak gesaan dengan sama ada. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!