jquery 学习随笔 ui tabs选项卡
2016-01-27 13:39
567 查看
一.使用tabs 使用tabs 比较简单,但需要按照指定的规范即可。 //HTML 部分 <div id="tabs"> <ul> <li><a href="#tabs1">tab1</a></li> <li><a href="#tabs2">tab2</a></li> <li><a href="#tabs3">tab3</a></li> </ul> <div id="tabs1">tab1-content</div> <div id="tabs2">tab2-content</div> <div id="tabs3">tab3-content</div> </div> //jQuery 部分 $('#tabs').tabs();
$('#tabs').tabs({ collapsible : true, disabled : [0], event : 'mouseover', active : false, heightStyle : 'content', hide : true, show : true, }); 注意:设置true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字 符串参数。
//当选项卡创建时触发 $('#tabs').tabs({ create : function (event, ui) { alert($(ui.tab.get()).html()); alert($(ui.panel.get()).html()); }, }); //当切换到一个活动卡时触发 $('#tabs').tabs({ activate : function (event, ui) { alert($(ui.oldTab.get()).html()); alert($(ui.oldPanel.get()).html()); alert($(ui.newTab.get()).html()); alert($(ui.newPanel.get()).html()); }, }); //当切换到一个活动卡之前触发 $('#tabs').tabs({ beforeActivate : function (event, ui) { alert($(ui.oldTab.get()).html()); alert($(ui.oldPanel.get()).html()); alert($(ui.newTab.get()).html()); alert($(ui.newPanel.get()).html()); }, }); 在使用load 和beforeLoad 事件之前,我们先要了解一下ajax 调用的基本方法。 //HTML 部分 <ul> <li><a href="tabs1.html">tab1</a></li> <li><a href="tabs2.html">tab2</a></li> <li><a href="tabs3.html">tab3</a></li> </ul> 而tabs1.html、tabs2.html 和tabs3.html 只要书写即可,无须包含<div>。比如: tabs1-content 而这个时候,我们的CSS 需要做一定的修改,只要将之前的ID 换成如下即可: #ui-tabs-1, #ui-tabs-2, #ui-tabs-3 {} //ajax 加载后触发 $('#tabs').tabs({ load : function (event, ui) { alert('ajax 加载后触发!'); } }); //ajax 加载前触发 $('#tabs').tabs({ beforeLoad : function (event, ui) { ui.ajaxSettings.url = 'tabs2.html'; ui.jqXHR.success(function (responseText) { alert(responseText); }); } });
//禁用选项卡 $('#tabs').tabs('disable'); //$('#tabs').tabs('disable', 0); //启用选项卡 $('#tabs').tabs('enable'); //$('#tabs').tabs('enable', 0); //获取选项卡jQuery 对象 $('#tabs').tabs('widget'); //更新选项卡 $('#tabs').tabs('refresh'); //删除tabs 选项卡 $('#tabs').tabs('destroy'); //重载指定选项卡内容 $('#button').click(function () { $('#tabs').tabs('load', 0); }); //得到tabs 的options 值 alert($('#tabs').tabs('option', 'active')); //设置tabs 的options 值 $('#tabs').tabs('option', 'active', 1);
//ajax 加载后触发 $('#tabs').on('tabsload', function () { alert('ajax 加载后触发!'); }); //ajax 加载前触发 $('#tabs').on('tabsbeforeload', function () { alert('ajax 加载前触发!'); }); //选项卡切换时触发 $('#tabs').on('tabsactivate', function () { alert('选项卡切换时触发!'); }); //选项卡切换前触发 $('#tabs').on('tabsbeforeactivate ', function () { alert('选项卡切换前触发!'); });
相关文章推荐
- 基于jQuery 的图片瀑布流实现
- jquery实现可旋转可拖拽的文字效果代码
- jquery+css3实现会动的小圆圈效果
- javascript jquery console调试方法说明
- jquery的调试利器:Firebug使用详解
- jquery $.post
- jQuery Validate验证框架详解(转)
- 源码来袭!!!基于jquery的ajax分页插件(demo+源码)
- 《锋利的JQuery》读书笔记(三)
- 《锋利的JQuery》读书笔记(二)
- js和jQuery实现获取id和点击checkbox全选功能
- 《锋利的JQuery》读书笔记(一)
- jQuery+css实现的切换图片功能代码
- jQuery+css实现的换页标签栏效果
- jquery实现折叠式(手拉风琴)菜单
- obj.offsetHeight与obj.style.height区别
- jQuery -- label赋值
- 20160127--Jquery的ajax与post使用
- jQuery实例之实现滚动广告的功能
- jQuery Easyui学习之datagrid 动态添加、移除editor