Impressionnante cette carte cliquable de l’Europe !

Pas coté graphique bien sur mais jeter un coup d’oeil au code source pour y découvrir le css et les quelques lignes de javascript utilisé (avec jQuery bien sûr ).

Y’a eu du boulot pour arriver à ce résultat.

Liens :

• Europe Css ans jQuery clickable map
• via un tweet de @smashingmag

Le célébre framework javascript jQuery a décidé de s’attaquer aux mobiles.

L’objectif : étendre et uniformiser ce que permet déjà jQuery et son compère jQuery UI aux spécificités des mobiles.

D’ou le nouveau projet jQuery Mobile framework !

A suivre donc

Vous souhaitez trier/réorganiser des éléments de votre page sans passer par une bibliothèque (ex : tablesorter)… Voici un petit exemple utilisant la fonction native bien pratique sort() et jQuery.

I. Création d’une liste désordonnée

(code à placer dans la balise body)

<div id="conteneur">
	<ul class="liste">
		<?php
		$tableau = range(1, 8);
		shuffle($tableau);
		foreach ($tableau as $k=>$v) {
			echo '<li id="li'.$v.'">#li'.$v.'</li>';
		}
		?>
	</ul>
</div>
<p><input type="button" name="trier1" value="Tri Asc" onclick="tri('.liste', 'ASC')" /><input type="button" name="trier1" value="Tri Desc" onclick="tri('.liste', 'DESC')" /></p>

II. Mise en forme

(code à placer dans la balise head)

