Palette

Publié le : 2 août 2008 – Dernière modification le 21 décembre 2021 – par Daniel FAIVRE, kent1, Maïeul – 97 commentaires

1
2
3
4
5
26 votes
Permet de choisir des couleurs avec jQuery et tinyColorPicker

Ce plugin facilite la sélection de couleurs dans des formulaires de configuration. Il suffit d’ajouter la classe CSS palette sur les input souhaitant disposer de ce sélecteur.

Ce plugin intègre la librairie tinyColorPicker dans SPIP afin de permettre aisément de sélectionner une couleur sur les formulaires qui en ont le besoin.

Installation et configuration

Ce plugin peut s’installer simplement par l’intermédiaire du gestionnaire de plugins de SPIP. Voir page dédiée.

Vous pouvez configurer ce plugin en cliquant sur sa petite icône de configuration depuis la page de gestion des plugins une fois ce plugin activé.

La configuration permet d’insérer les scripts nécessaires au fonctionnement du plugin dans l’espace privé et/ou dans l’espace public.

Utilisation

À partir du moment où la librairie est insérée dans la page (voir la configuration), tout champ input de formulaire HTML possédant la classe palette aura un sélecteur de couleur associé.

Attention ! Le sélecteur n’apparaîtra que lorsque l’on cherchera a éditer le contenu du champ ; cependant la couleur de fond déjà sélectionnée est visible.

Exemples

Sélecteur de couleur sur un input :

<input class="palette" name="couleur" value="#dfdfdf" />

Sélecteur de couleur avec gestion de la transparence (version 4+)

<input class="palette" name="couleur" 
    value="rgba(100,10,200,.6)" 
    data-palette-withalpha="1"
/>

Utilisation avec Saisies

Si vous avez le plugin Saisies activé, vous pouvez utiliser la vue couleur

[(#SAISIE{couleur, couleur_aside,
		label=<:odaiba:cfg_couleur_aside:>,
		defaut=#ff6600})]

Historique

  • À partir de la version 4, la transparence peut être gérée
  • Avant la version 4 du plugin, la librairie Farbtastic était utilisée.
  • Avant SPIP 3, le plugin CFG permettait la même chose mais la classe à appliquer était « cfg_couleur ». Il suffit de remplacer « cfg_couleur » par « palette »

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

4 discussions

  • baloo

    bonjour,

    J’utilise SAISIE et Palette 4.0.9 avec SPIP4

    array(
			'saisie' => 'couleur',
			'options' => array(
				'nom' => 'fond_titre',
				'defaut' =>'transparent',
								)
				),

    j’obtiens un carré .
    si je clique dans le carré j’obtiens a la fois la partie saisie des couleurs de palette et un deuxieme formulaire de saisie ( celui de windows ??)
    si je sélectionne une couleur elle s’enregistre bien.
    j’ai 2 questions :
    1- comment faire pour n’avoir que le formulaire de palette ?
    2- Une fois que j’ai choisis une couleur, et enregistré, je dois toujours en choisir une. Je peux la changer mais je ne peux plus choisir de ne pas en avoir.
    Comment supprimer la couleur choisis ? est-ce prévu dans palette ? est-ce que je dois mettre un bouton supprimer et le gérer en javascript ?

    Répondre à ce message

  • Royer

    Bonjour,
    Avec Saisies, comment peut-on gérer la transparence ?
    Cordialement

    Répondre à ce message

  • 2
    rsuinux

    Bonjour,

    Je viens d’utiliser votre plugin dans la partie privé de mon site.
    J’ai un formulaire pour le plugin que je construis actuellement, mais j’ai un léger souci :
    je cherche à avoir une largeur complète de la couleur affichée pour la partie du bouton « defaut » mais je n’ai qu’un petit rectangle. J’ai, bien évidemment,n utilisé
    'conteneur_class' => 'pleine_largeur',
    mais c’est toute la zone de la question qui est agrandie !!! et pas la zone en couleur :(
    J’utilise la syntaxe « saisies » :

    array (
'saisie' => 'palette',
'options' => array (
   'conteneur_class' => 'pleine_largeur',
  'non' => 'valeur_variable',
  'label' => 'le label',
 'defaut' => 'la valeur par defaut dont la taille ne change pas à l'affichage'
)
)

    (j’ai recopié à la main, je ne suis pas chez moi)
    j’ai loupé un truc ? ou je n’ai pas placé la ’plein_largeur’ au bonne endroit ?

    Merci de votre aide.
    Rémi.

    • Maïeul

      Comme son nom l’indique, l’option conteneur_class s’applique au conteneur (qui englobe saisie + label). Donc le comportement est normal.

      C’est juste un problème de css. Il faudrait que tu créé un fichier de style à insérer dans le privé (par exemple via la balise style du paquet.xml) et que tu stylise input.palette

      Coquille dans ton exemple :« non » doit être remplacé par « nom ».

    • rsuinux

      merci pour ta réponse.
      (la coquille, c’est tout simplement que j’ai recopié là la main).

      Je comprends mieux pourquoi ça ne fonctionne pas.

      Je m’y colle donc.

    Répondre à ce message

  • 1
    gilcot

    Attention, avec SPIP 3.2 j’ai bien le bouton de configuration du plugin, mais la page de configuration na affiche plus de formulaire...

    • gilcot

      Mauvaise lange moi. En fait ça fonctionne très bien ...après avoir téléchargé de nouveau (le zip était corrompu la première fois)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom