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