탭 기능은 웹사이트 개발에서 자주 사용됩니다. 코드 작성 시간을 절약하기 위해 쉽게 호출할 수 있도록 탭 플러그인을 캡슐화했습니다.
탭 구성 요소 만들기
사용법: html 구조
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <li><a href="#tabs-3">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> <div id="tabs-2">tabs-2-panel</div> <div id="tabs-3">tabs-3-panel</div> </div>
js 호출
$('#tab').tabs();
관련 매개변수 설명:
초기화 매개변수
매개변수 기본값 매개변수 설명
active null은 선택한 탭의 인덱스를 설정합니다. 기본값은 null입니다. 예를 들어 첫 번째 탭을 선택하면 0
으로 설정됩니다.
이벤트 클릭 탭의 전환 이벤트, 기본값은 클릭 이벤트, 마우스 오버를 설정할 수 있습니다
탭 매개변수 추가
매개변수 기본값 매개변수 설명
제목 비어 있음 탭에 표시되는 텍스트, 기본값은 비어 있음
href 빈 탭 링크, 정적 데이터인 경우 해당 문자열(#str)을 입력하고, 원격 데이터의 경우 해당 URL
내용 비어 있음 탭의 내용은 정적 데이터입니다.
동적 데이터를 채울 필요가 없습니다.
iconCls true 탭 닫기 버튼, 기본값은 true를 표시하는 것이고, 그렇지 않으면 false입니다
데모:
예 1: 정적 데이터:
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <li><a href="#tabs-3">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> <div id="tabs-2">tabs-2-panel</div> <div id="tabs-3">tabs-3-panel</div> </div>
js 호출:
$('#tabs').tabs();
예제 2: 원격 데이터를 통해 페이지를 로드하고 패널을 동적으로 생성
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
js 호출:
$('#tabs').tabs();
예 3: 매개변수를 전달하고 탭 전환 이벤트를 마우스오버로 설정
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
js 호출:
$('#tabs').tabs({event:'mouseover'});
예 4: 탭 추가:
<div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="index.jsp">tab-2</a></li> <li><a href="index.html">tab-3</a></li> </ul> <div id="tabs-1">tabs-1-panel</div> </div>
js 호출:
$('#tabs').tabs(); var tabCount =4; function addTab(){ tab.tabs('add',{ title:'tab-'+tabCount+'', href:'#tab-'+tabCount+'', content:'Tab----'+tabCount+'', iconCls:true }); tabCount++; }
요약:
다양한 ID 호출을 통해 다양한 탭 구조를 만들 수 있으며, 스타일을 ID별로 맞춤 설정할 수 있습니다.
저는 재능이 없습니다. 전문가 여러분의 조언을 환영합니다....
데모 다운로드 주소: MyUI-tabs
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.