jquery implementiert das div-Rechtsklickmenü-Front-End-Fragen und Antworten-php.cn

jquery implementiert das div-Rechtsklickmenü

WBOY

Freigeben： 2023-05-18 22:32:07

Original

866 Leute haben es durchsucht

Moderne Webanwendungen müssen eine benutzerfreundlichere Oberfläche bieten, um mehr Benutzer anzulocken und das Benutzererlebnis zu verbessern. Im Bereich der Webentwicklung ist es häufig erforderlich, eine Rechtsklick-Menüfunktion hinzuzufügen, damit Benutzer per Rechtsklick weitere Optionen anzeigen können. In diesem Artikel wird erläutert, wie Sie mit jQuery ein einfaches Rechtsklick-Menü implementieren.

HTML-Struktur

Fügen Sie zunächst die div-Komponente hinzu, die mit der rechten Maustaste auf die HTML-Seite geklickt werden muss. Fügen Sie außerdem eine Menükomponente hinzu, die verschiedene verfügbare Befehle enthält. Das Folgende ist der HTML-Codeausschnitt:

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

Nach dem Login kopieren

In diesem Code ist die CSS-Klasse des Div, auf das mit der rechten Maustaste geklickt werden muss, „rechtsklickbar“ und die CSS-Klasse des Menüs ist „menu“.

CSS-Stile

Der nächste Schritt besteht darin, dem HTML CSS-Stile hinzuzufügen. In CSS müssen Sie dafür sorgen, dass das div-Element über die Rechtsklickfunktion verfügt und die Menüelemente an der rechten Seite des div-Elements ausgerichtet werden. Hier ist das CSS-Stil-Snippet:

.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;
}

Nach dem Login kopieren

In diesem Code hat „rechtsklickbar“ einen Zeigercursor und Mouseover-Feedback, während „Menü“ einen blauen Hintergrund, einen weißen Rand und eine graue Textfarbe hat.

JavaScript-Implementierung

Sie können jetzt die jQuery-JavaScript-Bibliothek verwenden, um die Rechtsklick-Funktion zu implementieren. Die jQuery-Bibliothek ist über CDN-Links für alle gängigen Browser leicht verfügbar. Hier kommt jQuery 3.5.1 zum Einsatz.

Erstellen Sie zunächst ein jQuery-Objekt für das Menü. Legen Sie dann die Position des Rechtsklick-Menüs fest und öffnen Sie es auf der Seite. Hier ist der JavaScript-Codeausschnitt:

$(function() {

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

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

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

    return false;
  });

});

Nach dem Login kopieren

Im obigen Code ist „$contextMenu“ ein jQuery-Selektor, der Elemente mit der Klasse „menu“ auswählt. „$(“body“)“ wird verwendet, um das Rechtsklick-Ereignis anzuwenden und die gesamte Seite abzudecken. Der Codeblock ruft den Speicherort des Rechtsklickmenüs auf und gibt ihn an.

Blenden Sie im folgenden Codeausschnitt alle Rechtsklickmenüs im gesamten Dokument aus:

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

Nach dem Login kopieren

Vervollständigen Sie den Code

Sie können jetzt den gesamten Code in einer einzigen JavaScript-Datei kombinieren und in den HTML-Code einbinden. Der fertige Code sieht so aus:

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

Nach dem Login kopieren

Fazit

Dieser Artikel stellt die Implementierung eines einfachen Rechtsklick-Menüs mit jQuery vor und bietet eine vollständige HTML-/CSS-/JavaScript-Codeimplementierung. Dieses Beispiel ist nicht kompliziert, aber es veranschaulicht gut die Implementierung der jQuery-Funktionalität und die Verwendung von CSS zur Steuerung von Stilen. Wenn Sie weitere Funktionen hinzufügen möchten, können Sie das obige Beispiel erweitern.

Das obige ist der detaillierte Inhalt vonjquery implementiert das div-Rechtsklickmenü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!