改进jQuery UI的Tabs

现将jQuery的Tabs控件添加了两个方法next和prev及一个事件beforegotonext,以便更好的支持用户操作。

源代码

(function($) {    
    $.extend($.ui.tabs.prototype, {
        next: function() {
            var self = this, o = this.options;
            var i = o.selected;
            var n = i + 1;
            while ((n < self.anchors.length) &&
            (self.lis.eq(n).hasClass('ui-state-disabled') ||
            (self.lis.eq(n).css("display") == "none"))) {
                n++;
            }
            if (n < self.anchors.length) {
                if (self._trigger('beforegotonext',
                    null,
			              self._ui(self.anchors[i],
			              self.panels[i])) !== false)
	                  self.select(n);
            }
        },
        prev: function() {
            var self = this, o = this.options;
            var p = o.selected - 1;
            while ((p >= 0) &&
            (self.lis.eq(p).hasClass('ui-state-disabled') ||
            (self.lis.eq(p).css("display") == "none"))) {
                p--;
            }
            if (p >= 0)
                self.select(p);
        }
    });
})(jQuery);

方法

  1. next使Tabs前进,如果当前步骤的下一步(或多步)为禁用或不可见状态,会自动跳过。
  2. prev使Tabs后退,如果当前步骤的上一步(或多步)为禁用或不可见状态,会自动跳过。
$("#tabs").tabs("next");
$("#tabs").tabs("prev");

事件

  1. beforegotonext事件在Tabs前进之前发生。如果Tabs没有前进的可能,这个事件不会触发,比如当前步骤为最后一步(或者后续的步骤都为禁用或不可见状态)调用$(“#tabs”).tabs(“next”)不会触发此事件。
  2. beforegotonext在Tabs原生select事件之前触发。
  3. 适用场合:beforegotonext只在单独处理next方法时适用,否则用select事件是最好的选择。
$("#tabs").tabs({
	"beforegotonext": function(event, ui) {
		// anchor element of the selected (clicked) tab
		var tab = ui.tab;
		// element, that contains the selected/clicked tab contents
		var panel = ui.panel;
		// zero-based index of the selected (clicked) tab
		var index = ui.index;
	}
});

发表评论