Heim > Artikel > Web-Frontend > Beispiel zur Erläuterung, wie mit jquery ein Eingabeaufforderungsfeld mit „ob“ erstellt wird

Beispiel zur Erläuterung, wie mit jquery ein Eingabeaufforderungsfeld mit „ob“ erstellt wird

PHPzOriginal: 2023-04-07 09:25:51604Durchsuche

Mit der Popularität des Internets beginnen immer mehr Websites, jQuery für die Entwicklung zu verwenden. In jQuery ist die Eingabeaufforderungsbox eine sehr praktische Funktion. In diesem Artikel wird erläutert, wie Sie mit jQuery ein Eingabeaufforderungsfeld mit „ob“ erstellen.

1. Übersicht

Auf vielen Websites sehen wir häufig eine solche Eingabeaufforderung: Wenn wir auf eine Schaltfläche oder einen Link klicken, wird ein Dialogfeld angezeigt, das uns fragt, ob wir den Vorgang wirklich ausführen möchten. Ein solches Eingabeaufforderungsfeld enthält im Allgemeinen zwei Schaltflächen: „OK“ und „Abbrechen“, und der Benutzer kann wählen, ob er den Vorgang fortsetzen möchte.

In jQuery können Sie diese Art von Eingabeaufforderungsfeld ganz einfach mit „ob“ implementieren. Zuerst müssen Sie die jQuery-UI-Bibliothek verwenden und dann das darin enthaltene Dialogsteuerelement verwenden, um ein Dialogfeld zu erstellen.

2. Erstellen Sie ein Dialogfeld

Das Folgende ist eine einfache HTML-Seite, die eine Schaltfläche und ein Dialogfeld enthält:

<!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>

Wie Sie sehen können, haben wir jQuery- und jQuery-UI-Bibliotheken in die Seite eingeführt und eine Schaltfläche und erstellt ein Dialogfeld. Der Inhalt des Dialogfelds enthält nur einen Eingabeaufforderungstext und der Titel lautet „Eingabeaufforderung“.

Als nächstes müssen wir das Dialogsteuerelement von jQuery verwenden, um das Dialogfeld anzuzeigen. Die spezifische Methode lautet wie folgt:

$(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");
  });
});

In diesem Code rufen wir zunächst die Methode dialog() auf, um ein Dialogfeld zu erstellen und zu konfigurieren. Unter diesen bedeutet autoOpen: false, dass das Dialogfeld bei der Initialisierung geschlossen wird, modal: true bedeutet, dass das Dialogfeld ein modales Feld ist (dh nachdem das Dialogfeld angezeigt wird, wird der Hintergrund grau und kann nicht bedient werden). und die Schaltflächenoption wird verwendet, um die Dialogbox-Schaltfläche im Feld zu definieren. In diesem Beispiel definieren wir zwei Schaltflächen, „OK“ und „Abbrechen“, und geben die Aktionen an, die ausgeführt werden sollen, wenn der Benutzer auf diese Schaltflächen klickt.

Am Ende des Codes binden wir ein Klickereignis an die Schaltfläche. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Dialogfeld angezeigt.

3. Vollständiger Code

Das Folgende ist der vollständige HTML- und JavaScript-Code als Referenz:

<!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>

Das Obige ist der gesamte Inhalt der Verwendung von jQuery zum Erstellen eines Eingabeaufforderungsfelds mit einem Ja oder Nein. Ich hoffe, dieser Artikel kann den Lesern hilfreich sein.

Das obige ist der detaillierte Inhalt vonBeispiel zur Erläuterung, wie mit jquery ein Eingabeaufforderungsfeld mit „ob“ erstellt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html 事件 ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Analyse zum Ändern von Attributen in der JQuery-BenutzeroberflächeNächster Artikel：Eine kurze Analyse zum Ändern von Attributen in der JQuery-Benutzeroberfläche

In Verbindung stehende Artikel

Mehr sehen