jQuery 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
内容摘要
这篇文章主要为大家详细介绍了jQuery 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc
对此感兴趣的朋友，看看idc
文章正文
这篇文章主要为大家详细介绍了jQuery 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例，具有一定的参考价值，可以用来参考一下。
对此感兴趣的朋友，看看idc笔记做的技术笔记。现将jQuery的Tabs控件添加了两个方法next和prev及一个事件beforegotonext，以便更好的支持用户操作。源代码
/**
* 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例
*
* @param
* @arrange （www.idcnote.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.idcnote.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.idcnote.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;
}
});注：关于jQuery 给Tabs控件添加两个方法next和prev、一个事件beforegotonext功能实例的内容就先介绍到这里，更多相关文章的可以留意
代码注释
作者：喵哥笔记
