大家好，对jQuery 浅析给Tabs控件添加两个方法next和prev、事件beforegotonext功能感兴趣的小伙伴，下面一起跟随三零脚本的小编来看看jQuery 浅析给Tabs控件添加两个方法next和prev、事件beforegotonext功能的例子吧。

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

源代码

/**
 * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
 *
 * @param 
 * @arrange (三零脚本) www.q3060.com
 **/
(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);

方法

next使Tabs前进，如果当前步骤的下一步（或多步）为禁用或不可见状态，会自动跳过。
prev使Tabs后退，如果当前步骤的上一步（或多步）为禁用或不可见状态，会自动跳过。

/**
 * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
 *
 * @param 
 * @arrange (三零脚本) www.q3060.com
 **/
$("#tabs").tabs("next");
$("#tabs").tabs("prev");

事件

beforegotonext事件在Tabs前进之前发生。如果Tabs没有前进的可能，这个事件不会触发，比如当前步骤为最后一步（或者后续的步骤都为禁用或不可见状态）调用$(“#tabs”).tabs(“next”)不会触发此事件。
beforegotonext在Tabs原生select事件之前触发。

适用场合：beforegotonext只在单独处理next方法时适用，否则用select事件是最好的选择。

/**
 * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
 *
 * @param 
 * @arrange (三零脚本) www.q3060.com
 **/
$("#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;
  }
});