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 "Tooltip".

 

Tooltip peut être attaché à n'importe quel élément. Quand on survole l'élément avec la souris, l'attribut Titre est affiché dans une petite boite de dialogue autours de l'élément. Le Tooltip peut être personnalisé en style et même en animation. Son contenu est aussi personnalisable (textes, images, liens, ...)

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

2 : On intègre le Widget Javascript gràce à la librairie jQuery, en mettant à disposition la librairie elle-même (sous forme de fichier .js).

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 (dans le body)

Voici le code brut, un simple titre h2 qui inclut un <a>. L'effet tooltip est appliqué via ce <a>. C'est l'attribut "title" qui définira le contenu du tooltip.

<div class="title">
<h2>Utilisation de <a href="#" title="Ceci est un Toolip">jQuery</a> et jQueryUI : Méthode</h2>
</div>

Ou plus simplement et avec un lien :
<a href="http://jquery.com/" title="Ceci est un Toolip, cliquez pour accéder au site jQuery.">jQuery</a>

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. Tout ceci doit 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 jQquery 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 afin d'éxecuter les fonctions de jQuery et appliquer ainsi les Widgets, effets, ...

    <script>
$(function() {
$( document ).tooltip();
});
</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 "tooltip" (dont le script complet se trouve dans le fichier .js) au document entier.

Custom Content

Permet d'intégrer différents contenus (images, liens, ...) dans le Tooltip.

<script>
$(function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
text + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
</script>

Tooltip on Forms

Permet l'utilisation de Tooltips associés aux champs d'un formulaire (aide, précision, ...).

<script>
$(function() {
var tooltips = $( "[title]" ).tooltip({
position: {
my: "left top",
at: "right+5 top-5"
}
});
$( "<button>" )
.text( "Show help" )
.button()
.click(function() {
tooltips.tooltip( "open" );
})
.insertAfter( "form" );
});
</script>

Track Mouser

Le Tooltip se positionne en rapport avec le pointeur souris et le suit.

<script>
$(function() {
$( document ).tooltip({
track: true
});
});
</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...