Dator Blog

jQuery 1.3.0 vient de sortir ! Je vous en avais parlé il n’y a pas longtemps et la voila de sortie ! Cette version 1.3.0 sort exactement le jour des 3 ans de jQuery ! Joyeux anniversaire jQuery !

A vos téléchargement et amusez vous !

• 4 commentaires

Facebox est une autre plugin pour jQuery de type Lightbox qui permet d’afficher vos images, du HTML pur ou du HTML récupéré par Ajax. Facebox est enfaite l’implémentation de la boite modale présente sur Facebook et je l’a trouve très réussi !

Vous pouvez la télécharger ici et voir des petites démonstrations sur cette page.

• 4 commentaires

James Padolsey à rédigé un petit bout de code très intéressant qui permet de vérifier les types de vos objets en Javascript. Par exemple vérifier qu’un tableau est bien un tableau et pas une chaines de caractères.

Voici le code :

(function(){
    var types = ['Array','Function','Object','String','Number'], // les types
        typesLength = types.length; // la taille du tableau de types
    while (typesLength--) {
       // on ajoute les fonctions is*** à la page
        window['is' + types[typesLength]] = (function(type){
            return function(o) {
                return !!o
                && ( Object.prototype.toString.call(o) === '[object ' + type + ']' );
                // on test !
            }
        })(types[typesLength]);
    }
})();

// Usage:
isFunction( function(){} ); // true
isArray( [1,2,3,4,5] );     // true
isNumber( 3334322 );        // true
isObject( {a:1, b:2} );     // true
isString( 'Hello!' );       // true

Cette méthode permet donc de vérifier le type de nos variables avant de faire un traitement, ce qui peut être très pratique !

• 8 commentaires

Ajaxian à écrit un très bon article sur ce sujet et en effet l’astuce marche très bien ! En faite, pour récupérer les informations du Twitter de vos visiteurs, il suffit d’envoyer une requête avec Javascript et si le visiteur est connecté à Twitter, on peut récupérer quelques informations.

  function twCallback(data){
    var container = document.getElementById('twitteruser');
    out = '
'+ '
'+
          ''+
          data[0].user.screen_name +
           '

'+
           '
' + data[0].user.name + '

' +
           '
' + data[0].user.location + '

' +
           '
' +
           '
' + data[0].text +'

' +
           '

';
    container.innerHTML = out;
  }

Il vous faut inclure ce fichier aussi :

http://twitter.com/statuses/user_timeline.json?count=1&callback=twCallback

L’appel à la méthode user_timeline et à la méthode de retour (twCallback) dépends de count (le nombre de tweet à récupérer).

Une fois cela fait, il faut vérifier si le visiteur utilise Twitter, donc si notre appel ne renvois pas d’erreur :

function hasTwitter(data){
  if(data.error){
    // N'as pas de Twitter
  } else {
    // Il a un Twitter !
  }
}

Et voici la liste des paramètres que vous pouvez récupérer avec cette technique :

data.in_reply_to_user_id
data.truncated
data.created_at
data.user
data.followers_count
data.profile_image_url
data.url
data.name
data.protected
data.screen_name
data.location
data.id
data.favorited
data.in_reply_to_screen_name
data.text
data.in_reply_to_status_id
data.source

Cette méthode peut être très pratique pour afficher des informations sur vos visiteurs et donc rendre votre blog/site plus dynamique !

• 9 commentaires

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

FireUnit est une extension Firefox crée par John Resig pour effectuer des tests unitaires avec Javascript.

Le principe est similaire qu’avec les tests unitaires avec PHP mais cette fois-ci en Javascript !

Voici par exemple un bout de code commenté

if ( typeof fireunit === "object" ) {
	// Simple true-like/false-like testing
	fireunit.ok( true, "Je passe" );
	fireunit.ok( false, "Je ne passe pas!" );

	// Compare two strings - shows a diff of the
	// results if they're different
	fireunit.compare(
		"Le blog de dator.fr",
		"Le blog de clement",
		"C'est pareil ?"
	);
	// Compare a string using a regular expression
	fireunit.reCompare(
		"Le .* de dator.fr",
		"Le blog de dator.fr",
		"Comparaison avec une expression régulière"
	);
	// Display the total results
	fireunit.testDone();
}

Et voici le résultat que nous donne l’addon FireUnit de Firebug :

On peut donc tester simplement les chaines de caractères et tout ce que l’on veut et avoir un résultat graphique très intéressant !

• 1 commentaire