jquery ui tabs详解(中文) 【转载】

1 属性
1.11 ajaxOptions
,当选项卡加载内容时,添加一个ajax选项。只有ajax时,添加的ajax选项才起作用。默认值为null。上面的例子中,添加了beforeSend和success两个选项。ajax还有一些选项请参考jquery ajax,这里不做详解。。。
1.12 初始化设置例:请注意,$('.selector')是tabs 的类名,在本例中.selector=#tabs,以后不再说明。
$('.selector').tabs({ ajaxOptions: { async: false } });//这里是将异步改为了同步。
1.13 初始化后的参数获取和设置:请注意:getter为获取,发音:盖特儿,setter为设置,发音:塞特儿,以后不再说明。
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

1.21 cache 默认为false,无缓存。这个选项用于ajax调用,简单的说无缓存,就是每次发送请求都刷新;有缓存就是第一次请求刷新,以后就不刷新了,关闭页面是另外一回事。ajaxOptions:{cache:false}应该和这个功能是一样的吧。
1.22 初始化设置例:
$('.selector').tabs({ cache: true });
2.23 初始化后的参数获取和设置:
//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);

1.31collapsible,意思是可折叠的,默认选项是false,不可以折叠。如果设置为true,允许用户将已经选中的选项卡内容折叠起来。这样说吧:点击一次选项卡2,选项卡2内容显示出来了,这时候再次点击选项卡2,选项卡的内容区就收了起来,再次点击选项卡2,选项卡的内容区则又展开了。明白否?知道你不明白,不明白就用最上面的例子试试吧。
1.32 初始化设置例:
$('.selector').tabs({ collapsible: true });
1.33 初始化后的参数获取和设置:请参考1.23...

1.41 cookie 默认值为null,需要cookie插件。保存最后一次选择的选项卡到cookie 中。可使用的选项例:(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
1.42 初始化设置例:$('.selector').tabs({ cookie: { expires: 30 } });
1.43 初始化后的参数获取和设置:请参考1.23...

1.51deselectable 默认为false,作用似乎和collapsible一样。

1.61 disabled 设置哪些选项卡不可用,是一个数组例[0,1,2],也就是第一个、第二个、第三个选项卡。默认为[]。
1.62 初始化设置例:$('.selector').tabs({ disabled: [1, 2] });
1.63 初始化后的参数获取和设置:请参考1.23...

1.71 event ,切换选项卡的事件,默认为'click',点击切换选项卡。
1.72 初始化设置例:$('.selector').tabs({ event: 'mouseover' }); //鼠标滑过切换选项卡
1.73 初始化后的参数获取和设置:请参考1.23...

1.81 fx,切换选项卡时的动画效果,默认为:null,无动画效果,
1.82 初始化设置:请参看最上面的例子。
1.83 初始化后的参数获取和设置:请参考1.23...

1.91 idPrefix ,在使用ajax时,idPrefix选项可以为其添加一个唯一的id,默认为:'ui-tabs-' 。
1.92 初始化设置例:$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
1.93 初始化后的参数获取和设置:请参考1.23...

1.101 selected,初始化时,哪个选项卡被选中,默认为0,就是第一个选项卡被选中。
1.102 初始化设置例:$('.selector').tabs({ selected: 3 });
1.103 初始化后的参数获取和设置:请参考1.23...

1.111 spinner,当远程内容加载的时候,(ajax),spinner字符串的html内容将被显示在选项卡的标题上。(我很奇怪,我自己试了,怎么不起作用?)
1.112 初始化设置例:$('.selector').tabs({ spinner: 'Retrieving data...' });
1.113 初始化后的参数获取和设置:请参考1.23...

1.121 panelTemplate ,

1.131 tabTemplate ,

2 事件
先给出一个事件绑定的例子,请注意:
$('#example').bind('tabsselect', function(event, ui) {
   ui.tab     // 被选中(点击后)的选项卡元素
   ui.panel   //这个元素包含被选中(点击后)的选项卡的内容
   ui.index   //返回一个被选中(或点击后)选项卡的索引值(从0开始)
});

2.11 select 类型:tabsselect ,点击选项卡时触发该事件。
2.12 初始化时绑定事件:
$('.selector').tabs({
   select: function(event, ui) { ... }
});

2.13 在初始化后使用事件绑定绑定该事件:
$('.selector').bind('tabsselect', function(event, ui) {
...
});

2.21 load,类型:tabsload 一个远程(ajax)选项卡的内容被加载完成后触发该事件。
2.22 参考2.12
2.23 参考2.13
2.31 show,类型:tabsshow 当选项卡显示后触发该事件。
2.41 add,类型:tabsadd ,当一个选项卡被添加后触发。
2.51 remove ,类型tabsremove ,当一个选项卡被删除后触发。
2.61 enable ,类型tabsenable ,当一个选项卡可用时触发。
2.71 disable,类型tabsdisable,当一个选项卡不可用时触发。

3 方法
3.11 destroy,哈哈,又到了我最喜欢的摧毁地球时间。例:.tabs( 'destroy' )
3.21 disable,整个选项卡不可用。
3.31 enable,整个选项卡可用。.tabs( 'enable' )
3.41 option,设置属性。例:.tabs( 'option' , optionName , [value] )
3.51 add,remove,添加、删除选项卡。例:.tabs( 'add' , url , label , [index] ) ,.tabs( 'remove' , index )
3.61 enable,设置某个选项卡标签可用。例:.tabs( 'enable' , index )
3.71 disable,设置某个选项卡标签不可用。例:.tabs( 'disable' , index )
3.81 select,选择一个选项卡标签。例:.tabs( 'select' , index ) ,index从0开始。
3.91 load,重载一个ajax选项卡的内容,这个一直载入远程内容,即使cache设置为true,第二个参数是要重载选项卡的索引值。例:.tabs( 'load' , index )
3.101 url,当一个ajax选项卡将要加载时,改变url。.tabs( 'url' , index , url )
3.111 abort,中止所有运行在tab标签上的ajax请求或动画。.tabs( 'abort' )
3.121 rotate, 自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒,是两个标签自动翻滚所需要的时间,设为0或null为停止翻滚。第三个参数是设置当用户选择一个选项卡标签后是否继续翻滚,默认为:false,不继续。
真累,歇歇再说吧。。。
4 技巧
4.1 如何接收已选中选项卡标签的索引值?
例:var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
4.2 如何用一个其它元素代替选项卡单击事件来切换选项卡?
例:var $tabs = $('#example').tabs(); // 第一个标签被选中
$('#my-text-link').click(function() { // 绑定单击事件
    $tabs.tabs('select', 2); // 切换到第三个选项卡标签
    return false;
});
4.3 如何立刻选择刚添加的选项卡标签?
例:var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});
4.4 如何在一个新窗口中打开选项卡标签?
例:$('#example').tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, 'load.tabs');
        return false;
    }
});

