码迷,mamicode.com
首页 > Web开发 > 详细

获取JQuery UI tabs中被选中的tabs的方法

时间:2017-09-01 15:42:03      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:需要   try   标签   nbsp   get   背景   api   开发者   支持   

JQuery标签事件处理实例

如果你正在使用JQuery tabs而且想从基本的功能扩展到自定义的功能,这是你最好知道如何处理JQuery的点击事件。

 

在这篇文章中:

  1.回顾如何添加当tab被点击时的事件处理

 

背景:

  需要了解的是,JQuery在不断修正的,很多有用的信息只针对于某一特定的老版本,JQuery已经不在支持。

  在这种情况下,JQuery-ui对标签页的事件监听的支持从1.9.x的show命令切换到JQuery-UI 1.10.x的activate命令。

 

处理一个Tab的点击事件在JQuery-UI 1.10.x和JQuery UI 1.9.x

  这是一个用于JQuery-UI 1.10.x的激活tab响应的代码片段在这个页面,将会执行你自己写的代码,当第二个tab被点击。

<script type="text/javascript" >
 $(function () {
 $(‘#tabs‘).tabs({
 activate: function (event, ui) {
 var $activeTab = $(‘#tabs‘).tabs(‘option‘, ‘active‘);
 if ($activeTab == 1) {
 // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
 }
 }
 });
});
 </script>

这是早期版本的JQuery-UI使用show命令。

<script type="text/javascript" >
 $(function () {
 $(‘#tabs‘).tabs({
 show: function (event, ui) {
 var $activeTab = $(‘#tabs‘).tabs(‘option‘, ‘active‘);
 if ($activeTab == 1) {
 // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
 }
 }
 });
});
 </script>

从上面的代码可以看出,JQuery的编写者可以仅仅将show改变成activate由于语法的原因。作为一个开发者,需要记住,如果一部分的JQuery的代码不起作用,最好在猜测是否有bug前,检查一下语言弃用帮助。

 

 

参考资料:

1.JQuery – Example of Tabs Event Handling

2. JQuery中文文档

获取JQuery UI tabs中被选中的tabs的方法

标签:需要   try   标签   nbsp   get   背景   api   开发者   支持   

原文地址:http://www.cnblogs.com/shubin/p/7463353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!