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).