jQuery_jquery로 캡슐화된 탭 탭 플러그인 공유-JS 튜토리얼-php.cn

jQuery_jquery로 캡슐화된 탭 탭 플러그인 공유

WBOY

풀어 주다： 2016-05-16 15:54:36

원래의

1200명이 탐색했습니다.

탭 기능은 웹사이트 개발에서 자주 사용됩니다. 코드 작성 시간을 절약하기 위해 쉽게 호출할 수 있도록 탭 플러그인을 캡슐화했습니다.

탭 구성 요소 만들기

사용법: 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

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.