转载于:https://www.cnblogs.com/lijia7436/archive/2010/03/31/1701194.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/549266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库操作:添加、插入、更新语句

SQL常用命令使用方法: (1) 数据记录筛选: sql"select * from 数据表 where 字段名字段值 order by 字段名 [desc]" sql"select * from 数据表 where 字段名 like %字段值% order by 字段名 [desc]" sql"select top 10 * from 数…

领域驱动设计的简略设计步骤

首先,需要根据需求建立一个初步的领域模型,至少要识别出领域对象和领域对象之间的关系(可以是没有方向的关联关系)。这些领域对象只应该放在领域层中。如果存在应用职责,可以识别出应用类。它们用来协调领域对象&#…

Struts2中Action访问Servlet API的三种方法

在通常的web开发中Request和Response对象比较常见,但在Struts2框架中由于Action能与JSP页面进行数据交互,所以通常都不会用到这两个对象。如果想在Struts2程序中用到这两个对象,也有解决方法 Struts2的Action并未直接与任何Servlet API耦合&a…

JavaScript 经典代码大全2

1.让浏览器窗口永远都不出现滚动条。 <body style"overflow-x:hidden;overflow-y:hidden">或<body style"overflow:hidden"> 或<body scrollno> 2&#xff0c;没有水平滚动条 <body style"overflow-x:hidden"> 3&am…

思科CCNA第一学期期末考试答案

1 第 3 层头部包含的哪一项信息可帮助数据传输&#xff1f; 端口号 设备物理地址 目的主机逻辑地址 虚拟连接标识符 2 IP 依靠 OSI 哪一层的协议来确定数据包是否已丢失并请求重传&#xff1f; 应用层 表示层 会话层 传输层 3 请参见图示…

电视剧潜伏的真正结局

李崖没有死&#xff0c;潜伏真正的结局其实是这样的&#xff1a;  李涯没有死。这是个秘密&#xff0c;余则成不知道&#xff0c;站长吴敬中知道&#xff0c;因为这是个阴谋。李涯坠楼后&#xff0c;立刻被秘密送到了天津陆军医院&#xff0c;医生保住了他的命&#xff0c;但…

思科CCNA第二学期期末考试答案

1.关于数据包通过路由器传输时的封装和解封的叙述&#xff0c;下列哪三项是正确的&#xff1f;&#xff08;选择三项。&#xff09; 路由器修改 TTL 字段&#xff0c;将其值减 1。 路由器将源 IP 更改为送出接口的 IP。 路由器保持相同的源 IP 和目的 IP。 路…

子网掩码与子网个数、主机地址个数的关系

