Jquery——Day9(选项卡)
来源:互联网 发布:淘宝兼职被骗了怎么办 编辑:程序博客网 时间:2024/06/04 07:33
选项卡,是一种能提供给用户在同一界面切换不同内容的UI,尤其是在页面布局紧凑的页面上,提供了非常好的用户体验。
1、使用tabs,如下所示tabs.html
<div id="tabs"><ul><li><a href="#tab1">tab1</a></li><li><a href="#tab2">tab2</a></li><li><a href="#tab3">tab3</a></li></ul><div id="tab1">tab1-content</div><div id="tab2">tab2-content</div><div id="tab3">tab3-content</div></div>
同时,在tabs.js中,
$('#tabs').tabs();
对它们样式进行设置,
//去掉外边框#tabs{border:none;}//内容区域修饰#tab1,#tab2,#tab3{height:100px;pading:10px;border:1px solid #aaa;position:relative;top:-2px;}
2、tabs的外观选项
collapsible:允许折叠对应的内容;
disabled:使用数组来禁用哪个选项卡的索引,([0,1]表示禁用了前两个的索引)
event:表示触发tabs执行的事件类型(默认为click,可设置mouseover其他鼠标事件);
active:默认展开哪个tab,对应的是数值。(比如active:1)
heightStyle:默认值为“content”
show:显示
hide:隐藏
3、tabs()方法的事件
create:当创建一个选项卡时激活此事件,有两个参数(event,ui),
对于ui参数,有两个子属性tab和panel,得到当前活动卡和内容选项的对象。
create:function(event,ui){alert($(ui.tab.get()).html());alert($(ui.panel.get()).html() );}
activate:切换到另一个活动卡后触发,有两个参数:event,ui。
对于ui参数,有四个子属性,即oldTab、newTab、oldPanel、newPanel
beforeActivate:当切换到另一个活动卡之前触发。
load:当ajax加载一个文档后激活此事件。该方法有ui和event两个参数
对于ui参数,有两个子属性,即tab和panel,得到当前的活动卡和内容选项的对象。
beforeLoad:ajax远程加载文档前触发。
对于ui参数,有四个子属性,即tab和panel,jqXHR,ajaxSettings
(在jqXHR中常用的方法是success,ajaxSettings主要用于编写默认的属性)
4、tabs('action',param)方法
tabs('widget')——表示获取选项卡的jQuery对象
tabs('destory')——删除选项卡,直接阻断了tabs
tabs('refresh')——更新选项卡,比如高度
tabs('option',param)——获取options属性的值
tabs('option',param,value)——设置options属性的值
5、tabs中on的用法
对于on()方法触发的选项卡事件
(1)tabsload:Ajax加载后触发
(2)tabsbeforeload:Ajax加载前触发
(3)tabsactivate:选项卡切换时触发
(4)tabsbeforeactivate:选项卡切换前触发
//ajax加载后触发$('#tabs').on('tabsload',function(){alert('ajax加载后触发!');});
- Jquery——Day9(选项卡)
- Jquery——Day9(折叠菜单)
- Java学习----day9——(2)习题
- 【jQuery】选项卡插件——tabs
- Jquery-UI—制作选项卡(tabs)
- IMWeb前端学习笔记——Day9
- 【JQuery UI】选项卡插件——tabs
- Jquery李炎恢—55,56选项卡UI【21】【22】
- 黑马程序员————面向对象5(day9)
- 21天战拖记——Day9:“书柜整理法”初步(2014-05-12)
- Java学习----day9——(1)泛型初步了解
- 面向对象(day9)
- day9
- day9
- Day9
- DAY9
- day9
- Day9
- <opencv>滑动条的创建与使用
- 布隆过滤器
- CCF201612-1 中间数(解法三)(100分)
- RNN中输出端的sample采样
- 如何在andorid工程中嵌入开发者盈利广告
- Jquery——Day9(选项卡)
- Linux文件管理
- Java学习篇之源文件声明
- 线段树h1754
- 常用框架、库
- ssh远程连接桌面版ubuntu,连接经验
- time 命令
- python机器学习库scikit-learn:SVR的基本应用
- string库其实没什么用