Outweb

Catégorie : JQuery Page 1 of 3

Afficher des graphiques avec JQPlot

de

On août 16, 2011

dans JQuery

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:

Framework JQuery mobile

de

On août 16, 2011

dans Framework, JQuery

Temps de lecture : 2 minutes

Tous ceux qui ont déjà utilisé le dernier né de JQuery, à savoir JQuery mobile vont vraiment apprécier JqmPhp. En effet JqmPhp permet de simplifier une syntaxe assez lourde et surtout de fournir un code optimisé.

Travaillant actuellement sur une application web pour smartphone, je me suis fortement intéressé à ce framework pour rendre mon code plus clair.

Une fois que vous avez téléchargé le framework vous devez le configurer. A savoir que la version actuelle de JQuery mobile est la Alpha 4 mais que Jqmphpest conçu pour la Alpha 3. C’est pourquoi il est possible que certaines des nouvelles fonctionnalités de JQuery Mobile ne soient pas encore prises en charge.

Pour la configuration rendez-vous dans le fichier /lib/jqmphp.php

Les valeurs suivantes sont à changer par les liens vers les nouvelles versions de JQuery Mobile (en local ou sur un serveur distant).

/**
 * Sets the jQuery path.
 * @var JQMPHP_JQ
 */
define('JQMPHP_JQ', 'http://code.jquery.com/jquery-1.5.min.js', true);

/**
 * Sets the jQuery Mobile path.
 * @var JQMPHP_JQM
 */
define('JQMPHP_JQM', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js', true);

/**
 * Sets the jQuery Mobile CSS path.
 * @var JQMPHP_CSS
 */
define('JQMPHP_CSS', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css', true);

Maintenant que le framework est configuré on va pouvoir créer notre première page.

<?php   
//  Creation de l'objet jqmphp
$j = new jqmPhp();  

// ajout du titre au header
$j->head()->title('Menu principal');

// Création d'une page ( il peu en avoir plusieurs par jqmphp )
$p = new jqmPage('Menu Principal');

// choix du theme et ajout du titre à la page
$p->theme('c')->title('Menu Principal');

// choix du theme pour le header de la page
$p->header()->theme('c');

// ajout de text HTML dans la page
$p->addContent('Bienvenue sur ma belle page');

// Exemple de création de liste ( courant dans JQuery mobile)
$gm = new jqmListviem();

// création et ajout d'un item à la liste
$ann = $gm->addBasic('Lien 1', 'page1.php','',true);

$cal = $gm->addBasic('Lien 2', 'index.php?action=3');

// ajout de la liste à la page
$p->addContent($gm);

// ajout de la page à l'objet
$j->addPage($p);

// affichage de la page
echo $j;

?>

Comme on peut le remarquer le code est assez simple, mais qu’en est-il du résultat ?

Ceci est un exemple très simple mais vous trouverez sur le site du projet des exemples complexes avec des formulaires, des listes à icônes…

En conclusion : Bien que le framework soit très récent il promet d’être très utile aux développeurs web soucieux des utilisateurs de smartphone.

Nous sommes dans l’attente d’une version qui sera sûrement adaptée à la version beta de JQuery mobile qui sortira prochainement.

Menu contextuel en JavaScript

de

On août 8, 2011

dans JQuery

Temps de lecture : < 1 minute

Le plugin JQuery contextMenu vous permet de faire des menus contextuels sur des images, du texte ou tout autre contenu. L’utilisation de contextMenu peut être utile pour permettre de partager un contenu sur les réseaux sociaux, pour gérer du contenu dynamique ou simplement pour afficher des informations à l’utilisateur.

Voici un exemple de menu contextuel généré par le plugin :

Pour obtenir ce genre de résultat voici comment appeler le plugin :

$.contextMenu({selector: '#id_de_votre_objet_html', items: {
	edit: {name: "Edit", icon: "edit", callback: $.noop},
	cut: {name: "Cut", icon: "cut", callback: $.noop},
	copy: {name: "Copy", icon: "copy", callback: $.noop},
	paste: {name: "Paste", icon: "paste", callback: $.noop},
	"delete": {name: "Delete", icon: "delete", callback: $.noop},
	sep1: "---------",
	quit: {name: "Quit", icon: "quit", callback: $.noop}
}});

Comme vous pouvez le voir son utilisation est très simple.

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

de

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

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é.

Présenter votre site Internet à vos utilisateurs

de

On juillet 28, 2011

dans JQuery

Temps de lecture : < 1 minute

Si votre site possède une partie un peu complexe, comme une zone membre avec des menus et des zones d’informations, vous souhaitez peut-être expliquer à vos utilisateurs la logique et le fonctionnement de tout cela. Habituellement, vous faites une vidéo ou un tutoriel expliquant à l’aide d’images votre projet.

Bootstro va vous permet de faire une suite d’infobulles, expliquant étape par étape, directement dans la page web, le fonctionnement de votre site. Ceci offre une multitude d’avantages. Le simple fait que l’utilisateur puisse à tout moment, sans quitter la page, accéder à l’aide, est déjà beaucoup.

Voici un exemple en images :

De plus on pourrais utiliser ce système sur des sites à contenu payant pour faire « un tour gratuit » ou bien encore pour présenter des templates HTML. Bref vous l’aurez compris, les utilisations de cet outils sont multiples.

Des tooltips élégants avec tipTip

de

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

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.

Modèle de page « en maintenance »

de

On juillet 22, 2011

dans JQuery

Temps de lecture : < 1 minute

Si vous avez une mise à jour à faire qui risque de provoquer des erreurs, de type 404 ou autre, pendant le temps de la mise en place, il vaux mieux afficher une page d’avertissement expliquant brièvement la situation à l’utilisateur.

Grâce au plugin JQuery lwtCountdown, vous pouvez très simplement ajouter un compte à rebours propre et animé, afin d’éviter la page toute simple et moche. Bien sûr, il vous faudra connaître au préalable la date de retour en ligne. Pensez à prévoir toujours un peu plus que nécessaire. 🙂

Voici un exemple de page faite avec lwtCountdown :

Pour lancer le compte à rebours à partir d’une date, il vous suffit de faire appel au plugin de la manière suivante :

jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		21,
						'month': 	12,
						'year': 	2012,
						'hour': 	11,
						'min': 		0,
						'sec': 		0
					}
				});
			});