<style type="text/css">
	body {font:italic 12px Georgia,Arial;background:#F9F9F9;}
	p {text-align:center;}
	ul li {border:1px solid #DFDFDF;margin:10px;font-size:160%;color:#D54E21;line-height:1.4em;background-color:#fff;position:relative;}
</style>

III. Fonction de tri

(code à placer dans la balise head)

<script type="text/javascript">
function tri(el, method) {
	var ul = $(el);
	var li = $('>li', ul);
	var r = method == 'DESC' ? -1 : 1;
	li.sort(function(a, b) {
		var item1 = $(a).attr('id');
		var item2 = $(b).attr('id');
		item1 = parseFloat(item1.substring(2));
		item2 = parseFloat(item2.substring(2));
		return item1 > item2 ? r : -r;
	}).remove().appendTo(ul);
};
</script>

III. (bis) Version animée

<script type="text/javascript">
function tri(el, method) {
	var ul = $(el);
	var li = $('>li', ul).css({opacity:0.5});
	var r = method == 'DESC' ? -1 : 1;
	var liOffsets = new Array();
	var ulOffset = ul.offset();
	li.each(function(i, v) {
		var liOffset = $(v).offset();
		liOffsets[v.id] = liOffset.top - parseFloat($(v).css('top')) - ulOffset.top;
	});

	li.sort(function(a, b) {
		var item1 = $(a).attr('id');
		var item2 = $(b).attr('id');
		item1 = parseFloat(item1.substring(2));
		item2 = parseFloat(item2.substring(2));
		return item1 > item2 ? r : -r;
	});

	li.each(function(i, v) {
		var _id = $('>li:eq('+i+')', ul).attr('id');
		$(v).css({zIndex:i+5}).delay(100*i).animate({opacity:1, top:liOffsets[_id] - liOffsets[v.id]}, 500);
	});
};
</script>

IV. Démonstration

• tri-javascript.html

Il faut avouer que par défaut un formulaire d’envoi de fichier n’a rien de sexy. Sauf qu’avec le plugin jQuery Uploadify ça va changer

Comment fonctionne-t-il ?

Uploadify utilise bien évidemment jQuery mais aussi la technologie Flash. Il utilise donc également la bibliothèque SWFObject.

Son implémentation est donc relativement simple puisque vous partez d’un simple input de type file :

<input id="fileInput" name="fileInput" type="file" />

Et voici un exemple de configuration de ce plugin :

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
// ]]>
</script>

Et vous obtenez ainsi un joli formulaire d’envoi de fichiers

Lien :

• Uploadify

Les effets que l’on peut apporter sur les images sont très appréciés comme ici ce que permet le plugin jQuery Cloud Zoom : créer un zoom sur une image

A l’image de JQZoom, Cloud Zoom va donc être activer au survol d’une image. Le zoom peut ainsi remplacer l’image en elle même ou s’afficher à coté.

Lien :

• Cloud Zoom

PikaChoose est un plugin jQuery permettant de réaliser une bien jolie galerie d’images intégrant une fonction « diaporama ».

Son implémentation est simple et est facilement paramètrable :

$("#divID").PikaChoose({
show_captions:true,
slide_enabled:false
});

Les options possibles sont entres-autres :

• vitesse et effets de transition,
• dimensions des minatures,
• …

Lien :

• Pikachoose

Twitter est à la mode, alors mettez votre site au goût du jour et proposez aux visiteurs de votre site de vous twittez

Like it? Tweet it! est un plugin jQuery qui va permettre à vos visiteurs de vous twittez un petit message.

Une zone va ainsi apparaitre en bas de la fenêtre du navigateur, proposer à votre visiteur de s’authentifiez via son compte Twitter et enfin poster un message.

A noter qu’il existe un plugin Worpdress dont l’installation et le téléchargement sont expliqués ici.

Lien :

• Like it? Tweet it!

jStackmenu est un plugin jQuery qui va vous animer votre traditionnelle barre de menu.

Vous pouvez, comme sur la démo, l’utiliser comme menu de partage social :

<div id="stack">
    <div class="trigger"><img src="icons/heart-64x64.png" alt="share" /></div>
        <ul>
	    <li><a href="http://twitter.com/">Twitter</a></li>
            <li><a href="http://digg.com/">Digg</a></li>
            <li><a href="http://www.facebook.com/">Facebook</a></li>
            <li><a href="http://reddit.com/">Reddit</a></li>
            <li><a href="http://stumbleupon.com/">StumbleUpon</a></li>
            <li><a href="http://delicious.com/">Delicious</a></li>
            <li><a href="http://flickr.com/">Flickr</a></li>
    </ul>
</div>

Vous lancer ce petit javascript :

jQuery( document ).ready( function( ){
        var stack = jQuery( '#stack ul' ).stackmenu( );
        jQuery( '#stack .trigger' ).click( function( ){
            stack.stackmenu( 'toggle' );
        } );
} );

Et vous obtenez :

Lien :

• jStackmenu

So So Social est un plugin jQuery qui va vous regrouper toute votre activité sur différents médias sociaux.

So So Social intègre déjà les services suivants :

• Twitter
• Facebook
• WordPress
• Tumblr
• Last.FM
• Delicious
• Flickr

Au niveau de code source, ce qui est intéressent dans ce plugin jQuery c’est l’utilisation de YQL (Yahoo Query Language)

Lien :

• So So Social Plug-In

Vérifier un formulaire en javascript lors de sa validation c’est bien. Préciser ce qui est permis au fur et à mesure de la saisie c’est pas mal non plus

D’ou le plugin jQuery InputNotes.

Pour la mise en place cela donne :

$(document).ready(function(){
  $("#message").inputNotes(
    {
      sexwarning: {
        pattern: /(^|\s)sex(\s|$)/ig,
        type: 'warning',
        text: 'Do not type "sex"!'
      },
      numbersnote: {
        pattern: /[0-9]/,
        type: 'note',
        text: 'Do not type numbers!'
      }
    }
  );
});

Et cela donne par exemple en cas de saisie des lettres « sex » :

Les expressions régulières sont ici utilisées pour les vérifications et deux types de « notes » sont permises :

• le message d’alerte (warning),
• la simple indication (note).

Pour bloquer la validation de formulaire en cas d’erreur il faut rajouter un code du style :

if ( $("#message").hasInputNotes('warning') ){
  // don't send form
}

Lien:

• InputNotes jQuery Plugin