mardi 27 juillet 2010

Loading: Plugin jQuery qui affiche une image de chargement pendant une action

Loading est un plugin jQuery qui permet d'afficher une image de loading pendant le déroulement d'une action comme le chargement d'une requête ajax.

Version courante: 0.5
Licence:
Téléchargement: loading.zip
Sources: http://marcbuils.github.com/jquery.loading/

Options par défaut:
$.loading.defaultOptions = {
    src:  'loading.gif',     // chemin de l'image
    alt:  'Loading...',      // texte 'alt' de l'image
    css:  {                  // css du div qui encadre l'image
        textAlign:  'center',
        display:    'inline'
    }
};


Exemple de modification des options par défaut:
$.loading.defaultOptions = $.extend({}, $.loading.defaultOptions, {
           src: 'images/mon_image.gif'
});


Utilisation:
.loading( );
/* ou */
.loading({ /* [options] */ });


Exemple:

.
Code :
<input id="ajax_button" type="button" value="Test" />
<div id="ajax_content">
</div>
<script type="text/javascript">
(function($){
  $.loading.defaultOptions = $.extend({}, $.loading.defaultOptions, {
    src: '/developpement/loading/loading.gif',
    css: {
      textAlign: 'center',
      display: 'block'
    }
  });

  $('#ajax_button').click(function(){
    $('#ajax_content').loading().load('/developpement/loading/ajax.html');
  });
})(jQuery);
</script>

2 commentaires:

  1. L’exemple n'a pas l'air de fonctionner (sous FF)

    RépondreSupprimer
  2. Merci pour l'information,

    Le problème ne vient pas de Firefox, mais du projet qui est maintenant hébergé sur GitHub au lieu de Google Code. Je n'avais pas fait les modifications nécessaires pour l'exemple de cette page.

    RépondreSupprimer