बदलते रंग?

Question

मेरे पास यह jquery स्क्रिप्ट है जो टेक्स्टबॉक्स में रंग कोड दर्ज करके पृष्ठभूमि के रंग को तुरंत बदलती है, कामकाजी उदाहरण नीचे jsfiddle लिंक में है।

http://jsfiddle.net/7jg4e/

लेकिन इसके बजाय इनपुट क्षेत्र मैं, एक रंग पिकर कस्टम त्वचा का उपयोग करने के, क्योंकि मैं न उपयोगकर्ता हेक्स कोड (बस चहचहाना की तरह) के साथ सौदा करना चाहते हैं चाहता था। jQuery प्लगइन im का उपयोग करने की कोशिश कर पेज यह डोम तत्व के साथ साफ रंग पिकर है की स्थित बटन पर

http://www.eyecon.ro/colorpicker/

में पाया जाता है।

तो समस्या यह है कि मैं इनपुट प्रकार से रंग पिकर div में कैसे बदलूं। धन्यवाद :))

Answer 1

की तरह एक div उपयोग कुछ के साथ इनपुट तत्व की जगह: (untested)

एचटीएमएल

<div id='colourPicker'></div> 

जे एस

$('#colourPicker').ColorPicker({ 
    onChange: function(hsb, hex, rgb){ 
    $("#full").css("background-color", '#' + hex); 
    } 
}); 

एक उदाहरण है आपके पास लिंक के निचले हिस्से में जो आपको दिखाता है कि कैसे। पाठ

एचटीएमएल बदलने के लिए

अद्यतन

<div id='colourPickerText'></div> 
<div id='textToBeChanged'>Test text</div> 

जे एस

$('#colourPickerText').ColorPicker({ 
    onChange: function(hsb, hex, rgb){ 
    $("#textToBeChanged").css("color", '#' + hex); 
    } 
}); 

Answer 2

कैसे के बारे में:

$('#colorSelector').ColorPicker({ 
onChange: function(hsb, hex, rgb) 
      { 
      $("#full").css("background-color", hex); 
      } 
}); 

Answer 3

मैं एक ही समस्या है और नीचे मेरी समाधान है।

colorpicker.js संपादित से

cal.data ('colorpicker') 96

लाइन। OnChange.apply (कैलोरी, [col, HSBToHex (col), HSBToRGB (col)]);

cal.data ('colorpicker')। OnChange.apply (कैलोरी, [col, HSBToHex (col), HSBToRGB (col), cal.data ('colorpicker') के लिए .el]);

onChange के बजाय परिवर्तन ईवेंट पर

: समारोह (hsb, हेक्स, आरजीबी) ...

onChange रहे हैं: समारोह (hsb, हेक्स, आरजीबी, एल) {
$ (एल)।वैल ('#' + हेक्स);
}

Answer 4

बस आगे के संदर्भ के रूप में ... एचटीएमएल 5 पहले से ही एक इनपुट प्रकार के रूप में "रंग" शामिल हैं।

input[type="color"]{/*css-here*/} 

अब, मुख्य प्रश्न के लिए ... आप रंग मूल्य पर कब्जा कर सकते हैं एक सरल स्क्रिप्ट के साथ bg-रंग बदलने के लिए:

<label for="bg">Choose color:</label> 
<input id="bg" type="color" /> 

इसके अलावा, आप के साथ कुछ सीएसएस शैली लागू कर सकते हैं। लाइव उदाहरण: http://jsfiddle.net/7jg4e/152/

Answer 5

धन्यवाद keithics ..

मैं इसी तरह की समस्या थी। मुझे गतिशील बटन के लिए कलरपीकर कॉल करना पड़ा। मैंने आईडी के बजाय कक्षा लेने के साथ किया था।

इससे मुझे बहुत मदद मिली।

$('.colorSelector').ColorPicker({ 
onChange: function(hsb, hex, rgb,el) 
     { 
     $(el).val('#' + hex); 
     } 
});