jQuery UI Color Picker

J’ai entendu dire que l’interface utilisateur de jQuery comprend un sélecteur de couleurs mais que je peux trouver peu de documentation à ce sujet.

Existe-t-il?

Une documentation décente sur la manière de la mettre en œuvre?

J’ai trouvé ceci: http://docs.jquery.com/UI/Colorpicker

Mais en utilisant:

$("#colorpicker").colorpicker(); 

ne fonctionne pas, avec Firebug qui me dit .colorpicker(); n’est pas une méthode!

Cela semble fonctionner correctement, à moins que je ne le mette dans une interface de dialog où il décide alors de rompre.

Vous pouvez trouver des démos et des plugins ici.

http://jqueryui.pbworks.com/ColorPicker

Je suis peut-être très en retard, mais pour le moment, il y a une autre façon de l’utiliser en utilisant le curseur jquery ui.

Voici comment cela est montré dans la documentation de jquery:

 function hexFromRGB(r, g, b) { var hex = [ r.toSsortingng( 16 ), g.toSsortingng( 16 ), b.toSsortingng( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#swatch" ).css( "background-color", "#" + hex ); } $(function() { $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 255 ); $( "#green" ).slider( "value", 140 ); $( "#blue" ).slider( "value", 60 ); }); 
 #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none; } #red .ui-slider-range { background: #ef2929; } #red .ui-slider-handle { border-color: #ef2929; } #green .ui-slider-range { background: #8ae234; } #green .ui-slider-handle { border-color: #8ae234; } #blue .ui-slider-range { background: #729fcf; } #blue .ui-slider-handle { border-color: #729fcf; } 
    

Simple Colorpicker

Assurez-vous de disposer de la base de l’interface utilisateur jQuery et du widget de sélection des couleurs sur votre page (ainsi que d’une copie de jQuery 1.3):

    

Si vous en avez inclus, essayez de poster votre source afin que nous puissions voir ce qui se passe.

Avait le même problème (n’est pas une méthode) avec jQuery quand on travaille sur autocomplete. Il est apparu que le code avait été exécuté avant le chargement de autocomplete.js. Assurez-vous donc que le fichier ui.colorpicker.js est chargé avant d’appeler colorpicker.

C’est parce que vous essayez d’accéder au plugin avant qu’il ne soit chargé. Vous devriez essayer de l’appeler lorsque le DOM est chargé en l’entourant de ceci:

 $(document).ready(function(){ $("#colorpicker").colorpicker(); }