jquery を使用してプロンプトボックスを作成する方法を説明する例-フロントエンドQ&A-php.cn

jquery を使用してプロンプトボックスを作成する方法を説明する例

PHPz

リリース： 2023-04-07 13:53:51

オリジナル

660 人が閲覧しました

インターネットの普及に伴い、開発に jQuery を使用する Web サイトが増えています。 jQuery では、プロンプトボックスは非常に実用的な機能です。この記事では、jQuery を使用して if を含むプロンプトボックスを作成する方法を紹介します。

1. 概要

多くの Web サイトでは、ボタンまたはリンクをクリックすると、ダイアログボックスがポップアップして、これを実行するかどうかを確認するプロンプトボックスが表示されます。このようなプロンプトボックスには通常、「OK」と「キャンセル」の 2 つのボタンが含まれており、ユーザーは操作を続行するかどうかを選択できます。

jQuery では、with if を使用してこの種のプロンプトボックスを簡単に実装できます。まず jQuery UI ライブラリを使用し、次にそのライブラリ内のダイアログコントロールを使用してダイアログボックスを作成する必要があります。

2. ダイアログボックスの作成

次は、ボタンとダイアログボックスを含む単純な HTML ページです:

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

ログイン後にコピー

ご覧のとおり、I を導入しました。 jQuery と jQuery UI ライブラリを使用して、ボタンとダイアログボックスを作成しました。ダイアログボックスの内容にはプロンプトテキストが 1 つだけあり、そのタイトルは「プロンプト」です。

次に、jQuery のダイアログコントロールを使用して、ダイアログボックスを表示できるようにする必要があります。具体的なメソッドは次のとおりです。

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

ログイン後にコピー

このコードでは、まず、dialog() メソッドを呼び出してダイアログボックスを作成し、設定します。このうち、autoOpen: false は初期化時にダイアログボックスが閉じていることを意味し、modal: true はダイアログボックスがモーダルボックスであることを意味します（つまり、ダイアログボックスが表示された後、背景が灰色になり操作できなくなります）。ボタンオプションは、ボックス内のダイアログボックスボタンを定義するために使用されます。この例では、「OK」と「キャンセル」の 2 つのボタンを定義し、ユーザーがこれらのボタンをクリックしたときに実行されるアクションを指定します。

コードの最後で、クリックイベントをボタンにバインドします。ユーザーがボタンをクリックすると、ダイアログボックスが表示されます。

3. 完全なコード

以下は、参照用の完全な HTML および JavaScript コードです:

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

ログイン後にコピー

上記は、jQuery を使用してプロンプトボックスを作成する内容全体です。はいかいいえで。この記事が読者にとって役立つことを願っています。

以上がjquery を使用してプロンプトボックスを作成する方法を説明する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。