Draeli CheckImg 介绍
Fr : ImgChk est une extension permettant d’utiliser des images pour les
checkbox.
En : ImgChk is an extension allow you to use image for checkbox.
Fr : Comment l’utiliser ?
La librairie JQuery 1.2 doit être présente :
<script type="text/javascript" src="jquery.js"></script>
L’extension doit ensuite être mise :
<script type="text/javascript" src="jquery.CheckImg.js"></script>
ou la version optimisé :
<script type="text/javascript" src="jquery.CheckImg.optimized.js"></script>
Enfin l’extension doit être activé :
$("input.CheckImg").CheckImg('CheckImg0.png', 'CheckImg1.png', 'path/');
Le path (chemin vers les fichiers) n’est pas obligatoire (et s’applique aux
deux images si spécifié), de même que vous pouvez les spécifier au niveau des
arguments si vous souhaitez utiliser des images présentes dans des répertoires
différents.
remarquez que cette ligne devra être dans l’objet d’initialisation de jquery :
$(document).ready(function(){ // votre code });
-----
Les valeurs ‘CheckImg0.png’ et ‘CheckImg1.png’ sont les images qui viendront
se placer pour l’état dé-sélectionné et sélectionné.
Remarquez que ‘input.CheckImg’ est une valeur arbitraire est peut-être
changé à votre convenance dans la mesure ou les objets ainsi sélectionnés
restent uniquement des input de type checkbox.
En changeant les deux parties précédents, vous êtes à même d’utiliser des
checkbox différentes sur votre page. Il suffit alors seulement d’activer
l’extension pour chaque changement.
Exemple :
$("input.CheckImg").CheckImg('CheckImg0.png', 'CheckImg1.png'); $("input.CheckOther").CheckImg('CheckAutreA.png', 'CheckAutreB.png');
Cette extension est non intrusive, ainsi si la personne n’a pas activé
javascript, les checkbox resteront utilisables et fonctionnels :)
- Depuis la version 1.2 vous pouvez chaîner.
- Pour modifier l’état de l’image depuis un autre plug-in un simple :
$(‘.nom input.CheckImg’).next().trigger(‘click’); (qui dans ce correspond
à l’image qui a était créé par le plug-in).
-------------------------------------------------------
En : How use ?
JQuery 1.2x must be present :
<script type="text/javascript" src="jquery.js"></script>
Extension must be put :
<script type="text/javascript" src="jquery.CheckImg.js"></script>
or optimized :
<script type="text/javascript" src="jquery.CheckImg.optimized.js"></script>
Last, extension must be run :
$("input.CheckImg").CheckImg('CheckImg0.png', 'CheckImg1.png', 'path/');
Values ‘CheckImg0.png’ and ‘CheckImg1.png’ are the images correspond to
position no-selected and selected.
Path is dir to image and is facultative (and is apply on the two images if
specified). Too, you can specified dir directly in argument, util if you have
image in different dir.
‘input.CheckImg’ is what you want but only checkbox element.
If you want use more one image type, only call several times event with images
parameters.
Example :
$("input.CheckImg").CheckImg('CheckImg0.png', 'CheckImg1.png'); $("input.CheckOther").CheckImg('CheckAutreA.png', 'CheckAutreB.png');
- Since version 1.2, you can chain instructions.
- To change image value since another plug-in, you can call this : $(‘.name
input.CheckImg’).next().trigger(‘click’); (this case correspond to the image
created by plug-in).