Utilisation de jQuery et jQueryUI : Méthode

jQuery est un ensemble d'objets et de méthodes javascript compilés dans une bibliothèque. On peut parler de Boite à outils javascript.

Il suffira de télécharger la librairie jQuery (disponible sur le site jQuery même) et de la mettre à disposition en ligne. Il est également possible d'utiliser les sources hébergées par jQquery directement.

Exploitant le DOM, il permet l'usage d'une multitude d'actions et d'effets sur la structure d'une page Web, sans devoir considérer le type de navigateur.

Le Widget "Tabs".

 

Tabs offre un affichage de containeurs rangés sous forme d'onglets (tabs). Une zone de contenu unique avec plusieurs panneaux, chacun assosciés avec un Header, dans une liste.

1 : On démarre avec une page HTML classique. Ici elle comprendra du texte formaté, des listes, ...

2 : On intègre le Widget Javascript gràce à la librairie jQuery. D'abord en mettant à disposition la librairie elle-même (sous forme de fichier .js) téléchargeable sur le site jQuery.com.

3 : Ensuite nous appelerons nos fonctions js (sous forme de widget, effets, ...) dans notre page HTML via les balises <script>.

4 : Nous pouvons aussi utilser des paramètres différents pour le Widget, généralement via les porpriétés d'appel du script.

Il faut également y appliquer du CSS afin d'accorder le Widget avec le thème de la page HTML.

Code HTML de base (body)

Voici le contenu de notre page HTML, le code brut, avec les différents "Tabs" et les contenus. On retrouve un div comprenant les Tabs sous forme de liste <ul> avec les <li> pour les Tabs et d'autres div pour les contenus.

Tous associés à des #id afin d'y appliquer les styles et effets des scripts par la suite.

    <div id="tabs">
<ul>
<li><a href="#tabs-1">Code Brut HTML (sans effet)</a></li>
<li><a href="#tabs-2">Scripts et CSS</a></li>
<li><a href="#tabs-3">Code Instance des Widgets</a></li>
<li><a href="#tabs-4">Ressources nécessaires</a></li>
<li><a href="#tabs-5">Paramètres possibles</a></li>
</ul>
<div id="tabs-1">
<p>TEXTE</p>
</div>
<div id="tabs-2">
<p>TEXTE</p>
</div>
<div id="tabs-3">
<p>TEXTE</p>
<p>Duis cursus.</p>
</div>
<div id="tabs-4">
<p>TEXTE</p>
</div>
<div id="tabs-5">
<p>TEXTE</p>
</div>
</div>

Résultat visuel sans javascript :

sansjs

Voici les relations nécéssaires à l'accès à jQuery

Vous devez ici lier votre page HTML avec la librairie jQuery que vous aurez mise en ligne avec votre document HTML. On retrouve également un fichier CSS indépendant qui comprend le CSS utilisé pour l'apparence du Widget. Ceci devant se trouver dans le head. (Ainsi qu'un CSS pour le thème du site en lui-même)

<link href="jquery-ui.css" rel="stylesheet" type="text/css" media="all">

<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>

Ces fichiers sont téléchargeables directement via le site jQuery. Ils comprennent l'entiereté des Fonctions (widgets, effets, ...) de la librairie.

Il est même possible de personnaliser son téléchargement selon les widgets utilisés et leurs options, les effets, thèmes, ...

Le site jQuery vous propose de "composer" vous même votre bibliothèque jquery via son Download Builder et d'y appliquer un thème choisi. Cela permet d'alléger la taille des scripts et il est également possible de minifier (condenser) cette librairie pour reduire encore son poids.

Code à ajouter (dans le head)

Voici le script à insérer dans le document HTML, dans le head, afin d'exécuter les fonctions de jQuery et appliquer ainsi les Widgets, effets, ...

	<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

La fonction $() de jQuery permet de cibler les éléments grâce aux sélecteurs, de déclarer des gestionnaires d'événements, d'utiliser les autres fonctions de la librairie, il s'agit en réalité d'un alias sur l'objet jQuery lui-même.

On applique ici la fonction "tabs" (dont le script complet se trouve dans le fichier .js) à l'élément possédant l'id #tabs

Default functionality

Voir Code Instance

Collapse content

Permet de "collapser" le contenu sous les onglets header.

<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
});
</script>

Open on mouseover

Les sections s'ouvrent et se ferment au passage de la souris (option "event").

<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>

Sortable

Permet de déplacer les onglets pour les trier.

<script>
$(function() {
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
</script>

Vertical Tabs functionality

Onglets verticaux.

<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
</script>

 

Script

Format

Poids

Temps d'accès

URL

jquery.js javascript .js 273 ko Très rapide ./jquery/external/jquery/jquery.js
jquery-ui.js javascript .js 470 Ko rapide ./jquery/jquery-ui.js
jquery-ui.css Fueille de style CSS 22 ko Très rapide ./jquery-ui.css

Unistra

Diplôme d'Université de Développeur web (information et de communication)

unistra

Suite...

Mon CV

Ben

Suite...

Skype

Conversation Skype regroupant les élèves FCAD16

 

 

Suite...