参考文档: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. java项目部署运行

      运用插件运行项目: tomcat-maven-plugin:1.1   1.右键项目-->run as -->5 maven build-->tomcat:run         ...

  2. SQL Server 获取(本周、本月、本旬、本季、本年)的某一天

    /*------------------------------本周----------------------------------------*/ --本周第一天 ),getdate()) -- ...

  3. Jquery中$与$.fn的区别

    Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...

  4. [C#]浅谈协变与逆变

    看过几篇说协变与逆变的博客,虽然都是正确无误的,但是感觉都没有说得清晰明了,没有切中要害.那么我也试着从我的理解角度来谈一谈协变与逆变吧. 什么是协变与逆变 MSDN的解释:https://msdn. ...

  5. php 函数的嵌套

    /*一定要小心变量作用域*/ function insert_dynamic() { function bar() { echo "I don't exist until insert_dy ...

  6. 【转载】Spring Cloud底层原理

    概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...

  7. groovy运行程序和类型推断

    在 Java 中,如果要声明一个 String 变量,则必须输入: String value = "Hello World"; 等号右侧的字符已经表明 value 的类型是 Str ...

  8. 用Jq遍历一个div里面的所有input 并判断是否为空?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. laravel之引入图片上传类

    1.在官网http://www.uploadify.com/ 下载插件,flash verison 的版本是免费版 2.解压后将文件夹放置在指定的目录下 3.前端导入css,js文件,可以仿照文件夹中 ...

  10. 毕向东_Java基础视频教程第19天_IO流(20~22)

    第19天-20-IO流(改变标准输入输出设备) static void setIn(InputStream in) Reassigns the "standard" input s ...