Fonctions jquery / jquery ui

Introduction

Avec JQuery et JQuery UI, qu'une grande partie d'entres nous utilisont dans nos sites Web, permet d'avoir des interfaces tant utilisateurs qu'administrateur plus conviviales.
Les fonctions de ce framework sont nombreuses, et nous les personnalisont en fonction de nos applications.
Je vais donc dans cette page faire un récapitulatif des fonctions (bout de code) que j'utilise.

Les fonctions JQuery nécessite la librairies en tant que tel, à l'heure (30/10/2012) ou j'écrit ce tutorial, nous en sommes à la version 1.8.2.
Toutefois voici une info (source Developpez.com)
jQuery 1.9 devrait être disponible au début de 2013.

Cette version sera débarrassée de la plupart des méthodes déclarées obsolètes lors de la sortie des versions 1.7 et 1.8. Certaines seront transformées en plugins.

Le support des versions IE 6, 7 et 8 ne sera pas modifié.

Les versions jQuery 1.9.x sortiront au cours de l'année 2013 et au-delà.

La branche 1.9 sera maintenue (corrections des régressions, des bogues, et des incompatibilités avec les nouveaux navigateurs) pendant une période non déterminée, mais si je comprends bien on parle en années.

jQuery 2.0 devrait être disponible au début 2013, peu de temps après la version 1.9. Elle ne supportera plus les versions obsolètes d'IE.

Les versions 1.9 et 2.0 existeront en parallèle, elles partageront une API analogue, mais l'une sera compatible avec les versions obsolètes d'IE et l'autre non.

De plus pour certaine fonctions nécessite la présence des fichiers (jquery-ui-1.9.x.custom.min.js et jquery-ui-1.9.x.custom.css).


Utilisation des icônes JQuery UI

JQuery nous propose quelques icônes pour agrémenter nos interfaces, ces icônes peuvent être employées sur des liens, des ancres, des boutons, et des boutons de type submit, et reset.
D'ailleurs à ce propos je vous conseille ce site (http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html), je l'utilise souvent, cela vous permet de récupérer via le code source d'une part le nom de l'icône et d'autre part le css qui va avec, si vous avez besoin.

Vous allez me dire, "oui mais il est impossible de mettre une icônes à un bouton de type submit ou reset" ! Je suis d'accord avec vous, mais voilà au cours de mes nombreuses veilles technologiques j'ai découvert une fonction qui permet de le faire, de plus il n'est pas nécessaire de transformer le bouton (input submit) en bouton, puisque nous pouvons mettre sans problème une icône à un bouton.
Bien entendu je l'ai testée sur l'une de mes applications, d'ailleurs je l'utilise dans mon espace membre, et le fait que cette fonction permet d'attribuer une icône aux boutons submit, cela n'empêche nullement le fonctionnement du bouton lui même.

Alors bon, utiliser toute la batterie des fichiers JQuery pour avoir une seule icône dans son applications est une abberration, il faut vraiment que votre application s'y prête.

Code JavaScript pour les boutons de type submit et reset

 

          <script type="text/javascript">
            $(function() {
            //ajout icone jquery ui au input type submit
            $('input[type="submit"], input[type="reset"]').each(function () {
            $(this).hide().after('<button>').next().button({
            icons: { primary: $(this).attr('icon') },
            label: $(this).val()
            }).click(function (event) {
            event.preventDefault();
            $(this).prev().click();
            });
            });
            });
         </script>
          

Code HTML

Pour avoir une icône pour ces deux types, voici le code d'un bouton (submit et reset).
Il vous suffit d'ajouter l'attribut (icon) suivi du nom de l'icône, que vous pouvez récupérer sur le site donné tout à l'heure.
<input type="submit" name="createzip" value="Download ZIP" icon="ui-icon-disk" />
<input type="reset" name="reset" value="Actualiser" icon="ui-icon-refresh" />

 

Ci-dessous, quelques captures d'écran d'applications utilisant les icônes de JQuery UI.

Code JavaScript pour les autres types

Nous venons de voir comment attribuer une icône au bouton de type (submit et reset), maintenant voyons pour les autres.

Voyons maintenant les liens.
Dans le code ci-dessous nous attribuons pour le lien ayant la classe (link1), puis en paramètre dans la fonction (bouton() ) nous spécifions l'attribut (icons:), puis entre les accolades nous spécifions l'attribut (primary:) suivi du nom de l'icône, (primary) veut dire devant le texte du lien, tandis que (secondary) veut dire après letexte.

         <script type="text/javascript">
            $(function() { 
				$( "a.link1" ).button({ icons: {primary:'ui-icon-gear'} });
				$( "a.link2" ).button({ icons: {secondary:'ui-icon-triangle-1-s'} });
			});
         </script>
          

