jQueryダイアログコンポーネントのフォーカスを設定する方法

Web 開発では、ポップアップ ウィンドウは、ユーザーが現在のページから離れることなく複数のタスクを同時に実行できるようにする一般的なコンポーネントです。中でも、jQuery Dialog コンポーネントは広く使用されており、非常に柔軟で、さまざまな属性をカスタマイズしてポップアップ ウィンドウをより効果的にすることができます。この記事では、jQuery ダイアログ コンポーネントのフォーカスを設定する方法に焦点を当てます。

1. jQuery ダイアログ コンポーネントの基本概要

jQuery ダイアログ コンポーネントを使用する前に、いくつかの基本概念を理解する必要があります。 jQuery Dialog は、jQuery ライブラリをベースにしたプラグインで、主な機能は、プロンプト ボックスやダイアログ ボックスなどのポップアップ ウィンドウを生成することです。ポップアップインターフェイスは優れた視覚効果を備えており、ユーザーはより直感的に操作できます。

一般に、jQuery ライブラリと Dialog プラグインを HTML ページに導入する必要があります。

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

導入が完了すると、jQuery Dialog コンポーネントを問題なく使用できるようになります。以下に、簡単なポップアップ ウィンドウを作成する方法を示します。

2. シンプルな jQuery ダイアログ ポップアップ ウィンドウを作成する方法

jQuery ダイアログ ポップアップ ウィンドウを作成する前に、次のようなポップアップ ウィンドウのコンテンツを検討する必要があります。タイトル、メッセージ、ボタン。以下は、ポップアップ ウィンドウの簡単な例です。

$(function() {
  $("#dialog-message").dialog({
    modal: true,   // 是否模态弹窗
    resizable: false,   // 是否可以拖放调整弹窗大小
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      }
    }
  });
});

まず、コード内のいくつかの属性を理解します。

• modal: ポップかどうか-up window はモーダルです。true の場合、他の操作はできません。
• resizable: ポップアップ ウィンドウをドラッグ アンド ドロップでサイズ変更できるかどうか。
• buttons: メソッド実行ボタンのオブジェクト リテラル。ここには「OK」ボタンが 1 つだけあります。

このうち、$("#dialog-message") は、ポップアップ コンテンツを運ぶために HTML コード内に作成した空の div 要素です。 jQuery コードでは、$("#dialog-message").dialog() メソッドを使用してポップアップ ウィンドウを生成し、ポップアップ ウィンドウのいくつかのプロパティを設定します。

3. jQuery ダイアログ ポップアップ ウィンドウのフォーカスを設定する方法

デフォルトでは、jQuery ダイアログ ポップアップ ウィンドウのフォーカスは最初に最初の入力ボックスまたはボタンにフォーカスされます。ボタン。ただし、場合によっては、ユーザーが操作しやすいように、フォーカス位置を手動で設定する必要があります。では、jQuery ダイアログ ポップアップ ウィンドウのフォーカスを設定するにはどうすればよいでしょうか?

jQuery ダイアログ ポップアップ ウィンドウのフォーカスを設定するには、ポップアップ ウィンドウが表示された直後に focus() メソッドを呼び出す必要があります。このメソッドを通じて、ポップアップ ウィンドウ内の要素を指定してフォーカスを受け取ることができます。以下はサンプル コード スニペットです:

$(function() {
  $("#dialog-message").dialog({
    modal: true,
    resizable: false,
    buttons: {
      "确定": function() {
        $(this).dialog("close");
      }
    },
    open: function(event, ui) {
      // 将焦点设置到id为input-dialog-message的元素上
      $("#input-dialog-message").focus();
    }
  });
});

上記のコードでは、open 属性を通じてポップアップ ウィンドウの open イベントをリッスンし、フォーカスを ID に設定します。 # # イベント実行時の ##input-dialog-message 要素。

以上がjQueryダイアログコンポーネントのフォーカスを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。