jQuery hashchange plugin issue
i've an issue with Ben Alman's hashchange event plugin and my custom Tabs_Plugin. Every time the hashchange event was triggered or i've clicked a tab link the page jumps to the top of the page.
Normally i solve those problems simply by adding return false
or event.preventDefault
to the links but in this case it is not working for me.
If i add return false
the whole p开发者_如何学Clugin stops to work. Take a look: http://gearsdigital.com/sandbox/usecase/tabs/
Here is the relevant plugin code. I've included the hashchange plugin above (not included here).
// hashchange plugin here
(function ($) {
var tabs = {
init : function (element, options) {
tabs.menu(element, options);
tabs.navigation(element, options);
$(window).hashchange();
},
// Build tab navigation from headlines
menu : function (element, options) {
var menulist = '';
element.find(options.menusource).each(function () {
var el = $(this), plaintext = el.text(), parent = el.parent(), itemID = plaintext.split(" ").join("").toLowerCase();
menulist += '<li><a href="#' + itemID + '">' + plaintext + '</a></li>';
parent.attr('id', itemID);
});
element.prepend('<ul class="' + options.menuclass + '">' + menulist + '</ul>');
element.find(options.tabbody).wrapAll('<div class="'+options.wrapperclass+'"></div>');
},
navigation : function (element, options) {
$(window).hashchange(function () {
var menu = $('.' + options.menuclass);
var hash = location.hash || menu.find('a:first').attr('href');
if (hash) {
menu.find('a').each(function () {
var that = $(this);
that[that.attr('href') === hash ? 'addClass' : 'removeClass'](options.currentclass);
});
tabs.hidetab(element, options);
tabs.showtab(element, hash, options.onShow);
} else {
menu.find('a:first').addClass(options.currentclass);
}
});
},
showtab : function(element, hash, onShow){
element.find(hash).show(0, onShow);
},
hidetab: function(element, options){
element.find(options.tabbody).hide();
}
};
$.fn.extend({
cctabs: function (config, onShow) {
var defaults = {
wrapperclass: 'tab-content',
currentclass: 'current',
menuclass : 'tabmenu',
menusource: 'h2',
tabbody: '.tab',
onShow: null
};
var options = $.extend(defaults, config);
return this.each(function () {
var element = $(this);
tabs.init(element, options);
});
}
});
})(jQuery);
What about using Jquery Tools tabs plugin with the history plugin also from Jquery Tools.
精彩评论