드롭다운 메뉴를 사용하여 컨텍스트 메뉴를 구현하는 부트스트랩의 자세한 예

이 글은 부트스트랩에서 컨텍스트 메뉴를 구현하기 위해 드롭다운 메뉴를 사용하는 것과 관련된 정보를 주로 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

컨텍스트 메뉴를 구현하기 위해 드롭다운 메뉴를 사용한 부트스트랩에 대한 자세한 설명

앞에 작성:

컨텍스트 메뉴라고 하며 일반 메뉴와의 차이점은 다음과 같습니다.

오른쪽 버튼을 눌러 표시합니다. 마우스 오른쪽 버튼을 클릭하면

마우스 다른 곳을 클릭하면 메뉴가 사라집니다

구현 방법:

HTML에서 트리거 조건이 없는 공통 드롭다운 메뉴를 정의한 다음 이 상위 컨테이너의 리스너를 작성합니다. 달성하기 위한 메뉴입니다.

코드:

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

관련 추천:

반응형 프레임워크 설명 부트스트랩 그리드 시스템

부트스트랩 트리 제어 사용 경험 공유

예를 들어 부트스트랩 페이지네이터 설명 페이징 플러그인을 사용하는 두 가지 방법

위 내용은 드롭다운 메뉴를 사용하여 컨텍스트 메뉴를 구현하는 부트스트랩의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!