오늘, 부트 스트랩 위젯의 적용을 요약하겠습니다. 좋아, 말도 안되는 말을하지 말고, 요점에 도달합시다.
1. ContextMenu 소개
한 가지 요구 사항 : 표 행 순서, 다중 선택 순서를 지원하며 다중 선택성이 불연속 될 수 있습니다. 무슨 뜻입니까? 구현 해야하는 렌더링을 살펴 보겠습니다.
요구 사항은 다음과 같습니다. 6, 8 및 9는 행 2와 3 행 사이에 이동해야합니다. 기술적 인 관점에서 비즈니스를 제쳐두고 위의 효과를 사용하여 위의 효과를 달성하려면 오른쪽 클릭 기능을 생각했습니다. 라인 2 또는 3 행에서 마우스를 마우스 오른쪽 버튼으로 클릭하고 마우스 오른쪽 버튼 클릭 메뉴 함수를 통해 선택한 선을 해당 위치로 이동할 수있는 경우 가장 쉬운 일이 아닙니까? 우리는 단지 그렇게하므로 구성 요소를 찾고 "부트 스트랩 마우스 오른쪽 버튼 클릭 메뉴"를 검색합니다. 마지막으로, 우리는 문맥 메뉴 구성 요소를 찾았습니다. 주의 깊은 연구를 마친 후, 우리는 그 효과가 괜찮다고 생각했기 때문에 우리는 그것을 사용해야하는 정원사가 참조하기 위해 여기에서 공유했습니다.
ContextMenu 오픈 소스 주소 : https://github.com/sydcanem/bootstrap-contextmenu
ContextMenu는 데모를 사용합니다 : http://sydcanem.com/bootstrap-contextmenu/
2. ContextMenu 효과
초기 마우스 오른쪽 버튼 클릭 효과
프로젝트에 적용하십시오
메뉴 함수를 실행 한 후
3. ContextMenu 코드 예제
사실, 그것은 단순한 일입니다. 사용 방법을 살펴 보겠습니다.
1. 해당 파일을 참조하십시오. 핵심은 두 개의 부트 스트랩 -contextmenu.js와 prettify.js입니다
<script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/bootstrap/js/bootstrap.min.js"> </script> <script src = "/content/boottrap-contextMenu/bootstrap-contextmenu src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. HTML 준비
<div id = "context-menu"> <ul role = "menu"> <li> <a tabindex = "-1"href = "#"aperator = "top">이 줄 위의 삽입 </a> </li> <li> <a tabindex = "-1"href = "#"Operator = "Tronis"
3. JS 초기화
코드는 어렵지 않으며 테이블 행 작동의 논리 일뿐입니다. 설명 할 곳 :
(1) 테이블 행에서 제거 및 삽입을 실행 한 후 마우스 오른쪽 버튼 클릭 메뉴 함수를 다시 시작해야합니다. 그렇지 않으면 한 번 오른쪽 버튼을 클릭하면 더 이상 작동하지 않습니다.
(2) 메뉴 함수 항목이 많이있는 경우 라인을 사용하여 그룹화해야합니다. <li> </li>를 추가하여 완료하십시오.
<div id = "context-menu2"> <ul role = "menu"> <li> <a tabindex = "-1"> action </a> </a> <li> <a tabindex = "-1"> 또 다른 액션 </a> </li> <li> <a tabindex = "-1"> 여기에 다른 것 </a> <li> <li> <li> <a tabindex =. 링크 </a> </li> </div>
(3) 마우스를 메뉴로 이동하여 파란색 배경을 표시하려면 다른 CSS 파일을 참조해야합니다.
코드 사본은 다음과 같습니다. <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combed.min.css"rel = "Stylesheet">
효과는 다음과 같습니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위의 것은 부트 스트랩-컨텍스트menu 구성 요소의 간단한 용도입니다. 완벽하지는 않지만 일반적인 마우스 오른쪽 버튼 클릭 메뉴 요구 사항에 대해서는 잘 해결할 수 있습니다.