탭 탭의 응용 프로그램을 구현하면이 플러그인은 비교적 간단합니다.
소스 코드 파일 :
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 속성을 사용하여 부분 레인팅을 달성하십시오.
Bootstrap 소스 코드 분석 탭 (Tab)에 대한 위의 간단한 논의는 내가 공유하는 모든 컨텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.