IP地址&#xff1a; IP地址由网络号&#xff08;Network ID&#xff09;和主机号&#xff08;Host ID&#xff09;两部分组成。网络号标识的是Internet上的一个子网&#xff0c;而主机号标识的是子网中的某台主机。IP地址根据网络号和主机号的数量而分为A、B、C三类。 A类IP地址…

SQL Server 2005 高级程序设计 学习笔记(2)

1、替代inner join, left join(*), right join(*) select A.UserID, B.WorkFlowStatus from A ,B B where A.UserIDB.UserID 这样就可以替代Inner join select A.UserID, B.WorkFlowStatus from A ,B B where A.UserID*B.UserID 通过*或*替代 2、update的多种格式 表A有…

可汗学院 统计学(12到34集)

学习之前&#xff0c;需强调&#xff1a;概率是已知模型和参数&#xff0c;推数据&#xff1b;而统计是已知数据&#xff0c;推模型和参数。 第十二集&#xff1a;样本与总体   首先&#xff0c;为何需要样本呢&#xff1f;因为人类并不能总是获取总体数据&#xff0c;例如&…

关于xrdp的安装设置

参考链接http://linuxfan-linuxtips.blogspot.com/2010/03/get-xrdp-to-work-in-ubuntu.htmlhttp://chip.twbbs.org/blog/?p658http://www.mexlinux.com/how-to-install-xrdp-in-ubuntu/首先&#xff0c;你必须remove vnc4server&#xff0c;这个东西和这个软件有冲突sudo apt…

35-46集 中心极限定理、置信区间

第三十五集 中心极限定律   该定律是说随着样本n越来越大&#xff0c;这n个样本的m个均值会趋于正态分布。与大数定律的区别在于&#xff1a;大数定律描述的样本均值趋于总体均值&#xff0c;而中心极限定律描述的是样本均值的分布。 第三十六、七集 样本均值的抽样分布   …

AS3自制按钮通用代码

系统提供按钮不大适合现在的很多实用&#xff0c;很多都是MC做的&#xff0c;很多情况要些很多代码…… 代码 stop();addEventListener(MouseEvent.MOUSE_OVER,MouseOver);addEventListener(MouseEvent.MOUSE_UP,MouseOver);addEventListener(MouseEvent.MOUSE_DOWN,MouseDown)…

JavaScript定义类的几种方式

1&#xff0e;工厂方式javaScript中创建自己的类和对象&#xff0c;我们应该是必须掌握的&#xff0c;我们都知道javaScript中对象的属性可以在对象创建后动态定义&#xff0c;比如下面的代码&#xff1a;<script type"text/javascript">//定义var oCar new O…

统计学(可汗学院视频62-81集笔记)

资料链接 本次统计学学习以网易云可汗学院公开课为主&#xff1a; 视频链接&#xff1a;http://open.163.com/special/Khan/khstatistics.html 并以《深入浅出统计学》为辅&#xff1a; 书籍链接&#xff1a;https://pan.baidu.com/s/1dCV6rrOWZU-deKxAoectGA </div…

InnerText和InnerXml的区别

InnerText无格式显示里面的所有内容&#xff0c;InnerXml含有格式的显示&#xff1b;应该和InnerText和InnerHtml是一样的。 XmlDocument doc new XmlDocument(); doc.LoadXml("<root>" "<elem>some text<child/>more text</elem>&qu…

可汗学院统计学笔记 42-81集

假设检验 假设检验是推论统计中用于检验统计假设的一种方法。而“统计假设”是可通过观察一组随机变量的模型进行检验的科学假说。一旦能估计未知参数&#xff0c;就会希望根据结果对未知的真正参数值做出适当的推论。统计上对参数的假设&#xff0c;就是对一个或多个参数的论述…

再谈js拖拽(一)

关于js拖拽早已是老生常谈&#xff0c;网上一搜一大坨&#xff0c;但是有很多并不是很完善&#xff0c;或者兼容性不够&#xff0c;或者功能不全&#xff0c;并且这样的东西还是自己写的好用。我打算在&#xff08;一&#xff09;中主要对js拖拽功能的注意点进行罗列&#xff0…

2019 CCPC - 网络选拔赛 A题^^

一个多月前打的&#xff0c;但是由于一点事情一直没写关于A题的反思&#xff0c;今天有空果断补上: Problem Description Bit operation is a common computing method in computer science ,Now we have two positive integers A and B ,Please find a positive integer C th…

用户态和核心态的转换

用户态和内核态的转换 1&#xff09;用户态切换到内核态的3种方式 a. 系统调用 这是用户态进程主动要求切换到内核态的一种方式&#xff0c;用户态进程通过系统调用申请使用操作系统提供的服务程序完成工作&#xff0c;比如前例中fork()实际上就是执行了一个创建新进程的系统调…