Tutoriel : Mon premier widget Dojo
Création d'un composant graphique Dojo pour interfacer l'accès à plusieurs moteurs de recherche (Compatible Dojo 1.2.3)4. Définition du style
search.css
1 2 3 4 56 7 8 9 1011 12 13 14 1516 17 | .floatLeft { float:left; } .greyBorder { border:1px solid #B0B0B0;} .search .btn { background: url(../images/loupe.png) no-repeat; width:20px; height:19px; border-left:0px; cursor:pointer; } .search input{ height:21px; font:13px verdana, sans-serif; } |
lignes
1 à 6 : styles génériques qui pourront être déportés vers le fichier css de l'application
7 à 13 : définition du style du bouton
14 à 17 : définition du style du champ de saisie
Télécharger l'image loupe.png ici
Modification du code du template de notre widget afin d'appliquer le style défini dans le fichier css
Search.html
1 2 34 56 7 89 1011 12 | <div class="search"> <input type="text" class="floatLeft greyBorder" name="Field" value="saisir le texte ici..." /> <div id="Button" class="btn greyBorder floatLeft" label="lancer la recherche" title="lancer la recherche"> </div> </div> |
lignes
1,3 et 8 : ajout des classes définies dans le fichier css