jqueryはdivの右クリックメニューを実装します-フロントエンドQ&A-php.cn

jqueryはdivの右クリックメニューを実装します

WBOY

リリース： 2023-05-18 22:32:07

オリジナル

881 人が閲覧しました

最新の Web アプリケーションは、より多くのユーザーを引き付け、ユーザーエクスペリエンスを向上させるために、より使いやすいユーザーインターフェイスを提供する必要があります。 Web 開発の分野では、ユーザーが右クリックしてより多くのオプションを表示できるように、右クリックメニュー機能を追加することが必要になることがよくあります。この記事ではjQueryを使って簡単な右クリックメニューを実装する方法を紹介します。

HTML 構造

まず、HTML ページ上で右クリックする必要がある div コンポーネントを追加します。さらに、利用可能なさまざまなコマンドを含むメニューコンポーネントを追加します。以下は HTML コードスニペットです:

<div class="right-clickable">右击我弹出菜单</div>

<div class="menu">
  <ul>
    <li><a href="#">命令1</a></li>
    <li><a href="#">命令2</a></li>
    <li><a href="#">命令3</a></li>
  </ul>
</div>

ログイン後にコピー

このコードでは、右クリックする必要がある div の CSS クラスは「right-clickable」で、メニューの CSS クラスは「menu」です。。

CSS スタイル

次のステップは、HTML に CSS スタイルを追加することです。 CSSではdiv要素に右クリック機能を持たせ、メニュー項目をdiv要素の右側に揃える必要があります。 CSS スタイルスニペットは次のとおりです。

.menu {
  display: none;
  position: absolute;
  border: 1px solid #CCC;
  background: #FFF;
  padding: 5px;
}

.right-clickable {
  cursor: pointer; 
}

.right-clickable:hover {
  background-color: #EEE;
}

.menu li {
  padding: 5px;
  list-style: none;
}

.menu li:hover {
  background-color: #EEE;
}

.menu a {
  color: #666;
  text-decoration: none;
}

ログイン後にコピー

このコードでは、「右クリック可能」にはポインターカーソルとマウスオーバーフィードバックがあり、「メニュー」には青色の背景、白色の境界線、灰色のテキスト色があります。

JavaScript の実装

jQuery JavaScript ライブラリを使用して、右クリック機能を実装できるようになりました。 jQuery ライブラリは、すべての主要ブラウザの CDN リンクを通じて簡単に入手できます。ここではjQuery 3.5.1を使用します。

まず、メニューの jQuery オブジェクトを作成します。次に、右クリックメニューの位置を設定し、ページ内で開きます。以下は JavaScript コードスニペットです:

$(function() {

  var $contextMenu = $(".menu");

  $("body").on("contextmenu", ".right-clickable", function(e) {

    $contextMenu.css({
      display: "block",
      left: e.pageX,
      top: e.pageY
    });

    return false;
  });

});

ログイン後にコピー

上記のコードでは、「$contextMenu」はクラス「menu」の要素を選択する jQuery セレクターです。「$("body")」は右クリックイベントを適用し、ページ全体をカバーするために使用されます。コードブロックは、右クリックメニューを呼び出して場所を指定します。

次のコードスニペットでは、ドキュメント全体で右クリックメニューを非表示にします:

$(document).on("click", function() {
  $contextMenu.hide();
});

ログイン後にコピー

コードを完成させます

結合できるようになりました。すべてのコードを 1 つの JavaScript ファイルにまとめて HTML に含めます。完成したコードは次のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>右键菜单</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="right-clickable">右击我弹出菜单</div>

  <div class="menu">
    <ul>
      <li><a href="#">命令1</a></li>
      <li><a href="#">命令2</a></li>
      <li><a href="#">命令3</a></li>
    </ul>
  </div>
</body>
</html>

ログイン後にコピー

結論

この投稿では、jQuery を使用して単純な右クリックメニューを実装する方法を説明し、完全な HTML/CSS /JavaScript コードを提供します。実装。この例は複雑ではありませんが、jQuery 機能の実装と CSS を使用してスタイルを制御する方法を示す良い例です。他の機能を追加したい場合は、上記の例を拡張できます。

以上がjqueryはdivの右クリックメニューを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。