jQuery 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例

感兴趣的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。
现将jQuery的Tabs控件添加了两个方法next和prev及一个事件beforegotonext，以便更好的支持用户操作。

源代码

/**
 * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
(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 (编程之家) jb51.cc
 **/
$(#tabs).tabs(next);
$(#tabs).tabs(prev);

事件

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

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

/**
 * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
 *
 * @param 
 * @arrange (编程之家) jb51.cc
 **/
$(#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;
  }
});

原文地址：https://www.jb51.cc/jquery/527457.html