Aller au contenu | Aller au menu | Aller à la recherche

Du libre et du sport

Espace virtuel d'un bricoleur du net

mardi, novembre 13 2007

jQuery : plugin color

Bon, on continue dans la série des billets sur jQuery :-).
L'effet .animate permet de faire des trucs déjà sympas sauf de jouer sur les couleurs...
Je cherche et je découvre un plugin jQuery.color.js qui permet de jouer sur les couleurs des éléments css :

  • la couleur du text via 'color'
  • la couleur du fond via 'backgroundColor'
  • ou encore les différentes bordures via 'borderBottomColor', 'borderLeftColor', 'borderRightColor' et 'borderTopColor'

Le plugin semble uniquement compatible avec jQuery version 1.2 ou supérieure.

Exemple

$(document).ready(function(){
     $("#go").click(function(){
     $(".block").animate( { backgroundColor:'#008CFF', color:'#EFF8FF', borderLeftColor:'#000'}, 2000)
                       .animate( { backgroundColor:'#fff', color:'#444', borderLeftColor:'yellow'}, 2000);
     });
});

Ceci est un gros bloc qui change de couleurs si vous cliquez sur le bouton

Epatant, non ?

lundi, août 27 2007

JavaScript : pre2ol.js - présentez lisiblement vos lignes de code.

Olivier a écrit - il y a un petit moment - une classe JavaScript qui permet de transformer tous les blocs préformattés en listes ordonnées.

Avant

<pre>
        bla 
        bla
</pre>

Après

<ol class="pre2ol">
        <li class="lizebra">bla</li>
        <li class=>bla</li>
 </ol>

Ainsi, les ascenseurs horizontaux qui apparaissent dans les blocs de code disparaissent et les lignes de codes sont complètement visibles au premier coup d'oeil :-).
J'ai juste complété avec une bidouille pour y intégrer une minuscule fonction de "zébrage": une classe CSS .lizebra est ajoutée aux éléments impairs de la liste ordonnée.

Note: Si vous ne voulez pas avoir une ligne en trop dans votre liste ordonnée, il faut supprimer le dernier retour à la ligne dans l'espace préformatté.

Lire la suite...