现将jQuery的Tabs控件添加了两个方法next和prev及一个事件beforegotonext,以便更好的支持用户操作。
源代码
/** * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例 * * @param * @arrange (512.笔记) 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);
@H_404_6@方法
next使Tabs前进,如果当前步骤的下一步(或多步)为禁用或不可见状态,会自动跳过。
prev使Tabs后退,如果当前步骤的上一步(或多步)为禁用或不可见状态,会自动跳过。/** * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例 * * @param * @arrange (512.笔记) jb51.cc **/ $("#tabs").tabs("next"); $("#tabs").tabs("prev");
@H_404_6@事件
beforegotonext事件在Tabs前进之前发生。如果Tabs没有前进的可能,这个事件不会触发,比如当前步骤为最后一步(或者后续的步骤都为禁用或不可见状态)调用$(“#tabs”).tabs(“next”)不会触发此事件。
beforegotonext在Tabs原生select事件之前触发。
适用场合:beforegotonext只在单独处理next方法时适用,否则用select事件是最好的选择。/** * 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例 * * @param * @arrange (512.笔记) 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; } });
@H_404_6@