이 예제는 탭 탭 구현 응용 프로그램을 소개합니다. 이 플러그인은 비교적 간단합니다. 특정 내용은 다음과 같습니다
소스 코드 파일 :
Tab.js
구현 원칙 :
1. 요소를 클릭하면 먼저 원래 강조 표시된 요소를 취소하십시오.
2. 그런 다음 클릭 된 요소를 강조 표시합니다
3. 요소를 클릭하는 것이 드롭 다운 상자에서 옵션 인 경우 자체를 선택하고 드롭 다운 상자도 선택하십시오.
5. 애니메이션이 정의되면 먼저 애니메이션을 실행 한 다음 콜백
소스 코드 분석 :
1. 요소가 클릭되면 쇼 메소드가 트리거되어 다음 4 가지 이벤트가 트리거됩니다.
1.1. hiden.bs.tab : 이전 요소를 숨 깁니다
1.2. show.bs.tab : 현재 요소를 표시하십시오
1.3. Hideen.bs.tab : 이전 요소를 숨겨서 완료했습니다
1.4. ship.bs.tab : 현재 요소를 완료합니다
1.5. Hiden/Show Event 소스 코드 :
var $ previous = $ ul.find ( '. active : last a') var hideevent = $ .event ( 'hide.bs.tab', {relatedTarget : $ this [0]}) var showevent = $ .event ( 'show.bs.tab', {resecttarget : $ previous [0]})2. 활성 : 현재 객체를 활성화합니다
2.1. 이 요소가 확장 상태에 있는지 여부를 표시하기 위해 내비게이션 요소에 ARI-expeded 속성을 추가하십시오.
2.2. 리플 로우 메커니즘을 사용하여 offsetwidth 속성을 사용하여 부분 레인팅을 달성하십시오.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
이 일련의 튜토리얼은 다음과 같이 컴파일되었습니다. Bootstrap Basic Tutorials 특수 주제, Click to Learn에 오신 것을 환영합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.