jquery 도구 탭 tab/tab_jquery
- WBOY원래의
- 2016-05-16 18:49:121336검색
편리하고 사용하기 쉽지만 개인적으로 UI 성능은 별로 좋지 않다고 생각합니다. 오늘 우연히 jquery 기반의 UI 성능 프레임워크인 jquery 도구를 보았습니다. UI 기능 표시 스타일이 flex와 유사합니다. . 프레임워크는 탭(탭/탭) 오버레이(오버레이), 도구 설명(프롬프트 상자), 스크롤 가능(스크롤 정보 표시줄), 노출(강조 표시), flahembed(비디오 재생 포함)(공식 웹 사이트 호출) 등 6가지 주요 기능 범주를 제공합니다. 자체적으로 6가지 주요 도구), 이러한 6가지 주요 기능 범주 각각에는 서로 간섭하지 않는 자체 독립적인 지원 패키지가 있습니다. 사용자는 자신의 필요에 따라 다운로드할 수 있으므로 페이지 로딩 시 js 파일 다운로드의 영향을 줄일 수 있습니다. 속도. 기능이 그다지 포괄적이지는 않지만 소수라고 할 수 있지만 세련되었다고 할 수 있습니다. 모두 현재 일반적으로 사용되는 기능이며 jquery ui의 일부 단점을 잘 보완하고 jquery의 UI 기능을 특정 수준으로 강화할 수 있습니다. 정도. 사실 제가 가장 높이 평가하는 점은 개발 비용을 효과적으로 제어하면서 사용자 경험을 크게 향상시킬 수 있는 플렉스 스타일입니다.
오늘은 jquery 도구의 탭을 자세히 살펴보고 공식 문서를 바탕으로 요약해 보겠습니다.
먼저 작업의 대상 HTML 코드를 제공합니다.
- tab1
- tab2
- tab3< /a>< /li>
탭은 웹에서 가장 인기 있는 사용자 인터페이스 구성요소입니다. 사용이 직관적이고 익숙하며 무엇보다도 페이지를 더욱 친숙하게 구성할 수 있습니다. /p>
테이블 콘텐츠테이블2 열기in faucibus orci luctus et posuere cubilia Curae; Aenean commodo pede a eros volutpat viverra. /a>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices cubilia Curae.
tab3 콘텐츠
1. $("ul.tabs-t").tabs("div.tabsContent>div") //이 메소드는 탭을 간단하게 구성할 수 있습니다
2. $("ul.tabs-t").tabs("div.tabsContent>div" ,{config object}) //이 방법은 구성 개체를 사용하여 탭을 구성하고 다양한 탭 표시에 적합합니다.
3. $("ul.tabs-t").tabs("div.tabsContent>div" ,콜백 함수) //콜백 함수를 통해 탭에 대한 추가 작업을 수행합니다.
다음은 2의 config 객체 매개변수 구현 및 설명입니다.
코드 복사
current:'current',//为当前tab的增加的class名称，默认为current
effect:"fade",//每个tab的panel内容显示方式为从整体逐渐显示
//effect:"slide",//点击tab的panel出现在当前tab的panel下面，并覆盖掉当前panel
//effect:"horizontal",//当前tab的panel逐渐从右向左收缩并最终消失，点击panel的内容占据相应位置，比较适合水平导航
fadeInSpeed:1000,//设置panel显示的速度，设置该属性在effect置为fade时有效，默认值为200毫秒
event:"mouseover",//指定触发tab切换的事件，默认是单击鼠标，可选择的触发事件有“mouseover”,"dbclick"
history:true,//类似javascript的history功能，默认为false,当用户点击浏览器的前进后后退按钮后，如果此处设置为true,那么就会回退到上次点击的tab，而不是跳转到其他页面去
initialIndex:1,//设置默认显示的tab
tabs:"a",//设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器
api:false,//设置当前tab所在容器的返回类型类型。如果为false(默认值)，以jquery对象返回；否则，以js对象返回。如果存在多个值，返回最后一个值。
onBeforeClick:function( index){
//alert(this.getCurrentTab().text());//返回当前tab的名称
return true;
},//在tab被点击之前调用的函数，如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象，对于该对象的操作，参见tab相关方法；改返回函数有一个参数，为当前tab的索引
onClick:function(index){
return true;
}//在tab被点击的时候调用的函数，其他用法同onBeforeClick
| 属性名称 | 默认值 | 描述 |
| current |
'current'
|
为当前tab的增加的class名称 |
| effect |
default'
|
fade':每个tab的panel内容显示方式为从整体逐渐显示;面，并覆盖掉当前panel |
| 'slide':点击tab的panel出现在当前tab的panel下 | ||
| horizontal':当前tab的panel逐渐从右向左收缩并最终消失，点击panel的内容占据相应位置，比较适合水平导航 | ||
| fadeInSpeed |
200
|
设置panel显示的速度，设置该属性在effect置为fade时有效，默认值为200毫秒 |
| event |
'click'
|
指定触发tab切换的事件，默认是单击鼠标，可选择的触发事件有“mouseover”,"dbclick" |
| history | FALSE | 类似javas |
| initialIndex |
0
|
设置默认显示的tab |
| tabs |
a'
|
设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器 |
| api |
FALSE
|
设置当前tab所在容器的返回类型类型。如果为false(默认值)，以jquery对象返回；否则，以js对象返回。如果存在多个值，返回最后一个值。 |
| on |
null
|
在tab被点击之前调用的函数，如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象，对于该对象的操作，参见tab相关方法；改返回函数有一个参数，为当前tab的索引 |
| on |
null
|
在tab被点击的时候调用的函数，其他用法同on |
var api=$("ul.tabs-t").tabs();//先通过获取tab容器获取tab
//api.next();//跳转到下一个tab
//api.click();
//alert(api.getConf().tabs);//返回api的配置对象，这里获取配置对象的tabs属性的值
api.getCurrentPane();//获取当前的panel
api.getCurrentTab();//获取当前tab
api.getIndex();//获取当前tab的index
//alert(api.getPanes());//获取所有的panel
//alert(api.getTabs());//获取所有的tab
api.prev();//跳转到上一个tab
api.onBeforeClick=function(){
return true;
}//同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件
api.onClick=function(){
return true;
}//同配置对象的Click，一个对象可以绑定多个Beforeclick事件
更直观的说明如下：
| 方法 | 返回值 | 描述 |
|
getConf()
|
API
|
返回api的配置对象 |
|
getCurrentPane()
|
jQuery
|
获取当前的panel |
|
getCurrentTab()
|
jQuery
|
获取当前tab |
|
getIndex()
|
integer
|
获取当前tab的index |
| getTabs() |
jQuery
|
获取所有的tab |
| getPanes() |
jQuery
|
获取所有的panel |
|
next()
|
API
|
跳转到下一个tab |
| prev() |
API
|
이전 탭으로 이동 |
| 켜기 |
API
|
구성 개체의 BeforeClick과 마찬가지로 하나의 개체가 여러 Beforeclick 이벤트에 바인딩될 수 있습니다. |
| 켜기 |
API
|
//Click 구성 개체와 마찬가지로 하나의 개체가 여러 Beforeclick 이벤트에 바인딩될 수 있습니다. |
마지막으로 공식 웹사이트의 스크린샷을 몇 장 찍어 이 글을 마무리합니다.
1.일반 탭
2. 가로로 확장된 탭
3. 수업 프롬프트 상자
4.안내
