jQuery – Documentation de pp3Diso

Posted on by
3

pp3Diso est un plugin jQuery permettant l’affichage et la gestion d’une carte 2D isométrique.

Je n’avais pas eu le temps de faire la documentation complète de ce plugin, c’est désormais chose faite.

Vous trouverez donc la documentation sur la page dédiée au projet.

Au passage, le projet a beaucoup évolué depuis sa première mise en ligne : le plugin permet l’affichage d’une carte en 2D (ou en 3D en abus de langage) isométrique sur pratiquement tous les navigateurs et sur les mobiles.
Il gère le déplacement de la map sur les mobiles au doigt (et à l’œil…).

Les prochaines améliorations porteront sur une optimisation de taille. En effet, actuellement, le plugin ne peut pas gérer des maps plus grandes que 100×100 cases ou 50×50 si le pathfinding est activé. Au-delà de cette limite, le plugin devient trop lent. Le but est donc de porter cette limite à 500×500 avec ou sans pathfinding.

Sachant qu’il est également possible d’utiliser plusieurs maps sans recharger la page, cette limite peut-être dépassée aujourd’hui.

Plusieurs exemples ont été mis en ligne depuis, n’hésitez pas à regarder le code sur le site dédié.

jQuery – ppSlide : un slider minimaliste

Posted on by
2

Voilà un slider réellement minimaliste. Il permet d’afficher une série de photos avec des effets et, éventuellement, un texte.

Il est tout petit puisqu’il tient dans 1.35Ko. Et il est très simple à installer.

Et il fonctionne sans problème sous IE6 et supérieur, Firefox, Safari, …

La démo

Télécharger le code (zip)

Paramètres

  • delay : le temps de transition (en millisecondes. Défaut : 1500)
  • pauseTime : le delay entre 2 photos (en millisecondes. Défaut : 5000)
  • effectIn : le type d’effet pour afficher une photo (‘fade’, ‘slide’ ou ‘show’. Défaut : ‘fade’)
  • effectOut : le type d’effet pour masquer une photo (‘fade’, ‘slide’ ou ‘show’. Défaut : ‘fade’)

Exemple :

$('#slider-wrapper').ppSlide({
	delay:1000,
	pauseTime:5000,
	effectOut:'fade',
	effectIn:'slide'
});

jQuery – ppTextarea : gestion des textarea

Posted on by
Reply

Toujours le problème courant avec les textarea : gérer le nombre de caractères, les limiter, savoir combien de caractères ont été saisie, …

ppTextarea permet de faire tout ça :

  • indiquer combien de caractères sont saisie
  • valider une limite basse et une limite haute
  • bloquer la saisie si la limite haute est atteinte
  • indiquer si les limites sont atteintes ou non par une image

Fonctionne sous IE6 et plus, Firefox, Safari

La démo

Télécharger le code (zip)

Paramètres

  • min : limite basse. 0 si pas de limite (défaut : 0)
  • max : limite haute. 0 si pas de limite (défaut : 0)
  • idMeter : id de la balise qui contiendra le nombre de caractères saisies (défaut :  »)
  • textMeter : texte après le nombre (défaut :  »)
  • idCheck : id de la balise qui contiendra l’image de validité (défaut :  »)
  • imgYes : nom du fichier de l’image ‘valide’ (défaut :  »)
  • txtYes : texte de l’attribut « alt » de l’image valide (défaut : ‘Bon’)
  • imgNo : nom du fichier de l’image ‘non valide’ (défaut :  »)
  • txtNo : texte de l’attribut « alt » de l’image non valide (défaut : ‘Pas bon’)
  • stop : bloque la saisie si le nombre de caractères dépasse la limite haute. true ou false (défaut : true)

Exemple :

$(document).ready(function() {
	$('#texte').ppTextarea({
		min:10,
		max:50,
		idMeter:'compteur',
		textMeter:' / 50',
		idCheck:'check',
		imgYes:'images/yes.png',
		imgNo:'images/no.png',
		stop:false
	});
});

jQuery – ppComm : de jolis commentaires

Posted on by
Reply

Premier plugin à ouvrir le bal : ppComm

Il permet l’affichage de commentaires ou des actualités. Mais vous pouvez afficher tout ce qui se trouve entre les balises « blockquote ».

Les commentaires s’affichent un par un, puis en rotation n commentaires.

Fonctionne sous IE6 et plus, Firefox, Safari

La démo

Téléchargez le code (zip)

Paramètres

  • delayQuote : le délais entre 2 commentaires. En millisecondes (défaut : 3000)
  • delayQuoteEffect : le délais d’affichage d’un commentaire. En millisecondes (défaut : 1500)
  • delayQuoteEffectHide : le délais pour masquer un commentaire. En millisecondes (défaut : 1000)
  • NbrQuotesMax : le nombre de commentaires visibles en même temps (défaut : 2)
  • effectIn : l’effet d’affichage – fade, show, slide (défaut : fade)
  • effectOut : l’effet pour masquer – fade, hide, slide (défaut : hide)

Exemple :

$(document).ready(function() {
	$('#ppComm').ppComm({
		delayQuote: 4000,	//-- 4sec d'attente
		NbrQuotesMax:3,		//-- 3 commentaires visibles
		effectIn: 'slide'	//-- effet d'affichage
	});
});