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

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中文文档

时间: 2024-10-05 07:33:24

获取JQuery UI tabs中被选中的tabs的方法的相关文章

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如下: 使用Select2,主要是因为它支持下拉式搜索.所以在数据稍微多一点,作为搜索选择功能的首选.但是运行出来之后,发现搜索框无法点击.开始想到的index不够大,被其他的元素覆盖了.但是跳转z-index也无法解决.在普通的页面,搜索框是ok的. 2.解决办法 通过Google搜索,发现sele

jquery ui resize 中的alsoresize在样式border-box的bug修正

jquery ui resize 中的alsoresize在有样式border-box时,如在与 bootstrap 一起使用时会发生问题,每次 resize 时,alsoresize 对应的控件都会自动缩小几个像素. 现有人修复了这个问题,但 jquery ui 貌似没有把这个修复加到当前版本中,也不知什么原因(要在1.11.5版本后再修复?).修复的代码在: https://github.com/jquery/jquery-ui/pull/1451

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

这是由于tabs对href重载的的问题导致,因此我们需要将href更改为其它自定义的属性即可避免此问题的发生. 解决方法如下: 第一步页面端: 循环体开始 <li> <div><a target="tagFrame" href="@n.Url" ><span class="icon icon-sys"> </span>@n.Title</a></div> <

jQuery UI的下拉框显示不全解决方法

解决前,显示不全,select下拉框某些选项无法看到: <script type="text/javascript"> $("#cond_EPARCHY_CODE").selectmenu(); </script> 解决后: <style> .overflow { height: 200px; } </style> <script type="text/javascript"> $(&q

【软件测试】UI测试中遇到的问题和解决方法

        2014年4月10日,第一次上机课,要求对win8 App应用程序进行黑盒测试,但在观看视频教程后的实际操作中,却遇到很多困难.下面将自己遇到的问题和解决办法和大家一起分享,希望能得到更多意见和经验. [问题1]录制按钮是灰色,无法使用 (1)文件->新建->项目->Windows应用商店->编码的UI项目测试(Windows应用商店应用) (2)在弹出对话框中点击确认 (3)成功出现UIMap,但录制键却是灰色的 相信好多同学和我一样的苦恼,怎么办呢?大多数同学会

jquery判断字符串中是否包含特定字符的方法总结

方法一:使用indexOf() 和lastIndexOf()方法 案例: var Cts = "bblText"; if(Cts.indexOf("Text") >= 0 ) { alert('Cts中包含Text字符串'); } indexOf用法: 返回 String 对象内第一次出现子字符串的字符位置. strObj.indexOf(subString[, startIndex]) 参数 strObj 必选项.String 对象或文字. subStrin

利用 jQuery UI 和 Ajax 创建可定制的 Web 界面

如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化.个性化的主页或仪表板页面(例如 iGoogle.MyYahoo! 和 MyAOL)日渐普及,大多数 Web 应用程序内甚至也整合了类似的功能.jQuery 库简化了此类复杂 JavaScript 交互的编写,随着 jQuery UI 的引入,这项功能得到了进一步的简化,该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型. 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可

jquery ui动态切换主题的一种实现方式

这两天看coreservlets上的jQuery教程,虽然比较老了,不过讲得还是不错. 最后一部分讲jQuery ui 主题切换,用他介绍的方法实现不了.于是自己修改了下,可以了. 代码如下: html部分: <fieldset class="ui-widget"> <legend>Changing Themes (Skins) at Run Time</legend> <div class="ui-widget-content ui

jQuery UI 1.11 Dialog 垂直居顶,水平居中(头部居中)

jQuery Version: 1.10.2 jQuery UI Version:1.11 Dialog Position setting code: position{ my: "center top", at: "center top", of: window } ---------------------------------------------------------------------------------------- 以下只是我个人记录的内