Exemple détaillé de bootstrap utilisant le menu déroulant pour implémenter le menu contextuel

Cet article présente principalement les informations pertinentes sur l'utilisation du menu déroulant pour implémenter le menu contextuel dans bootstrap. J'espère que cet article pourra aider tout le monde. Les amis dans le besoin pourront s'y référer.

Explication détaillée du bootstrap à l'aide du menu déroulant pour implémenter le menu contextuel

Écrit devant :

Le soi-disant menu contextuel, sa différence avec le menu général Il réside dans :

Déclenché par le bouton droit pour s'afficher au clic droit de la souris

Après un clic de souris ailleurs, le le menu disparaît

Méthode d'implémentation :

Définir un menu déroulant commun sans conditions de déclenchement en HTML, puis écrire le monitoring du conteneur parent de ce menu pour y parvenir .

Code :

<p id="settingInGraph"> 
              <ul class="dropdown-menu" role="menu" 
                aria-labelledby="dropdownMenu" id="contextMenu"> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务指派</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务监听</a></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >任务表单</a></li> 
                <li class="pider"></li> 
                <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a></li> 
              </ul> 
            </p>

$("#settingInGraph").mousedown(function(e) { 
if (3 == e.which) { 
     document.oncontextmenu = function() {return false;} 
     $("#contextMenu").hide(); 
     $("#contextMenu").attr("style","display: block; position: fixed; top:" 
     + e.pageY 
     + "px; left:" 
     + e.pageX 
     + "px; width: 180px;"); 
     $("#contextMenu").show(); 
     } 
}); 
$("#settingInGraph").click(function(e) { 
$("#contextMenu").hide();              });

Recommandations associées :

Explication du système de grille Bootstrap avec framework réactif avec des exemples

Partage d'expérience dans l'utilisation du contrôle d'arborescence Bootstrap

Explication avec exemples Deux façons d'utiliser le plug-in de pagination bootstrap paginator

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!