Tandis que si vous faite ceci ($( "a" ).button({ icons: {primary:'ui-icon-gear'} });) vous spécifier comme sélecteur la balise (a) et si dans votre page vous avez beaucoup de lien, ce sont tous les liens qui seront affecté. Ainsi pour attribuer une icône spécifique à un lien donné, vous devez spécifier au sélecteur (a.link1) qui veut dire le lien qui a la classe (link1).
Si vous avez des liens dans un bloc div qui a l'id (id="info") par exemple, dans ce cas spécifier la fonction comme ceci
$( "#info a" ).button({ icons: {primary:'ui-icon-gear'} });

Il est parfois tentant d'utiliser ceci $( "input:submit, a, button, input:reset", ".div_dataTables_wrapper" ).button();
Certes cela fonctionne, mais dans une page si vous utilisez un script de boite modale JQuery, cela déforme la boite modale ainsi que l'icône de fermeture de cette boite de dialogue, je dis cela pour en avoir fait l'expérience, j'ai du ainsi revoir l'attribution de mes icônes aux liens et aux input en précisant aux sélecteurs soit la classe ou l'id de chacun.

icone jquery ui

Les boutons radio et les checkbox

Si nous pouvons attribuer des icônes aux liens, aux inputs, aux ancres, ce n'est pas le cas avec les boutons radio et les checkbox.

Cependant nous pouvons améliorer ou customiser grâce à JQuery UI l'aspect de ces inputs.
De ce fait nous n'utiliserons plus la fonction ( button() ) mais la fonction ( buttonset() )

            <script type="text/javascript">
            $(document).ready(function() {
            $(".radios").buttonset();
            $( "#format" ).buttonset();
            });
            </script>
          

Code HTML

Pour customiser les boutons radio nous devons les écrirent de cette façcon :
<div class="radios">
<input type="radio" name="new" value="oui" id="radio1" /><label for="radio1">Oui</label>
<input type="radio" name="new" value="non" id="radio2" /><label for="radio2">Non</label>
</div>

Bouton radio


Groupe de checkbox

C'est à dire qu'on englobe dans un bloc div ayant une class ici (class="radios"), puis de spécifier pour chaque bouton radio un (label) avec l'attribut (for) qui aura le même nom que l'id de l'input radio.
Comme vous pouvez le voir dans la fonction ci-dessus il suffit de déclarer le sélecteur (.radio) suivi de la fonction ( buttonset() ).

Le principe est le même pour les checkboxs individuelles comme ci-dessous

<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>

Cependant si vous avez ce genre de code de checkbox <input class="pdf" name="filezips[]" type="checkbox" id="filezips[]" value="<?php echo $row['id']; ?>" /> qui sont générées par une boucle la customisation ne s'applique pas!
Je cherche toujours comment faire une fonction qui permettra cela.

L'aspect de ces inputs seront customisés selon le thème JQuery UI que vous allez utiliser.


Effet clignotant

Cette fonction permet de faire clignoter un texte, un lien, ou un texte ou lien contenu dans une balise (<li>).
Ci-dessous dans le code le sélecteur est (.deco) c'est cette classe que vous devre attribuer pour que l'effet de clignotement agisse sur l'élément.

            <script type="text/javascript">
              var control;
            jQuery(document).ready(function(){
            jQuery(".deco").mouseover(function(){
            clearInterval(control);
            });
            jQuery(".deco").click(function(){
control = setInterval("jQuery('.deco').fadeOut(500);jQuery('.deco').fadeIn(500);",1000); }); }); jQuery(function(){ control = setInterval("jQuery('.deco').fadeOut(500);jQuery('.deco').fadeIn(500);",1000); }); </script>

Limiter le nombre de case à cocher

Dans une applications si vous présentez par exemple des fichiers ayant chacun une case à cocher, qui sont générés par une boucle pour l'affichage, vous voudriez sans doute permettre à l'utilisateur de ne cocher qu'un certain nombre de case. Démo (http://jsfiddle.net/mtYtW/51/)
Vous créer ensuite dans le (body) un bloc div vide (<div id="check"></div>), pour afficher le message.

          <script type="text/javascript">
          jQuery(document).ready(function(){
              $("input[type=checkbox]").click(function(){
                  var countchecked = $("input[type=checkbox]:checked").length;
        
                  if(countchecked >= 5)
                  {
                      $('input[type=checkbox]').not(':checked').attr("disabled",true);
                      $("#check").fadeTo(200,0.1,function()
                        { 
                        $(this).html('( Le nombre maximum de case à cocher est de 5)').addClass('mes').fadeTo(900,1);
                        });
                  }
                  else
                  {
                      $('input[type=checkbox]').not(':checked').attr("disabled",false);
                      $("#check").hide();
                  }
              });
           });
         </script>          
          

Conclusion

Voilà ce sont quelques fonctions qui peuvent êtres utilent.
Cette page évoluera dans le temps selon mes trouvailles et essais

Bon dev