Personnaliser vos menus déroulants avec DropKick

Vous trouvez que vos menus select sont trop simples ? Le plugin JQuery DropKick vous permet de faire des menus déroulants élégants sans perdre de temps à changer le css, et à travailler sur la compatibilité.

Si les thèmes par défaut ne vous conviennent pas, vous avez la possibilité de vous faire le vôtre assez simplement.

De tels plugins rendent plus attirants des formulaires qui d’habitude rebutent un peu les utilisateurs.

Voici un exemple de menu réalisé avec ce plugin :

Vous admettrez que le style de base est plus que correct, ce qui change des menus déroulants basiques présents sur beaucoup de sites Internet.

Ajuster la taille de vos textareas en fonction du contenu

AutoResize est un plugin JQuery qui permet de faire un textarea extensible en fonction du contenu, comme le fait actuellement Facebook pour les commentaires. Ceci évite les pages de formulaire où un textarea fait 15cm sur 8, le truc pas esthétique quoi…

Voici comment appliquer le plugin sur un textarea ayant pour id « comment ».
Après, libre à vous de changer le sélecteur pour l’appliquer à tous vos textareas, ou juste à ceux d’une classe précise.

$().ready(function(){
$('#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
});

Vous l’aurez compris, ce plugin s’adresse aux développeurs soucieux de l’ergonomie de leur site Internet et qui en ont marre de voir des barres de scroll apparaître dans leurs textareas.

Créer un site Internet pour mobile avec JQuery mobile

Avez-vous déjà pensé à faire une application mobile, ou une version mobile de votre site Internet ?
Si oui, vous avez dû vous confronter à des centaines de problèmes de compatibilité entre les navigateurs mobile.

L’article va vous montrer comment faire des pages HTML compatibles sur tous les téléphones et tablettes.

Afin de bien comprendre l’article, il vous faudra connaître les bases du HTML ainsi que JQuery.

Dans un premier temps, il va falloir télécharger la libraire JQuery mobile. Donc rendez-vous à la page suivante : Télécharger.

Cependant, pour la mise en production, je vous conseille d’utiliser le code suivant pour inclure JQuery mobile :

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

Pourquoi utiliser ceci plutôt qu’un version locale ?

Imaginons un utilisateur, qui passe de site en site. Fait à fait, il remplit son cache de scripts et pages en tous genres. S’il a déjà été sur un site avec le code précédent, il les a en cache et donc il ne les téléchargera pas. Vous gagnez ainsi de la bande passante et du temps de chargement. :p

Découverte

Nous allons créer notre première page.

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Outweb</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
		http://code.jquery.com/jquery-1.6.1.min.js
		http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
	</head> 
<body> 

<div  data-role="page"> 
	<div  data-role="header">Outweb</div> 
	<div  data-role="content">Outweb c'est mon site internet.</div> 
	<div  data-role="footer">Mon footer</div> 
</div> 

</body>
</html>

Ceci est l’exemple le plus simple qui soit.

Vous remarquerez l’utilisation de data-role. C’est en effet le point important de JQuery mobile.

Il permet de dire à JQM (JQuery Mobile) comment il doit traiter le div, et quelles classes il doit lui appliquer.

Une page visible n’est pas, contrairement à une page HTML basique, l’ensemble du code HTML, mais seulement le <div data-role= »page »>. Cela permet de charger plusieurs pages en une seule fois et donc de naviguer de l’une à l’autre en toute fluidité.

Page complexe

Comment appliquer un thème à une page ?

Juste une petite modification à faire.

<div  data-role="page" data-theme="b"> 

Et voila un beau thème bleu style IPhone.

Nous allons maintenant faire une liste. La liste est la structure HTML la plus simple à mettre en place dans JQM, car elle permet d’afficher des menus ou des informations même sur des petits écrans.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
</head>
<body>

<div data-role="page" data-theme="b">
<div data-role="header">Mon header</div>
<div data-role="content">


<!-- listview permet de mettre en forme toute la liste -->
<ul data-role="listview">
        <!-- Met en place un séparateur dans la liste -->
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top '><b>Accueil</b></li>
	<li><a href="http://localhost:8080">Ma page d'acceuil'</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Articles</b></li>
	<li><a href="http://url.localhost:8080/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.localhost:8080/z">Emuler
	un flux RSS</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

</body>
</html>

Lien entre les pages

Comme je le disais précédemment, vous pouvez mettre plusieurs pages dans un fichier HTML. Voici comment faire le lien entre les pages. Et surtout, si vous le souhaitez, comment mettre des effets de transition entre vos pages.

Pensez à mettre des ids à vos pages, sinon vous ne pourrez pas naviguer entre elles.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
</head>
<body>

<div data-role="page" data-theme="b">
<div data-role="header">Mon header</div>
<div data-role="content">



<ul data-role="listview">
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top '><b>Popup</b></li>
       <!-- data-transition permet de définir l'effet de transition. Les trois disponibles sont présenté ici -->
	<li><a href="#page2" data-transition="pop">Voire la page 2</a></li>
	<li><a href="#page3" data-transition="slidedown">Voire la page 3</a></li>
	<li><a href="#page4" data-transition="flip">Voire la page 4</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Accueil</b></li>
	<li><a href="http://localhost:8080">Ma page d'accueil</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Articles</b></li>
	<li><a href="http://url.localhost:8080/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.localhost:8080/z">Emuler
	un flux RSS</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>


<!-- Les autres pages avec des autres thèmes (oui c'est horrible mais c'est une démo)-->
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 2 (pop) </div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

<div data-role="page" id="page3" data-theme="c">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 3 (slide)</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

<div data-role="page" id="page4" data-theme="e">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 4 (flip)</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>
</body>
</html>

Voilà vous avez maintenant toutes les informations pour mettre en place une version mobile de votre site Internet. Si vous voulez plus de documentation, je vous recommande la documentation officielle qui vient d’être refaite, suite à la sortie de la version beta de JQM.

Comme vous avez pu le voir, JQuery Mobile est un outil performant, novateur et surtout libre. Alors profitez-en !

Listes triées et animées avec Quicksand

Quicksand est un plugin JQuery qui peut être utile pour l’affichage un peu travaillé d’une liste d’images ou sur une boutique en ligne.
Le plugin vous permet de trier et filtrer des listes (d’images par exemple) selon des critères, le tout avec des effets de transition à la JQuery. Le résultat est assez agréable pour l’utilisateur mais il ne faut pas en abuser car cela peut vite devenir lourd.

Pour l’appliquer à une liste vous pouvez utiliser le code suivant :

Côté JavaScript :

$('.button').click(function(e) {
    $('.all').quicksand( $('.warm li'), {
      duration: 1000,
      attribute: 'id'
    });
    e.preventDefault();
  });

Côté HTML

 <p><a class="button" href="#">Test</a></p> 
        
          <ul class="colors all"> 
            <li id="c463033" style="background: #463033"></li> 
            <li id="c77343d" style="background: #77343d"></li> 
            <li id="ce83f2f" style="background: #e83f2f"></li> 
            <li id="cffc223" style="background: #ffc223"></li> 
            <li id="cffdb59" style="background: #ffdb59"></li> 
            <li id="c788b6f" style="background: #788b6f"></li> 
            <li id="c486a5e" style="background: #486a5e"></li> 
            <li id="c289539" style="background: #289539"></li> 
            <li id="c174876" style="background: #174876"></li> 
          </ul> 
 
          <ul class="colors warm"> 
            <li id="c62164e" style="background: #62164e"></li> 
            <li id="c86286e" style="background: #86286e"></li> 
            <li id="cda79c2" style="background: #da79c2"></li> 
            <li id="ce83f2f" style="background: #e83f2f"></li> 
            <li id="cf39079" style="background: #f39079"></li> 
            <li id="cffc223" style="background: #ffc223"></li> 
            <li id="cffdb59" style="background: #ffdb59"></li> 
            <li id="cf2c478" style="background: #f2c478"></li> 
          </ul> 

Il ne faut pas oublier de « binder » un bouton pour lancer le tri.

Aider les webmasters avec UpgradeBrowsers

Vous en avez marre de devoir faire des designs pour des versions non mises à jour de navigateur ? Oui, moi aussi. Alors insérez le plugin UpgradeBrowsers dans votre site Internet, dans votre page d’accueil par exemple. Le plugin indiquera simplement à l’utilisateur que son navigateur n’est pas à jour en l’invitant à le mettre à jour. Les autres utilisateurs ne se douteront même pas de la présence du plugin sur votre site.
Voici les quelques lignes de code à insérer dans votre page pour mettre en place le plugin, avant la fermeture du body.

http://upgradebrowsers.com/upgradebrowsers_v01/jquery.upgradebrowsers.min.js

En cas de navigateur non mis à jour voici le résultat affiché en haut de votre page :

Pensez-y, pour nous simplifier la vie.

Zoomer sur des images avec Cloud Zoom

Cloud Zoom est un plugin JQuery qui permet de faire simplement des zooms sur des images. En plus de son style soigné, il propose plusieurs types de zooms, selon l’intégration que vous voulez faire de celui-ci.

Voici l’exemple le plus basique, mais aussi le plus commun :

Et pour metttre en place cet effet, il vous suffit d’inclure le fichier javascript cloud-zoom.1.0.2.js (dans le dossier images).
Puis pour chacune des images où vous voulez ajouter un zoom, vous devez définir les paramètres pour le zoom :

       <div class="zoom-small-image"> <a href='grosseimage.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4"> 
       
        <img src="petiteimage.jpg" title="Message" alt=''/></a> </div>

Calcul de temps à la Facebook ou Twitter

Si vous avez déjà développé un chat, un livre d’or ou tout autre type de moyen de feedback, vous avez été confronté au problème de l’affichage de la date de publication du message. Comment faire pour qu’elle soit affichée sans avoir une date classique et barbante comme : 29/06/2011 15h26 mais plutôt quelque chose du style : « il y a moins d’une minute », comme le font Twitter ou Facebook par exemple ?

On imagine déjà du parsage, des algos…
Eh bien en fait oui, mais pas besoin de le faire vous-mêmes, timeago peut le faire à votre place.

On pourra apprécier la simplicité d’utilisation du plugin, pour un résultat assez simple mais correct.

Voici l’utilisation la plus utile que l’on peut faire du plugin.

<html>
	<head>
		http://jquery.min.js
		http://timeago.js
		<script>
			$(document).ready(function() {
			jQuery("abbr.timeago").timeago();
			});
		</script>
	</head>
	<body>
		<abbr class="timeago" title="July 17, 2008">2 years ago</abbr> <br/>
		<abbr class="timeago" title="2011-06-17">2 years ago</abbr> <br/>
		<abbr class="timeago" title="2011-01-17T09:24:17Z">2 years ago</abbr>
		<hr/>
	</body>
</html>

Le résultat obtenu (aujourd’hui) est le suivant :

  • Il y a 2 ans
  • Il y a 12 jours
  • Il y a 5 mois

Vous remarquerez au passage l’utilisation de différents types de format de date.

Afin d’avoir le résultat en français j’ai traduit les quelques mots clés contenu dans la librairie. L’archive que je propose contient donc la version française.

La petite particularité est l’option :

jQuery.timeago.settings.allowFuture = true;

Qui permet de faire une sorte de décompte pour un évènement. Je n’ai pas encore trouvé d’application pertinente mais il y a de l’idée 😛

Gestionnaire de fichiers en ligne : elFinder

Si d’une manière ou d’une autre vous êtes amené à partager un espace d’échange de fichiers avec plusieurs personnes via une interface web, mais que vous n’avez pas envie d’avoir la simple vue « Index of » par défaut, voici un projet très complet de gestion de documents en ligne.

ElFinder permet de parcourir les dossiers à partir d’un racine bien définie (coté PHP ou Python), de télécharger, de visualiser et de modifier des fichiers distants sans avoir à les télécharger pour la plupart.

Plusieurs modes sont disponibles : dans une « fenêtre » simulée à l’aide de JQuery UI par le biais d’un widget, ou le mode classique. Par conséquent, vous l’aurez compris, le plugin nécessite d’utiliser JQuery UI en plus de JQuery.

ElFinder permet une gestion des droits que l’on attribue aux utilisateurs anonymes par le biais d’un fichier de configuration PHP ou Python ( connector.php ou connector.py). Vous trouverez toutes les informations relatives aux options sur le site de elFinder. Pour ce type de plugin mieux vaux être sûr de sa config, à mon avis même si les risques se limitent aux fichiers présents dans le dossier file/ (qui peut être positionné n’importe où).

Exemple Démo

J’ai volontairement retiré les droits d’écriture et de suppression à tout le monde pour éviter les mauvaises surprises. Si vous ne voulez plus avoir cette limitation il vous suffit de télécharger l’archive et de la décompresser dans votre serveur web.

Voici un aperçu rapide de l’interface de l’application une fois qu’il y a quelques fichiers dedans :


Fenêtres de dialogue JavaScript avec Modialog

Modialog est un plugin JQuery qui permet de faire des popups « à la twitter » (la transparence en moins) très simplement.
N’importe quel évènement peut être le déclencheur (click ou mouseover par exemple). La popup peut contenir tous types de contenus images, boutons, formulaire…
On pourrait très bien imaginer y mettre un formulaire de contact par exemple.

Le style de base de la popup est soigné et très sobre à la fois, il peut donc s’adapter à beaucoup de designs, mais s’il ne vous convient pas, vous avez la liberté de le changer et/ou de l’améliorer simplement.

Voici un exemple basique d’utilisation de la librairie :

     <p>
     <a id="open0" href="#">Hello world </a>
     <div id="dialog0" class="dialog">
       <div class="content">Hello world! </div>
     </div>
     </p>

 <script>

    var $dlg0 = $('#dialog0');
    $dlg0.modialog();

    $('#open0').click(function() {
      $dlg0.modialog('open');
      return false;
    });

 </script>

Si vous souhaitez un exemple un peu plus complet : Demo

Voici des exemples en images du rendu de base. Tout en sachant que je n’ai pas du tout personnalisé le CSS. Imaginez-les avec le CSS de votre site Internet 😛

Il s’agit donc ici d’un plugin qui va très vite s’imposer dans mes applications web.

Générer QRCODE avec JQuery

Le code QR est un code-barres à deux dimensions.
Destiné à être lu par un lecteur de code-barres QR ou un smartphone, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres simple , et surtout des données directement reconnues par des applications. Ainsi le QR permet par exemple d’ouvrir un navigateur à une page prédéfinie, de lancer une application ou encore décoder un message. JQuery Qrcode est un plugin JQuery qui permet de générer des code QR simplement.

<div id='monQrCode'></div><script>$('#monQrCode').qrcode("http://www.blog.lahaxe.fr");</script>

Et voici le résultat obtenu :

Vous pouvez consulter la démo en ligne.