jQuery 도구 탭 사용법 소개_jquery-JS 튜토리얼-php.cn

jQuery 도구 탭 사용법 소개_jquery

WBOY

풀어 주다： 2016-05-16 17:52:04

원래의

1475명이 탐색했습니다.

先给个官方例子。可以先弄流来看看效果
html

复主代码代码如下:

<머리>
jQuery 도구 독립 실행형 데모

href="./tabs-no-images.css"/>

탭 1

두 번째 탭

매우 긴 세 번째 탭

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
viverra, leo sit amet auctor fermentum, risus lorem posuere
tortor, in accumsan purus magna imperdiet sem.

에님을 일시중단하세요. Pellentesque facilisis aliquam enim. Maecenas
facilisis Molestie lectus. Sed ornare ultricies tortor. Vivamus
nibh metus, faucibus quis, semper ut, dignissim id, diam.

모리리스 울트리시스. Nam feugiat egestas nulla. Donec augue dui,
molestie sed, tristique sit amet, blandit eu, turpis. Mauris
hendrerit, nisi et soulales tempor, orcitellus laoreet elit, sed
molestie dui quam vitae dui.

펠렌테스크 니슬. Ut adipiscing vehicula risus. 남에게
토르터. Maecenas id augue. Vivamus interdum nulla ac
고통. 퓨즈 메투스. Suspendisse eu purus. Maecenas quis lacus
eget dui volutpat Molestie.

오디오의 마에케나스. Nunc laoreet lectus vel ante. 눌람
불식. Sed justo dolor, mattis eu, euismod sed, tempus a,
nisl. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur Ridiculus mus.

Sed dolor에서. Etiam eget quam ac nibh pharetra
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
mollis ultrices. Vivamus rhoncus sapien nec lorem. 마티스
니시에서. Vivamus at enim. 정수 semper imperdiet
massa. Vestibulum nulla Massa, pretium quis, porta id,
vestibulum vitae, velit.

<스크립트>
$(function() {
// 페이지에 탭이 하나만 있는 경우 첫 번째 선택기는 선택 사항입니다.
　　$(".cs-tabs:first").tabs(".cs-panes :첫 번째 > div");
});

css

复主代码代码如下:

 
/* 탭의 루트 요소 */ 
ul.cs-tabs { 
margin:0 !important; 
패딩:0; 
높이:30px; 
border-bottom:1px 솔리드 #666; 
} 
/* 단일 탭 */ 
ul.cs-tabs li { 
float:left; 
패딩:0; 
여백:0; 
목록 스타일 유형:없음; 
} 
/* 탭 내부 링크. 배경 이미지 사용 */ 
ul.cs-tabs a { 
float:left; 
글꼴 크기:13px; 
디스플레이:블록; 
패딩:5px 30px; 
텍스트 장식:없음; 
테두리:1px 솔리드 #666; 
테두리 하단:0px; 
높이:18px; 
배경색:#effefef; 
색상:#777; 
여백 오른쪽:2px; 
위치:상대적; 
상단:1px; 
개요:0; 
-moz-border-radius:4px 4px 0 0; 
} 
ul.cs-tabs a:hover { 
배경색:#F7F7F7; 
색상:#333; 
} 
/* 선택한 탭 */ 
ul.cs-tabs a.on { 
 background-color:#ddd; 
테두리 하단:1px 솔리드 #ddd; 
색상:#000; 
커서:기본값; 
} 
/* 탭 창 */ 
.cs-panes div { 
display:none; 
테두리:1px 솔리드 #666; 
테두리 너비:0 1px 1px 1px; 
최소 높이:150px; 
패딩:15px 20px; 
배경색:#ddd; 
} 

该功能是通过jqueryObject.tabs()方法来实现的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class，我对div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
这两个同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
　　是不是很强大呢。
　　下面就以上配置参数说明描述如下：