Quand la date butoir est atteinte, le compteur reste à 0, pas de chiffre négatif comme on peut parfois le voir.

Rendre votre HTML5 compatible sur tous les navigateurs

de

On juillet 20, 2011

dans JQuery

Temps de lecture : < 1 minute

Comme vous le savez, le HTML5 est assez récent et donc pas encore pris en charge par tous les navigateurs. Cependant, il permet de faire des choses assez intéressantes sans y passer des heures, et le code est plus ordonné. Bref, je ne vais pas faire la présentation complète de HTML5, ce n’est pas le sujet de cet article. Mais voilà, même si le HTML5 a l’air génial, on ne peut pas l’utiliser tant que l’on n’est pas sûr que l’utilisateur pourra avoir le résultat voulu.

C’est pourquoi beaucoup de développeurs attendent pour se lancer dans cette aventure.

Mais voilà HTML5Replace  , qui est un script JQuery vous permet, par sa simple inclusion dans votre page, de détecter la prise en charge ou non du HTML5, et en cas de non prise en charge de remplacer les balises HTML5 par du HTML normal.

Afin de pouvoir adapter simplement votre css, les balises &lt;header&gt;, par exemple, sont remplacées par &lt;div class= »header »&gt;. De même pour toutes les autres balises HTML5.

Voilà de quoi encourager les réticents à se lancer dans l’aventure du HTML5, et enfin contribuer encore un peu plus à la fin du Flash :p

Page 1 of 3

Suivant

Fièrement propulsé par WordPress & Thème par Anders Norén