11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je suis confronté à un bon casse tête ces derniers jours et je ne trouve pas de solution.

J'ai créé un plugin maison gérant des tabs. Une des particularité du plugin est le besoin d'avoir des tabs statiques et aussi en ajax. Jusque là pas trop de souci. Mais histoire encore une fois d'agrémenter le plugin (et répondre à ce que j'ai besoin de faire), je dois gérer un historique, pouvoir me balader entre tabs avec le précédent suivant du navigateur.

J'utilise donc le plugin http://www.mikage.to/jquery/jquery_history.html qui nécessite un callback à l'init.

Problème : si j'ai plusieurs tabs dans la page, le callbak (qui est une fonction qui load le contenu correspondant au # contenu dans l'url) ne garde que le dernier élément du DOM. Or, j'aurais besoin que ça soit un callback associé à chaque tabs.

Est-ce que quelqu'un a une idée ?

Merci
Oups, effectivement.

Voici le code de mon plugin (je débute en JS hein)


$.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


+ le code de plugin history dans le premier message.

Dans mon html, rien de particulier (juste un ul.tabs avec des liens).
Merci akouabon,

en fait je souhaite plutôt débugguer grâce au forum ce plugin fait maison (et comprendre mon erreur) que prendre un autre plugin. Smiley smile