jquery ui tabs(选项卡)插件
参考文档: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(选项卡)插件的更多相关文章
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- day15—jQuery UI之widgets插件
转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...
- jquery.UI.tabs
今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...
- jquery ui tabs详解(中文)
1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...
- jquery ui bootstrap日期插件
http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
随机推荐
- java项目部署运行
运用插件运行项目: tomcat-maven-plugin:1.1 1.右键项目-->run as -->5 maven build-->tomcat:run ...
- SQL Server 获取(本周、本月、本旬、本季、本年)的某一天
/*------------------------------本周----------------------------------------*/ --本周第一天 ),getdate()) -- ...
- Jquery中$与$.fn的区别
Jquery中$与$.fn的区别 当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为其中的一员,自然也不例外,尽管刚开始时很排 ...
- [C#]浅谈协变与逆变
看过几篇说协变与逆变的博客,虽然都是正确无误的,但是感觉都没有说得清晰明了,没有切中要害.那么我也试着从我的理解角度来谈一谈协变与逆变吧. 什么是协变与逆变 MSDN的解释:https://msdn. ...
- php 函数的嵌套
/*一定要小心变量作用域*/ function insert_dynamic() { function bar() { echo "I don't exist until insert_dy ...
- 【转载】Spring Cloud底层原理
概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...
- groovy运行程序和类型推断
在 Java 中,如果要声明一个 String 变量,则必须输入: String value = "Hello World"; 等号右侧的字符已经表明 value 的类型是 Str ...
- 用Jq遍历一个div里面的所有input 并判断是否为空?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- laravel之引入图片上传类
1.在官网http://www.uploadify.com/ 下载插件,flash verison 的版本是免费版 2.解压后将文件夹放置在指定的目录下 3.前端导入css,js文件,可以仿照文件夹中 ...
- 毕向东_Java基础视频教程第19天_IO流(20~22)
第19天-20-IO流(改变标准输入输出设备) static void setIn(InputStream in) Reassigns the "standard" input s ...