Étiquette : plugin Page 1 of 2

Temps de lecture : < 1 minute

JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.

Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:

Système de tag d’images avec JQuery image annotate

de arnaud

On août 5, 2011

dans JQuery

Temps de lecture : < 1 minute

Vous souhaitez mettre en place un système de tag d’image comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer. jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.

Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.

 <html>       <head>           <style type="text/css" media="all">@import "./css/annotation.css";</style>           <script type="text/javascript" src="./js/jquery-1.3.2.js"></script>           <script type="text/javascript" src="./js/jquery-ui-1.7.1.js"></script>           <script type="text/javascript" src="./js/jquery.annotate.js"></script>             <script language="javascript">                  $(window).load(function() {                     $("#toAnnotate").annotateImage({                       editable: true,                       useAjax: false,                       notes: [ { "top": 286,                                   "left": 161,                                   "width": 70,                                   "height": 70,                                   "text": "Edites moi !",                                   "editable": false },                                { "top": 134,                                   "left": 179,                                   "width": 100,                                  "height": 80,                                   "text": "Ne m'édites pas !",                                   "editable": true } ]                                       });                  });              </script>          </head>       <body>              <div class="main-content">               <img src="./monImage.png" id="toAnnotate" />           </div>          </body>   </html>

En conclusion il s’agit d’un plugin très intéressant, mais il est destiné à un nombre très restreint de projets, du fait de sa spécificité.

Faire des popups non intrusives avec Fancybox

de arnaud

On juillet 30, 2011

dans JQuery

Temps de lecture : < 1 minute

Aujourd’hui, je vais vous présenter un plugin JQuery très connu mais qui est un des meilleurs dans son style. Fancybox permet de faire des popups non-intrusives avec un design à la MAC OS. Vous l’aurez compris, le design est épuré et sans couleur.
Du fait de sa simplicité apparente, on peut facilement l’intégrer sur nos sites Internet, elle ne choquera pas comme pourrait le faire lightbox avec ses bordures épaisses.

Je serai relativement court sur cette présentation, car la documentation est très fournie sur le site suivant Fancybox. Vous y trouverez aussi une suite d’exemples qui pourront vous convaincre d’utiliser ce plugin plutôt qu’un autre.

Comme je vous l’ai dit précédemment, on peut voir que les bordures sont très fines et que seul le bouton « fermer » ressort. Cependant, pour fermer la fancybox, vous pouvez aussi cliquer à côté.

Des tooltips élégants avec tipTip

de arnaud

On juillet 26, 2011

dans JQuery

Temps de lecture : < 1 minute

Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.

Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :

   <a class="tiptip" href="#" title="message tooltip">mot</a>

Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :

    $(function(){
	$(".tiptip").tipTip();
    });

Voici un exemple en images, avec un contenu assez long dans la tooltip :

Détecter des visages avec JQuery

de arnaud

On juillet 24, 2011

dans JQuery

Temps de lecture : 2 minutes

Vous souhaitez mettre en place un système d’avatar sur votre site Internet, et vous souhaitez que l’utilisateur puisse envoyer sa photo, puis puisse la recadrer selon son désir ? Le problème réside dans la détection du visage. Comment faire pour pré-cadrer le ou les visages ?

Face Detection est un plugin JQuery qui vous permettra de récupérer les coordonnées des visages présents sur la photo, et ainsi permettre de recadrer celle-ci.

Vous trouverez à la page Face Detection un exemple, sur une image de bonne taille et contenant deux visages de face.

Encore une fois, l’utilisation est très simple, il vous suffit, après avoir inclu les fichiers javascript, de faire un appel de cette manière :

var coords = $('#myPicture').faceDetection();

Après cet appel, la variable coords contient (comme son nom l’indique) les coordonnées des visages qui ont été détectés sous le format suivant :

x: coordonnée X du visage
y: coordonnée Y du visage
width: largeur du visage
height: hauteur du visage
positionX: positon en x par rapport à document
positionY: positon en y par rapport à document
offsetX: positon en x par rapport à parent
offsetY: positon en y par rapport à parent

Voici le résultat obtenu sur une image après avoir fait appel au plugin, ici les coordonnées sont utilisées pour dessiner un rectangle autour de la tête :

En combinant ceci à Système de tag d’images avec JQuery image annotate on pourrait obtenir un tag d’images avancé, détectant les visages et vous proposant d’y mettre un nom.

Personnaliser vos menus déroulants avec DropKick

de arnaud

On juillet 18, 2011

dans JQuery

Temps de lecture : < 1 minute

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.

Listes triées et animées avec Quicksand

de arnaud

On juillet 6, 2011

dans JQuery

Temps de lecture : < 1 minute

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

de arnaud

On juillet 4, 2011

dans JQuery

Temps de lecture : < 1 minute

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.

Calcul de temps à la Facebook ou Twitter

de arnaud

On juin 30, 2011

dans JQuery

Temps de lecture : < 1 minute

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

de arnaud

On juin 28, 2011

dans JQuery

Temps de lecture : 2 minutes

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 :