属性名称	默认值	描述
current	'current'	CSS类名当前活跃的选项卡。
effect	'default'	效果被用来当点击一个选项卡。这可以戏剧性地改变这种行为的选项卡。这是可用的内置的效果: `'default'` :一个简单的显示/隐藏效果。这个标签的默认行为。 `'fade'` :这个选项卡内容逐渐显示从零到完全不透明。 `'ajax'` :从服务器加载选项卡内容使用AJAX。视图示例。 `'slide'` :垂直滑动效果,合适的对于手风琴导航。 `'horizontal'` :水平的幻灯片效果, 合适的对于水平手风琴导航。你也可以让自己的效果。
event	'click'	指定事件一个选项卡时打开。默认情况下,这个发生在当用户单击选项卡。另一个有效值是 `“mouseover”` 和 `‘dblclick'` 。
fadeInSpeed	200	自从1.0.1。唯一可用一起使用时与“fade”效应。该属性定义了加快( 毫秒)打开的面板中显示其内容。
fadeOutSpeed	`<span id="OUTFOX_JTR_TRANS_NODE-170" class="OUTFOX_JTR_TRANS_NODE">0</span>`	自从1.1.0版。唯一可用一起使用时与“fade”效应。该属性定义了加快( 毫秒)打开窗格中隐藏了它的内容。一个积极的这里的价值将导致“crossfade”作用演示了这里。
history	false	自从1.2.0 。浏览器的支持 “后退按钮”,这样当用户点击后退或前进按钮打开相应的选项卡。要求这个历史工具是包括在你的页面。
initialIndex	`<span id="OUTFOX_JTR_TRANS_NODE-182" class="OUTFOX_JTR_TRANS_NODE">0</span>`	指定选项,最初打开当页面加载。这将自动触发一个 `点击` 事件为选项卡指定在本财产。指定 `null` 或者一个负数这里不会触发 `点击` 事件在页面加载导致所有选项卡最初将关闭。
rotate	false	自从1.1.0版。当最后一个选项卡是开放和这个 `next()` 调用API调用,然后选项卡将从头开始,当第一个选项卡是开放和这个 `上一页()` 调用调用选项卡将提前最后一个选项卡。这是证明在这里。
tabs	'a'	一个选择器进行元素,用作标签在根元素。如果没有发现然后的直接子根元素用于为选项卡。

事件

事件	触发时间
onBeforeClick	点击一个标签之前。第二个参数是指数被单击的选项卡。
onClick	点击后一个选项卡。第二个参数是指数点击的选项。

스크립트 API
다음 예는 API에 액세스하는 방법을 보여줍니다.

코드 복사 코드는 다음과 같습니다.

 
var api = $("#tabui").data("tabs"); 
// 다음 탭으로 이동 
api.next() 

아래에는 모든 API 메소드가 나열되어 있습니다.

方法	返回值	描述/例子
click(index)	`<span id="OUTFOX_JTR_TRANS_NODE-236" class="OUTFOX_JTR_TRANS_NODE">API</span>`	激活选项卡中指定的参数。参数可以是要么是 `整数` 数字指定标签指数 (从0开始),或者当选项卡 `一个` 标记,它可以 `href` 属性作为援引 `字符串` 。
destroy()	`<span id="OUTFOX_JTR_TRANS_NODE-247" class="OUTFOX_JTR_TRANS_NODE">API</span>`	自从1.2.3 完全删除现有的标签实例。
getConf()	Object	自从1.0.1。返回配置对象标签的实例。这个对象可以被修改, 变化是动态地反映在行为上的标签。
getCurrentPane()	`<span id="OUTFOX_JTR_TRANS_NODE-255" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>`	返回当前面板作为jQuery对象。
getCurrentTab()	`<span id="OUTFOX_JTR_TRANS_NODE-258" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>`	返回当前标签作为一个jQuery对象。
getIndex()	integer	返回当前选项卡指数。
getPanes()	`<span id="OUTFOX_JTR_TRANS_NODE-264" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>`	返回jQuery对象窗格作为。
getTabs()	`<span id="OUTFOX_JTR_TRANS_NODE-267" class="OUTFOX_JTR_TRANS_NODE">jQuery</span>`	返回标签作为一个jQuery对象。
next()	`<span id="OUTFOX_JTR_TRANS_NODE-270" class="OUTFOX_JTR_TRANS_NODE">API</span>`	前进到下一个选项卡。
prev()	`<span id="OUTFOX_JTR_TRANS_NODE-273" class="OUTFOX_JTR_TRANS_NODE">API</span>`	进步到以前的选项卡。