参考文档:http://www.css88.com/jquery-ui-api/tabs/

html代码:

<div id="tabs">
<ul>
<li id="tab1Li"><a href="tab1.html">tab1</a></li> <!--tab1使用ajax引入,tabs()可以自己调用ajax方法-->
<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>

js代码:

$("#tabs").tabs({
collapsible : true, //当设置为 true时,激活的面板可以被关闭
disabled : false, //Boolean or Array: 一个数组。包含从零开始计数的应该禁用选项卡的索引,例如,[ 0, 2 ]将禁用第一和第三个选项卡。
event : "click", //激活选项卡的事件类型。 要悬停(hover)激活选项卡,用"mouseover"。
active : 0, //Boolean:设置 active 为 false 将折叠所有的panel(面板)。这要求 collapsible 选项必须为 true。
//Integer: 激活打开的panel(面板)索引,以零为基础。负值则表示从最后一个panel(面板)后退选择panel(面板)。
heightStyle : "content", //"auto": 所有的panel(面板)将会被设置为最高的panel(面板)的高度。
//"fill": 基于 tabs 的父元素的高度,扩展到可用的高度。
//"content": 每个panel(面板)的高度取决于它的内容。
//hide : { effect: "blind", duration: 1000 },
//show : { effect: "blind", duration: 1000 },
create : function(event, ui){ //当创建 tabs(选项卡) 时触发。如果 tabs(选项卡) 是关闭的,ui.tab 和 ui.panel 将是空的 jQuery 对象。
//alert("新建一个活动卡时触发");
//alert(ui.tab.html());
//alert(ui.panel.html());
},
activate : function(event, ui){
//alert("切换到一个活动卡时触发");
//alert(ui.newTab.html()); //刚被激活的选项卡。
//alert(ui.oldTab.html()); //刚被取消激活的选项卡。
//alert(ui.newPanel.html()); //刚被激活的面板。
//alert(ui.oldPanel.html()); //刚被取消激活的面板。
},
beforeActivate : function(event, ui){
//alert("切换到一个活动卡之前触发");
//alert(ui.newTab.html()); //刚被激活的选项卡。
//alert(ui.oldTab.html()); //刚被取消激活的选项卡。
//alert(ui.newPanel.html()); //刚被激活的面板。
//alert(ui.oldPanel.html()); //刚被取消激活的面板。
},
load : function (event, ui){ //远程ajax选项卡加载后触发该事件
//alert(ui.tab.html()); //ui包含 tab 和 panel 两个属性
//alert(ui.panel.html());
},
beforeLoad : function(event, ui){
//alert("一个远程选项卡被加载之前触发");
//alert(ui.tab.html()); //属性一:tab
//alert(ui.panel.html()); //属性二:panel,加载之前为空
ui.jqXHR.success(function(responseText,statusText){ //属性三:jqXHR,被请求内容的 jqXHR 对象
//alert(responseText);
//alert(statusText);
});
//ui.ajaxSettings.url = "url地址"; //属性三:ajaxSettings,用于由jQuery.ajax请求内容的设置。
},
});
//tabs方法
//$("#tabs").tabs("disable"); //禁用所有tabs
//$("#tabs").tabs("disable", 0); //禁用第一个tab
//$("#tabs").tabs("enable"); //启用tab
//$("#tabs").tabs("enable", 0); //启用第一个tab
$("#tab1Li").click(function() {
$("#tabs").tabs("load", 0); //当点击选项时,重新加载远程选项卡的面板内容
});

实现效果:

jquery ui tabs(选项卡)插件的更多相关文章

  1. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  2. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  3. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  4. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  5. 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  6. day15—jQuery UI之widgets插件

    转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...

  7. jquery.UI.tabs

    今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...

  8. jquery ui tabs详解(中文)

    1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...

  9. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  10. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

随机推荐

  1. Lenovo笔记本Fn的总结

    Fn与其他按键结合使用以访问特殊的ThinkPad功能. Fn+F2  锁定计算机 Fn+F3 管理电池和电源 Fn+F4 进入睡眠(待机)模式 Fn+F5 管理无线连接 Fn+F6 打印屏幕 Fn+ ...

  2. HDU 5444 Elven Postman (2015 ACM/ICPC Asia Regional Changchun Online)

    Elven Postman Elves are very peculiar creatures. As we all know, they can live for a very long time ...

  3. JavaScript对象——原型与原型链

    原型与原型链 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...

  4. nodejs学习笔记二(get请求、post请求、 querystring模块,url模块)

    请求数据 前台:form.ajax.jsonp 后台:接受请求并返回响应数据     前台<= http协议 =>后台   常用的请求的方式: 1.GET           数据在url ...

  5. 深入理解 flex 布局以及计算_Flexbox, Layout

    起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...

  6. MySQL---4、语句规范

    1.命名规范 (1)库名.表名.(按现在的规范类似; PromoHayaoRecord),数据库名使用小写,字段名必须使用小写字母,并采用下划线分割.关键字与函数名称全部大写.(2)库名.表名.字段名 ...

  7. photoshop cc 2014 下载安装及汉化资源及切图简要使用教程

    这是百度经验上一个pscc 2014 版本的下载安装汉化教程,亲测有效: http://jingyan.baidu.com/article/647f0115bce3847f2148a80c.html ...

  8. .net mvc 获取acion 返回类型

    1..net core 中获取 public override void OnActionExecuted(ActionExecutedContext context) { var descripto ...

  9. Shiro官方快速入门10min例子源码解析框架3-Authentication(身份认证)

    在作完预备的初始化和session测试后,到了作为一个权鉴别框架的核心功能部分,确认你是谁--身份认证(Authentication). 通过提交给shiro身份信息来验证是否与储存的安全信息数据是否 ...

  10. python循环删除列表里的元素!漏删!

    li = [1,2,3,4,5,6] for i in li: if i<3: li.remove(i) print(li) #输出的结果是 [2,3,4,5,6]    2没有remove掉 ...