Maison >interface Web >Questions et réponses frontales >jquery implémente le menu contextuel div

jquery implémente le menu contextuel div

WBOYoriginal: 2023-05-18 22:32:07901parcourir

Les applications Web modernes doivent fournir une interface plus conviviale afin d'attirer plus d'utilisateurs et d'améliorer l'expérience utilisateur. Dans le domaine du développement Web, il est souvent nécessaire d'ajouter une fonctionnalité de menu contextuel afin que les utilisateurs puissent afficher plus d'options en cliquant avec le bouton droit. Cet article explique comment utiliser jQuery pour implémenter un simple menu contextuel.

Structure HTML

Tout d'abord, ajoutez le composant div qui doit faire l'objet d'un clic droit sur la page HTML. De plus, ajoutez un composant de menu contenant diverses commandes disponibles. Voici l'extrait de code 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>

Dans ce code, la classe CSS du div sur laquelle il faut cliquer avec le bouton droit est "cliquable avec le bouton droit", et la classe CSS du menu est "menu".

Styles CSS

L'étape suivante consiste à ajouter des styles CSS au HTML. En CSS, vous devez faire en sorte que l'élément div ait la fonction de clic droit et aligner les éléments de menu sur le côté droit de l'élément div. Voici l'extrait de style 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;
}

Dans ce code, "clic droit" a un curseur de pointeur et un retour de souris, tandis que "menu" a un fond bleu, une bordure blanche et une couleur de texte grise.

Implémentation JavaScript

Vous pouvez désormais utiliser la bibliothèque JavaScript jQuery pour implémenter la fonction de clic droit. La bibliothèque jQuery est facilement disponible via des liens CDN pour tous les principaux navigateurs. jQuery 3.5.1 est utilisé ici.

Tout d'abord, créez un objet jQuery pour le menu. Ensuite, définissez l'emplacement du menu contextuel et ouvrez-le dans la page. Voici l'extrait de code JavaScript :

$(function() {

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

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

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

    return false;
  });

});

Dans le code ci-dessus, "$contextMenu" est un sélecteur jQuery qui sélectionne les éléments avec la classe "menu". "$("body")" est utilisé pour appliquer l'événement de clic droit et couvrir la page entière. Le bloc de code appelle et spécifie l'emplacement du menu contextuel.

Dans l'extrait de code suivant, masquez tous les menus contextuels dans le document :

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

Complétez le code

Vous pouvez maintenant combiner tout le code dans un seul fichier JavaScript et l'inclure dans le HTML. Le code terminé ressemble à ceci :

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

Conclusion

Cet article présente comment implémenter un simple menu contextuel à l'aide de jQuery et fournit une implémentation complète du code HTML/CSS/JavaScript. Cet exemple n'est pas compliqué, mais c'est une bonne illustration de l'implémentation des fonctionnalités de jQuery et de la manière de contrôler les styles à l'aide de CSS. Si vous souhaitez ajouter d'autres fonctionnalités, vous pouvez étendre l'exemple ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：erreur contextuelle jquery ajaxArticle suivant：erreur contextuelle jquery ajax

Articles Liés

Voir plus