Aides de vue JQuery

Publié par Throrïn    Aucun Commentaire

Cet article m’a été demandé et donc je le fais, peut-être en retard mais je n’ai pas eu le temps de le faire plus tôt. Il a pour but l’utilisation de code JQuery à travers l’aide de vue associé à cet effet. Je vais utiliser un exemple concret avec l’utilisation du module « thickbox » permettant l’affichage d’images d’un format plus grand dans une nouvelle fenêtre.

Tout d’abord, il faut avoir installé l’extention ZendX_JQuery dans votre projet. Un sujet détaillant l’installation va arriver prochainement. Ensuite, il faut savoir utiliser les aides de vue qui nous intéresse, ici il s’agit des aides suivantes :

 PHP | 
 copy code |
?
 
1
//permet d'ajouter des feuilles de script dans la pile de JQuery
2
$this->jQuery()->addJavascriptFile();
3
//permet d'ajouter une feuille de style dans la pile de JQuery
4
$this->jQuery()->addStylesheet();

Ensuite, il nous faut télécharger le module JQuery Thickbox à cette adresse : http://jquery.com/demo/thickbox/ Par contre ce module n’est plus maintenu à jour. Mais il convient parfaitement pour créer une galere d’image. Je ne vais pas revenir sur l’utilisation et la mise en page de ce module. Vous trouverez toutes les aides sur le site. Juste que nous, avec nos aides, nous allons intégrer dynamiquement, pour la page seulement qui nous intéresse, les lignes script et styles concernées dans le header.

Tout en haut de notre script de vue, nous ajoutons les lignes suivantes afin de mettre en place thickbox :

 PHP | 
 copy code |
?
 
1
$this->jQuery()->addJavascriptFile($this->BaseUrl().'/scripts/thickbox-compressed.js')
2
     ->addStylesheet($this->BaseUrl().'/styles/thickbox.css')
3
     ->enable();  
4

Dans la vue nous avons aussi la mise en forme décrite dans la documentation de thickbox.

Voilà, ici nous voyons l’intérêt de telles fonctions afin d’intégrer de l’ajax directement dans les pages qui nous intéressent afin de ne pas prolonger inutilement le chargement des autres pages.