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

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

1. 概要

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

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

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

次は、ボタンとダイアログ ボックスを含む単純な 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 コードです:

  
    
    
    
    
    
  

  
    删除
    

      
确定要删除吗？
    
  

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

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