Plugin jQuery Popin

Téléchargements

Source non compressée (5,83 ko)

Source compressée (3,90 ko)

Image du loader (66×66 px, 6,66 ko)

Auteur

Samuel Le Morvan (Contact)

Version

2.0

Dernière Mise à jour

1 Avril 2009

Infos

Fonctionnement

Exemples

CSS

Historique de version

Fonctionnement

• Code non Intrusif
• Testé et fonctionnel sur :
  • IE6
  • IE7
  • FF3
  • SF3
  • OP9
  • GC1
• Application aux liens (balise <a>)
• Requête Ajax sur les url href des liens
• Options paramétrables :

  width

  Largeur de la popin

  height

  Hauteur de la popin

  className

  class CSS de votre popin

  loaderImg

  Image du loader

  opacity

  Opacité du voile (0 à 1)

  onStart

  Fonction déclenchée au démarrage de la popin

  onComplete

  Fonction déclenchée à la fin du chargement de la popin

  onExit

  Fonction déclenchée à la fermeture de la popin

• Fermeture via un lien automatiquement intégré dans la popin ou touche Esc.
• Blocage du scroll lorsque la popin est affichée
• Popin toujours centrée si on resize la fenêtre

Exemples

Exemple №1

Popin par défaut sans styles CSS.

Voir la Popin №1

$("a.popin-open-01").popin();

Exemple №2

Popin avec une taille définie, une classe CSS personnalisée et une image de loader.

Voir la Popin №2

$("a.popin-open-02").popin({
	width:500,
	height:200,
	className: "mypopin",
	loaderImg : 'ajax-loader.gif'
});

.mypopin {
	color:#FFF;
	background:#333;
}

Exemple №3

Popin avec en plus une opacité de voile paramétrée.

Voir la Popin №3

$("a.popin-open-03").popin({
	width:400,
	height:300,
	className: "mypopin2",
	loaderImg : 'ajax-loader.gif',
	opacity: .8
});

.mypopin2 {
	color:#000000;
	padding:10px;
	text-align:justify;
	text-indent:5px;
	background:#FFF;
	border-radius:1em;
	-moz-border-radius:1em;
}
.mypopin2 .popin-content {
	padding:10px;
}
.mypopin2 .popin-content p {
	padding:0;
	margin:0 0 1em;
}

Exemple №4

Popin avec des fonctions de callback

Voir la Popin №4

$("a.popin-open-04").popin({
	width:600,
	height:100,
	className: "mypopin3",
	loaderImg : 'ajax-loader.gif',
	opacity: .6,
	onStart: function() {
		alert("Start")
	},
	onComplete: function() {
		alert("Complete")
	},
	onExit: function() {
		alert("Exit")
	}
});

.mypopin3 {
	color:#FFF;
	padding:10px;
	text-align:justify;
	text-indent:5px;
	background:#C00;
	border-radius:.5em;
	-moz-border-radius:.5em;
}
.mypopin3 .popin-content {
	padding:10px;
}
.mypopin3 .popin-content p {
	padding:0;
	margin:0 0 1em;
}

Exemple №5

Popin avec des liens de fermeture

Voir la Popin №5

$("a.popin-open-05").popin({
	width:250,
	height:250,
	className: "mypopin4",
	loaderImg : 'ajax-loader.gif'
});

.mypopin4 {
	color:#FFF;
	padding:10px;
	text-align:justify;
	text-indent:5px;
	background:#906;
	border-radius:.5em;
	-moz-border-radius:.5em;
}
.mypopin4 .popin-content {
	padding:10px;
}
.mypopin4 .popin-content p {
	padding:0;
	margin:0 0 1em;
}

Historique de version

1.0

1^er Février 2009 : Première beta

2.0

1^er Avril 2009 :

• Définition de la taille de la popin dans les paramètres
• Suppression de l'intégration d'office du bouton fermer
• Ajout de fonctions de callback
• Fermeture de la popin sur un clic externe
• Internalisation des styles CSS
• Résolution de bug sur l'ouverture de la popin