JQueryUI(二):Tabs(第二部分)

3:Tab事件

      tab组件定义了一系列的属性用来回发对应的方法,如add、disable、enable、load、remove、select、show,通过这些属性,我们可以很方便地对不同的情况来添加代码,并且通常在动作执行前就会回发,所以我们可以用return false来阻止将要发生的动作。我们也可以使用bind()方法来绑定event handler来实现相同的效果。如:

$(“#myTabs”).bind('tabsselect', function(event, ui) {
ui.tab     // 被选中(点击后)的选项卡元素
ui.panel   //这个元素包含被选中(点击后)的选项卡的内容
ui.index   //返回一个被选中(或点击后)选项卡的索引值(从0开始)
});

但是我们利用上面介绍的callback方式,会变得简洁起来,如:

$(document).ready(function () {
var tabOpts = {
     select: function (event,tab) {
              alert("The tab at index"+tab.index+"was selected");
     }
  };
     $("#myTabs").tabs(tabOpts);
});

两个参数会自动地传到方法中,第一个是原始的event对象,第二个是含有从tab中带来的许多有用的属性的自定义对象。

4:Tab方法

4.1:enable和disable,设置某个选项卡可用和不可用。如:

$("#myTabs").tabs("enable", 0);

$("#myTabs").tabs("disable", 1);

4.2:add和remove,添加和删除选项卡

//删除
$("#remove").click(function() {
    var indexNumber = $("#indexNum").val() - 1;
    $("#myTabs").tabs("remove", indexNumber);
});
//增加
$("#add").click(function() {
    var newLabel = "A New Tab!"
    $("#myTabs").tabs("add", "#newTab", newLabel);
});

M]Y8@X6YMO@}0KUGGDVLL}8

SZ)5JQ7WGTK7MXXHN}5]06K

4.3:select,选择一个选项卡标签,从0开始。

4.4:rotate:自动翻选项卡标签。如

$("#myTabs").tabs().tabs("rotate", 1000, true);第二个参数为时间。(毫秒)

4.4:destroy:销毁。

标签: JQuery
posted @ 2009-09-23 21:01 sunfishlu 阅读(483) 评论(1) 编辑 收藏

 回复 引用 查看   
#1楼 2010-01-29 10:17 雪痕-shawen      
jQuery中的ui.tabs.js 这个插件,(tab应用了母版)每个tab都是加载的一个aspx页面,当我在这个ajax加载的页面用了一个GridView和DropdownList控件,当DropdownList选项发生变化的时候GridView中的数据刷新,但是好像不起作用,而且我在上面做了其他查询,当我点击查询按钮的时候,页面发生跳转,而不是在tab所在的页面执行操作?
还有,在这个页面中用了My97DataPicker控件后,在tab页面也无法选择日期时间?
为什么在单独的页面就没问题,在tab页中用就会有问题呢?

有解么??、