Dator Blog

jQuery Alert Dialogs est un plugin pour jQuery qui vous permet de transformer les alert(), confirm(), prompt() de façon très jolie et très simple.

Comment l’utiliser ?

Pour utiliser cette librairie, il vous suffit d’inclure les fichiers dont vous avez besoin dans votre page HTML :

jAlert()

Est le remplaçant de alert() ce qui va donc créer une alerte basique avec un boutons central OK

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Est le remplaçant de confirm() et nous donne une fenêtre de confirmation avec deux boutons OK et Annuler.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

jPrompt()

Est le remplaçant de prompt() et nous donne une fenêtre avec un champ de texte et un bouton OK.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

Démonstration

Vous pouvez trouver des exemples de démonstration sur cette adresse.

Conseil d’utilisation

Personnellement, autant pousser un peu la librairie si on souhaite l’utiliser. Le but de ce plugin est de remplacer les différentes alertes javascript par des alertes plus jolies. Au lieu de faire appelle  tout le temps au méthode du plugin, je vous propose de créer 3 fonctions qui vont permettre d’utiliser les alertes basiques mais en utilisant le plugin jQuery.

//alert()
var oAlert = alert;
function alert(txt, title) {
    try {
        jAlert(txt, title);
    } catch (e) {
        oAlert(txt);
    }
}
alert("Bonjour", "Bienvenue");

//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
    try {
        jConfirm(txt, title, func);
    } catch (e) {
        if (oConfirm (txt, title)) func();
    }
}
confirm("Bonjour", "Bienvenue", function(){
	alert("Salut", "Reponse");
});

//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
    try {
        jPrompt(txt, input, title, func);
    } catch(e) {
        func(prompt(txt, input, title));
    }
}
prompt("Bonjour", "Nom", "Bienvenue", function(r) {
	if (r) alert(r);
});

• 4 commentaires

Sous ce titre optimiste ce cache un nouveau plugin écrit sur la base de jQuery. Avec jQuery Gestures nous pouvons définir certain événement déclenché avec la souris et leur affecter des actions.

Par exemple, pour savoir si la souris va vers le haut :

//Initialisation du plugin et de la couleur du tracé
$.gestures.init({active:false,color:'#ff0000'});

// Enregistrement d'un nouveau gest (haut)
$.gestures.register('U', function() {
  alert('En haut !');
 });

Simple non?

Allez un peu plus dure maintenant :

// Haut Bas Droite Gauche
$.gestures.register('DLUR', function() {
  alert('Un rectangle !!');
  });

Enfaite, les mouvements sont déjà définis dans le plugin mais vous pouvez re-définir les actions quand ces mouvements sont executés.

Vous pouvez voir une démonstration sur cette page.

• 7 commentaires

Après beaucoup de version bêta, Wordpress vient d’être annoncé pour le 10 décembre 2008. Pour rappel, cette version 2.7 de Wordpress va contenir beaucoup d’amélioration comme une nouvelle administration, des commentaires imbriqués, des sondages personnalisables (plus d’information ici).

Mais pour se préparer convenablement pour ces changements massifs, je vous propose une liste de liens afin de mettre à jour vos plugins et votre thème en restant dans la compatibilité possible :

• Wordpress 2.7 Core Update Host Compatibility
• Wordpress 2.7 Plugins Compatibility
• Wordpress 2.7 Themes Compatibility

Bon développement à tous !

• 1 commentaire

Petit trouvaille du jour (ou de la soirée), je viens de trouver un script pour jQuery qui permet de générer des mots de passes sécurisé. De plus ce plugin permet de vérifier la sécurité d’un mot de passe donné.

Voici le code du plugin :

$.fn.passwordStrength = function( options ){
	return this.each(function(){
		var that = this;that.opts = {};
		that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);

		that.div = $(that.opts.targetDiv);
		that.defaultClass = that.div.attr('class');

		that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;

		 v = $(this)
		.keyup(function(){
			if( typeof el == "undefined" )
				this.el = $(this);
			var s = getPasswordStrength (this.value);
			var p = this.percents;
			var t = Math.floor( s / p );

			if( 100 < = s )
				t = this.opts.classes.length - 1;

			this.div
				.removeAttr('class')
				.addClass( this.defaultClass )
				.addClass( this.opts.classes[ t ] );

		})
		.after('Generate Password')
		.next()
		.click(function(){
			$(this).prev().val( randomPassword() ).trigger('keyup');
			return false;
		});
	});

	function getPasswordStrength(H){
		var D=(H.length);
		if(D>5){
			D=5
		}
		var F=H.replace(/[0-9]/g,"");
		var G=(H.length-F.length);
		if(G>3){G=3}
		var A=H.replace(/\W/g,"");
		var C=(H.length-A.length);
		if(C>3){C=3}
		var B=H.replace(/[A-Z]/g,"");
		var I=(H.length-B.length);
		if(I>3){I=3}
		var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
		if(E<0){E=0}
		if(E>100){E=100}
		return E
	}

	function randomPassword() {
		var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$_+";
		var size = 10;
		var i = 1;
		var ret = ""
		while ( i < = size ) {
			$max = chars.length-1;
			$num = Math.floor(Math.random()*$max);
			$temp = chars.substr($num, 1);
			ret += $temp;
			i++;
		}
		return ret;
	}

};

$.fn.passwordStrength.defaults = {
	classes : Array('is10','is20','is30','is40',
        'is50','is60','is70','is80','is90','is100'),
	targetDiv : '#passwordStrengthDiv',
	cache : {}
}

$(document).ready(function(){
	$('input[name="password"]').passwordStrength();
	$('input[name="password2"]').passwordStrength({targetDiv: '#passwordStrengthDiv2',
        classes : Array('is10','is20','is30','is40')});
});

Vous pourrez trouver un exemple d’utilisation à cette adresse.
Il ne faut pas oublier d’inclure la librairie jQuery avant d’utiliser ces morceaux de code.

Grâce à cela, plus besoin de chercher des scripts un peu vieux pour vérifier la sécurité des mots de passes dans vos applications, un plugin pour jQuery existe !

• 3 commentaires