JS 컴포넌트 사용법 Bootstrap ContextMenu 우클릭 menu_javascript 스킬

오늘은 부트스트랩의 작은 구성요소에 대한 응용을 정리해보겠습니다. 좋아요, 더 이상 고민하지 말고 본론으로 들어가겠습니다.

1. ContextMenu 소개

한 가지 요구 사항: 테이블 행 순서 지정, 다중 선택 순서 지원, 비연속 다중 선택. 그것은 무엇을 의미합니까? 먼저 달성해야 하는 렌더링을 살펴보겠습니다.

요구 사항: 선택한 6, 8, 9행을 2행과 3행 사이로 이동해야 합니다. 비즈니스적인 면은 제쳐두고, 순전히 기술적인 관점에서 최소한의 조작으로 위와 같은 효과를 얻기 위해 블로거는 두 번째나 세 번째 줄에서 마우스 오른쪽 버튼을 클릭할 수 있는 기능을 생각했습니다. 마우스 오른쪽 버튼 클릭 메뉴 기능을 통해 선택한 항목을 선택하면 행을 해당 위치로 이동하는 가장 간단한 방법이 아닐까요? 해보자, 컴포넌트를 찾아 "부트스트랩 오른쪽 클릭 메뉴"를 검색했습니다. 마침내 ContextMenu 컴포넌트를 찾았습니다. 신중한 연구 끝에 효과가 괜찮다고 느꼈기 때문에 이를 사용해야 하는 정원사들의 참고를 위해 여기에 공유했습니다.

ContextMenu 오픈소스 주소: https://github.com/sydcanem/bootstrap-contextmenu

데모를 사용하는 ContextMenu: http://sydcanem.com/bootstrap-contextmenu/

2.컨텍스트 메뉴 효과

초기 오른쪽 클릭 효과

프로젝트에 적용

메뉴 기능 실행 후

3. ContextMenu 코드 예시
사실 굉장히 간단한 일인데 어떻게 사용하는지 살펴보도록 하겠습니다.

1. 해당 문서를 인용합니다. 핵심은 bootstrap-contextmenu.js와 prettify.js입니다

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="/Content/boostrap-contextmenu/bootstrap-contextmenu.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

2. HTML 준비

  <div id="context-menu">
    <ul class="dropdown-menu" role="menu">
      <li><a tabindex="-1" href="#" operator="top">插入此行上面</a></li>
      <li><a tabindex="-1" href="#" operator="bottom">插入此行下面</a></li>
    </ul>
  </div>

3.JS 초기화

코드는 어렵지 않고 테이블 행 연산 로직만 있으면 됩니다. 설명이 필요한 것:

(1) 테이블 행에서 제거 및 삽입을 수행한 후 마우스 오른쪽 버튼 클릭 메뉴 기능을 다시 초기화해야 합니다. 그렇지 않으면 마우스 오른쪽 버튼을 한 번 클릭하면 더 이상 작동하지 않습니다.

(2) 메뉴 기능 항목이 많은 경우 구분선을 사용하여 그룹화해야 합니다.

만 추가하면 완료됩니다.

<div id="context-menu2">
     <ul class="dropdown-menu" role="menu">
       <li><a tabindex="-1">Action</a></li>
       <li><a tabindex="-1">Another action</a></li>
       <li><a tabindex="-1">Something else here</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1">Separated link</a></li>
     </ul>
    </div>

(3) 파란색 배경을 표시하기 위해 메뉴로 마우스를 이동하려면 다른 CSS 파일을 참조해야 합니다.

코드 복사 코드는 다음과 같습니다.

http:/ /netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

효과는 다음과 같습니다.

위는 bootstrap-ContextMenu 구성 요소의 간단한 사용법입니다. 완벽하지는 않을 수도 있지만 일반적인 마우스 오른쪽 버튼 클릭 메뉴 요구 사항을 매우 잘 해결할 수 있습니다.