bootstrap - jquery color picker

jQuery UI Color Picker

Question

He oído que jQuery UI incluye un selector de color, pero podría encontrar poca documentación al respecto.

¿Existe?

¿Alguna documentación decente sobre cómo implementarla?

Encontré esto: http://docs.jquery.com/UI/Colorpicker

Pero usando:

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

no funciona, con Firebug diciéndome .colorpicker(); no es un método!

Parece funcionar bien, a menos que lo ponga en una interfaz de usuario de diálogo donde luego decida romper.

Answer 1

Asegúrese de tener la base de jQuery UI y el widget selector de color incluido en su página (así como una copia 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 tiene los incluidos, intente publicar su fuente para que podamos ver lo que está sucediendo.

Answer 2

Esto se debe a que está intentando acceder al complemento antes de que se cargue. Debería intentar hacer una llamada cuando el DOM está cargado rodeándolo con esto:

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

Answer 3

Puedes encontrar algunas demostraciones y complementos aquí.

http://jqueryui.pbworks.com/ColorPicker

Answer 4

Quizás sea muy tarde, pero a partir de ahora hay otra forma de usarlo con el slider jquery ui.

Así es como se muestra en los documentos 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>

Answer 5

Tuvo el mismo problema (no es un método) con jQuery al trabajar en autocompletar. Parece que el código se ejecutó antes de cargar el autocomplete.js. Así que asegúrese de que ui.colorpicker.js esté cargado antes de llamar a colorpicker.