Ico JavaScript
Ico CSS
Ico HTML
Ico mooTools
Ico PHP
Ico Astuces

ComboxBox de choix d'images

Date 29/06/2010
Ico mooTools
Comms 0 commentaire

Voici une classe mooTools permettant de choisir une image contenue dans un dossier sur le serveur PHP.


La classe génère à droite de l'input un bouton qui permet d'ouvrir un popup contenant une liste de fichiers images, ainsi que, s'il y en a, les dossiers qui seront cliquables pour en afficher le contenu. Les fichiers et dossiers présentés disposent d'une icône permettant de les identifier comme tel.


Un aperçu de l'image s'affiche au survol de la souris sur le nom du fichier. La sélection du fichier rapatrie dans le champ input la valeur du fichier ainsi que, selon l'option définie lors de l'instanciation de la classe, le chemin relatif au fichier choisi.


Utilisation


L'utilisation de la classe se fait en instanciant la classe avec comme paramètre un élément input de type text :


var elt = $('monelement');

new MooImgCombo(elt, [{ options }]);


Attention à bien redéfinir la variable repICScript dans le script avec le dossier qui contient le script.


Les options possibles sont :


  • fullpath: Booléen indiquant si le champ input récupère non seulement le nom du fichier mais aussi le chemin relatif.
  • repImages: Chaine désignant le répertoire contenant les images et/ou dossiers à afficher dans la liste déroulante.


L'utilisation de ce script nécessite que la bibliothèque mooTools soit chargé ainsi que le fichier mooImgCombo.js et l'instanciation de la classe doit se faire dans l'évênement domready de l'objet window.


C'est dans un programme PHP que la liste des fichiers est constituée et récupérée par un Request via JavaScript. Attention à ce qu'il y ait bien les droits en lecture sur le dossier désigné (au moins 0700 pour www-data).


Téléchargement


mooImgCombo.zip (15 ko)


L'archive contient la classe (fichier mooImgCombo.js), le programme PHP (mooImgCombo.php) et des fichiers graphiques nécessaires à l'affichage de la liste déroulante (Icônes, image d'attente chargement aperçu, image du bouton de la combobox).



Vous avez aimé ce billet ?

 

Vous aimerez peut être...
> ComboBox pour envoi de fichiers
> Héberger et lier sa propre police personnalisée
> Glissière pour choix d'une valeur numérique
> Génération d'une bannière texte
> Animation d'élements en CSS3
 

Mot-clefs de ce billet...
choix classe comboxbox fichier images mooimgcombo

Commentaires


Aucun commentaire...


Ajouter un commentaire


La validation des commentaires se fait manuellement par l'administrateur du blog. La publication de votre commentaire se fera donc une fois que l'administrateur du blog l'aura accepté. Toutefois, si votre commentaire ne respecte pas les conditions d'utilisation ou s'il est considéré comme spam, il sera supprimé sans être publié.

Auteur
Email
 
(facultatif et caché)
Site web
 
(facultatif)
Message

Ico Valider


MP  Mighty Productions
> Blogs
> Partage de codes sources - PHP / JS / mooTools
> mooTools
> ComboxBox de choix d'images
 
RSS       Mentions légales       Comms  Haut de la page  
◄ ►