all html : Le portail des webmaster
La communauté ALL HTML c'est 58880 membres à ce jour dont 6 inscrits aujourd'hui et 38 depuis une semaine.
Cet article est actuellement publié sur le site.
Article publié le mercredi 07 juin 2006 par koala64.
Cet article est classé dans les catégories « Javascript »
Ce script est un gestionnaire de popup. Il est non intrusif (pas de code javascript dans la partie XHTML). Son principe est d'ouvrir chaque lien possédant une classe 'popup' dans une popup unique. Un paragraphe contenant un lien pour fermer la popup est généré sur la page principale.
<script src="popup.js" type="text/javascript"></script><a href="http://koalnet.com" class="popup">Koalnet</a><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Gestionnaire de popup (DOM)</title>
<script src="popup.js" type="text/javascript"></script>
</head><body>
<ul>
<li><a href="http://www.allhtml.com">Allhtml</a></li>
<li><a href="http://koalnet.com" class="popup">Koalnet</a></li>
<li><a href="http://www.alsacreations.com" class="popup">Alsacreations</a></li>
</ul>
</body></html>/**********************************************
Gestionnaire de popup (DOM)
koala64
**********************************************/
// Raccourci pour le script
var d = document;
// Creation d'un objet
var o = new Object;
// Creation d'une variable globale
var oNewWin = null;
// Proprietes Link de l'objet
o.Link =
{
// Gestionnaire de l'evenement onclick pour chaque lien du document
ClickHandler: function()
{
// On recupere l'ensemble des liens dans un tableau puis
// on parcourt le tableau. Si le lien possede une classe 'popup',
// on lance la fonction popup.
var oLink = d.getElementsByTagName( 'body' )[0].getElementsByTagName( 'a' );
for( var a = 0 ; a < oLink.length ; a++ )
if( oLink[a].className == 'popup' )
oLink[a].onclick = o.Popup.__Open;
},
// Creation d'un lien dans la page principale pour supprimer la popup
Destroy: function()
{
// On cree un paragraphe contenant un lien en lui donnant un identifiant,
// ce qui permet de le manipuler via css...
var oBody = d.getElementsByTagName( 'body' )[0];
var oP = d.createElement( 'p' );
oP.setAttribute( 'id' , 'popup' );
var oLink = d.createElement( 'a' );
oLink.setAttribute( 'href' , '#' );
var oTextLink = d.createTextNode( '' );
oTextLink.data = 'Fermer la popup';
oBody.appendChild( oP );
oP.appendChild( oLink );
oLink.appendChild( oTextLink );
// On affecte au lien la methode de fermeture de popup.
oLink.onclick = o.Popup.__Close;
}
}
// Proprietes Popup de l'objet
o.Popup =
{
// Methode d'ouverture de la popup
__Open: function()
{
// Si la popup n'existe pas, on en cree une avec le lien concerne puis
// on annule l'activation du lien dans la fenetre principale.
if( !oNewWin || oNewWin.closed )
{
oNewWin = window.open( this.href , '' , 'top=' + ((screen.height/2)-150) + ' , left=' + ((screen.width/2)-400) + ' , width=800 , height=300 , scrollbars=yes' );
return false;
}
// Si la popup existe et qu'on clique sur un autre lien possedant une classe 'popup',
// on passe l'url a la popup, on lui redonne le focus puis on annule l'activation du
// lien dans la fenetre principale.
else if( oNewWin && this.className == 'popup' )
{
oNewWin.location.href = this.href;
oNewWin.focus();
return false;
}
// Pour les autres cas, on active le lien dans la fenêtre principale.
else
{
return true;
}
},
// Methode de fermeture de la popup.
__Close: function()
{
if( oNewWin )
{
oNewWin.close();
oNewWin = null;
return false;
}
}
}
// Proprietes Script de l'objet
o.Script =
{
// Initialisation de l'objet
Init: function()
{
o.Link.ClickHandler();
o.Link.Destroy();
}
}
// Chargement de l'objet au lancement de la page.
window.onload = o.Script.Init;Plus d'informations sur :