jQuery यूआई कलर पिकर

Question

मैंने सुना है कि jQuery यूआई में कलर पिकर शामिल है लेकिन इसके बारे में थोड़ा दस्तावेज मिल सकता है।

यह मौजूद है?

यह कैसे लागू करने के लिए पर कोई सभ्य प्रलेखन? Firebug मुझे बता .colorpicker(); एक तरीका नहीं है के साथ

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

काम नहीं करता,: http://docs.jquery.com/UI/Colorpicker

लेकिन का उपयोग कर:

मैं इस मिल गया!

यह ठीक काम करने के लिए, जब तक मैं एक संवाद UI जहां यह तो तोड़ने के लिए फैसला करता है में रख रहा है।

Answer 1

आप यहाँ कुछ डेमो और प्लग इन पा सकते हैं।

http://jqueryui.pbworks.com/ColorPicker

Answer 2

सुनिश्चित करें कि आप jQuery यूआई आधार और रंग पिकर विजेट अपने पृष्ठ पर शामिल (और साथ ही 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> 

आप उन को शामिल किया है तो आपके स्रोत पोस्टिंग तो हम कोशिश देख सकते हैं कि क्या हो रहा है।

Answer 3

जब स्वत: पूर्ण पर काम कर jQuery के साथ (एक तरीका नहीं है) एक ही समस्या थी। ऐसा लगता है कि autocomplete.js लोड होने से पहले कोड निष्पादित किया गया था। तो सुनिश्चित करें कि ui.colorpicker.js को colorpicker को कॉल करने से पहले लोड किया गया है।

Answer 4

है ऐसा इसलिए है क्योंकि आप पहले यह भरी हुई है प्लगइन का उपयोग करने की कोशिश कर रहे हैं। आप इस के साथ आसपास के द्वारा इसे करने के लिए कोई कॉल करने से जब डोम भरी हुई है प्रयास करना चाहिए:

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

Answer 5

शायद मैं बहुत देर से, लेकिन अब के रूप में वहाँ एक और तरीका है इसका इस्तेमाल करने के jQuery ui slider का उपयोग कर रहा हूँ।

यहाँ कैसे अपने 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>