이 기사에서는 참조에 부트 스트랩 드롭 다운 모듈 드롭 다운 사용을 소개합니다. 특정 내용은 다음과 같습니다
1. 소스 코드 분석 :
Dropdowns.Scss : 드롭 다운 박스 모듈
Javascripts/bootstrap/dropdown.js : 드롭 다운 박스 응답을 구현하십시오
2. 기능과 원칙 :
풀 다운 탭, 선택한 항목 표시 기능은 기본적으로 실현 될 수 없습니다.
원칙:
1. 드롭 다운 클래스를 앵커 포인트로 사용한 다음 하위 목록 드롭 다운 메뉴를 절대적으로 배치하십시오. 또한 연결을 만들기 위해 클릭 포인트를 설정 데이터 토글 = "드롭 다운"으로 추가해야합니다.
2. JS 플러그인의 지원이 필요합니다
3. 소스 코드 분석 :
1. CARET : 경계를 사용하여 하향 삼각형을 구현하여 구현합니다
1.1. 테두리 색상은 기본적으로 글꼴 색상입니다
1.2. 삼각형의 구현 : 테두리의 너비가 있어야하며 인접한 측면의 너비는 있어야하지만 색상은 투명합니다. 마지막으로, 요소는 높이와 너비 0을 만들려면 행의 블록 요소 여야합니다.
1.3. 코드는 다음과 같습니다
코드 사본은 다음과 같습니다. <span style = "border-left : 4px solid; border-top : 4px solid transparent; border-bottom : 4px solid tonparent; 높이 : 0px; 너비 : 0px; 선-높이 : 정상; 디스플레이 : 인라인-블록;"> </span> "> </span>.
2. 청취 유형의 클릭 유형은 문서에 바인딩되며 청취 유형은 Data-Toggle = "Dropdown"입니다.
3. JS 플러그인과 클래스 생성자가 작성한 플러그인 함수는 JS 메소드를 사용하여 플러그인을 호출하는 데 사용됩니다.
4. Data-* 모드는 플러그인을 호출하며, 이는 문서에 이벤트를 주입하는 데 사용되며 코드는 다음과 같습니다.
$ (document) .on ( 'click.bs.dropdown.data-api', clearmenus) .on ( 'click.bs.dropdown.data-api', '.dropdown form', function (e) {e.stopPropagation ()}). dropdown.prototype.toggle) .on ( 'keydown.bs.drapdown.data-api', 토글, 드롭 다운 .prototype.keydown)코드는 드롭 다운으로 정의 된 메소드를 직접 호출합니다. 여기에 멋진 디자인은 플러그인 프레임 워크, 데이터의 호출 및 JS 플러그인 모드의 호출에 있으며,이 두 호출 모드는 동일한 코드를 사용합니다.
5. JS 플러그인으로 호출하면 기본 방법을 직접 호출해야합니다. 인스턴스를 생성 할 때 토글 이벤트 만 묶여 있습니다.
var dropdown = function (element) {$ (요소) .on ( 'click.bs.dropdown', this.toggle)}6. ClearMenu : Data-Toggle = "Dropdown"의 요소 만 지워집니다
7. Dropdown-Backdrop : No Click 이벤트의 처리를 이동하는 데 사용됩니다.
8. 키 다운 : 드롭 다운 버튼이 초점을 맞추면 키를 눌러 확장하고 상단 키를 눌러 수축합니다.
9. Data-target 및 herf = "#id": 클릭을 달성하려면 지정된 드롭 다운 목록을 확장하십시오. 기본값은 버튼 뒤에있는 형제 노드를 확장하는 것입니다.
<ul> <li> <a> index </a> </a> </li> <li> <a> Zhenglu </a> </a> </li> <li> <a data-toggle = "dropdown"href = "#name"> user tools </a> </li> </ul> <div id = "name"> <ul> <li> <a> </li> </ul> </li> </li> </li> </ul>
10 팝업 하위 메뉴 구현 및 하단 사용 : 100% (하단 팝업 하위 메뉴 포지셔닝)를 구현하십시오.
11. 응용 프로그램 예제
<div id = "dropdown"> <a id = "dropdown-btn"data-target = "#dropdown"> 번호 </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div>
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.