Selettore colore UI jQuery

Question

Ho sentito dire che l'interfaccia utente di jQuery include un selettore di colori ma potrebbe trovare poca documentazione a riguardo.

Esiste?

Qualsiasi documentazione decente su come implementarla?

ho trovato questo: http://docs.jquery.com/UI/Colorpicker

Ma usando:

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

non funziona, con Firebug mi dice .colorpicker(); non è un metodo!

Sembra funzionare correttamente, a meno che non lo inserisca nell'interfaccia utente di una finestra di dialogo in cui quindi decide di interrompere.

Answer 1

Qui puoi trovare alcuni demo e plug-in.

http://jqueryui.pbworks.com/ColorPicker

Answer 2

Assicurarsi di avere base di jQuery UI e il widget di color picker inserire nella tua pagina (così come una copia di 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> 

Se avete quelli inclusi, prova a pubblicare la vostra fonte in modo da può vedere cosa sta succedendo.

Answer 3

avuto lo stesso problema (non è un metodo) con jQuery quando si lavora su automatico. Sembra che il codice sia stato eseguito prima che fosse caricato il file autocomplete.js. Quindi assicurati che ui.colorpicker.js sia caricato prima di chiamare colorpicker.

Answer 4

Questo perché si sta tentando di accedere al plug-in prima che venga caricato. Si dovrebbe provare a fare una chiamata ad esso quando il DOM è caricato circondandolo con questo:

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

Answer 5

Forse sono molto tardi, ma fin d'ora c'è un altro modo per utilizzare utilizzando l'interfaccia utente jquery slider.

Ecco come la sua mostrato nella documentazione 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>