Detailliertes Beispiel für Bootstrap mit Dropdown-Menü zur Implementierung eines Kontextmenüs

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Verwendung des Dropdown-Menüs zur Implementierung des Kontextmenüs in Bootstrap vor. Ich hoffe, dass dieser Artikel allen helfen kann.

Ausführliche Erklärung von Bootstrap mithilfe des Dropdown-Menüs zur Implementierung des Kontextmenüs

Vorab geschrieben:

Das sogenannte Kontextmenü, sein Unterschied zum allgemeinen Menü Es liegt in:

Ausgelöst durch die rechte Taste, um beim rechten Mausklick angezeigt zu werden

Nachdem die Maus an eine andere Stelle geklickt wurde, wird die Menü verschwindet

Implementierungsmethode:

Definieren Sie ein gewöhnliches Dropdown-Menü ohne Triggerbedingungen in HTML und schreiben Sie dann die Überwachung des übergeordneten Containers dieses Menüs, um dies zu erreichen .

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();              });

Verwandte Empfehlungen:

Erläuterung des responsiven Framework-Bootstrap-Grid-Systems mit Beispielen

Erfahrungsaustausch bei der Verwendung der Bootstrap-Baumsteuerung

Erklärung mit Beispielen Zwei Möglichkeiten, das Bootstrap-Paginator-Paging-Plug-in zu verwenden

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für Bootstrap mit Dropdown-Menü zur Implementierung eines Kontextmenüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!