web-dev-qa-db-fra.com

jQuery UI Color Picker

J'ai entendu dire que jQuery UI incluait un sélecteur de couleurs, mais je pouvais trouver peu de documentation à ce sujet.

Est-ce qu'il existe?

Toute la documentation décente sur la façon de le 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 que .colorpicker(); n’est pas une méthode!

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

jqueryjquery-uidocumentationcolor-picker
54
Damien

Vous pouvez trouver quelques démos et plugins ici.

http://jqueryui.pbworks.com/ColorPicker

39
shin

Je suis peut-être très en retard, mais à partir de maintenant, il existe une autre façon de l'utiliser en utilisant le jquery ui slider .

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

function hexFromRGB(r, g, b) {
    var hex = [
      r.toString( 16 ),
      g.toString( 16 ),
      b.toString( 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; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
  Simple Colorpicker
</p>
 
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
6
Kakar

Assurez-vous que la base de l'interface utilisateur jQuery et le widget de sélecteur de couleurs sont inclus sur votre page (ainsi qu'une copie de jQuery 1.3):

<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>

<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.colorpicker.js"></script>

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

2
ajm

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

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

Avait le même problème (n'est pas une méthode) avec jQuery lorsque vous travaillez sur la complétion automatique. Il est apparu que le code avait été exécuté avant le chargement du fichier autocomplete.js. Assurez-vous donc que le fichier ui.colorpicker.js est chargé avant d'appeler colorpicker.

1
RvdK