Hi, I'm working on my own plugin jquery but I have a issue and I don't find any solution. The plugin handles tabs. One main feature about this homemade plugin is to manage static en ajax tabs and an history. When the user click on back or forward button, tabs is reloaded.
So I use this plugin for history http://www.mikage.to/jquery/jquery_history.html which requires a callback (init). My issue : if I have many tabs on my page, the callback (it's a function that loads the content match in URL (#) remembers only the last DOM element. I need that is a callback associate for each tabs. Plese find below my code ---------------------------------------------------------------------------------------------------------------------------- $.fn.myTabs = function(options) { /* GLOBAL VARIABLES --------------------------------------------------------------------------------------- */ var obj = $(this); var currentLocation = ""; var currentLocationHash = document.location.hash; var newHash = ""; var boolHash = true; /* PLUGIN DEFAULT VARIABLES --------------------------------------------------------------------------------------- */ var defaults = { element_tab: obj.next("div"), // elementstoTab element_link: obj.find("li a") // link }; /* CUSTOM VARIABLES IN PARAM --------------------------------------------------------------------------------------- */ var options = $.extend(defaults, options); obj.each(function() { init(); }); /* init() --------------------------------------------------------------------------------------- */ function init() { applyTabs(); $.history.init(checkTabUrl); } /* applyTabs() --------------------------------------------------------------------------------------- */ function applyTabs() { obj.addClass("tabs"); options.element_link.click( function() { boolHash == true; newHash = $(this).attr("href").replace(/^.*#/, ''); $.history.load(newHash); return false; }); } /* checkURL() --------------------------------------------------------------------------------------- */ function checkTabUrl() { currentLocationHash = document.location.hash if (currentLocationHash != "") { verifDOM(currentLocationHash); } } /* verifDOM() --------------------------------------------------------------------------------------- */ function verifDOM(element) { var countElement = 0; var regPattern = '/' + element + '$/'; var regex = new RegExp( eval(regPattern) ); var response = false; var urlAjax = ""; $("ul.tabs").each( function() { $(this).find("li a").each( function () { response = regex.test( $(this).attr("href") ); if ( response == true ) { countElement = countElement + 1; urlAjax = $(this).attr("href").split(regex)[0]; } }); }); if (countElement == 1 && urlAjax != "" ) { loadTab(urlAjax); } } /* loadTab() --------------------------------------------------------------------------------------- */ function loadTab(urlAjax) { obj.children("li").removeClass("active"); var elt = obj.find("li a[href*='" + urlAjax + "']"); elt.parent("li").addClass("active"); $.ajax( { type: "GET", url: urlAjax, datatype: "html", cache: false, success: function(response) { $(".ajax-loading").fadeOut(); options.element_tab.fadeOut(function(){ options.element_tab.html(response).fadeIn(); } ); $(".ajax-loading").fadeOut(); }, beforeSend: function() { if ( $(".ajax-loading").length < 1 ) { options.element_tab.append("<div class='ajax-loading'></div>"); $(".ajax-loading").fadeIn(); } } }); } };// end plugin ---------------------------------------------------------------------------------------------------------------------------- Any have idea to solve my problem ? Thanks a lot (sorry for my bad english, I'm french :D)
