用顏色選擇器改變jquery的顏色？

我有這個jquery腳本，通過在文本框中輸入一個顏色代碼來立即改變背景的顏色，工作示例在下面的jsfiddle鏈接中。用顏色選擇器改變jquery的顏色？

http://jsfiddle.net/7jg4e/

但不是輸入字段我想用一個顏色選擇器自定義皮膚，監守我不希望用戶處理十六進制代碼（就像Twitter的）。的jQuery插件我嘗試使用在

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

被發現在它與DOM元素整齊的顏色選擇器頁面BUTTOM。

所以問題是我將如何從輸入類型更改爲顏色選擇器股利。謝謝:)）

來源

2010-11-10 getaway

試試這個：http://jsfiddle.net/SpmuV/ – TheVillageIdiot 2010-11-10 17:12:52

有一個div使用類似更換輸入元素：（未經測試）

HTML

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

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

有一個例子在鏈接的底部顯示如何。

更新更改文本

HTML

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

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

來源

2010-11-10 16:35:03 Fermin

謝謝你的偉大的答案，但想象我想chnage的文字的顏色也是如何在HTML中的div顏色選擇器去從兩個顏色選擇器+ upvote從我:) :) – getaway 2010-11-10 16:38:20

更新的答案顯示如何要更改文本的顏色，您可以在表單上選擇2個顏色選擇器，一個用於背景，另一個用於文本。 – Fermin 2010-11-10 16:51:52

我可以問你多一個問題，對不起，我如何獲得值（十六進制），當顏色是sumbited，所以我可以將它保存在數據庫中！即時消息如此困惑 – getaway 2010-11-10 18:55:28

如何：

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

來源

2010-11-10 16:32:33

關於事物的HTML側 – getaway 2010-11-10 16:34:24

只要有一個''

爲您的顏色選擇框，然後你的''只要使用它就會改變。 – 2010-11-10 16:39:06

我有同樣的問題，下面是我的解決方案。

編輯colorpicker.js線96

從

cal.data（ '顏色拾取'）。onChange.apply（CAL，[COL，HSBToHex（COL）， HSBToRGB（COL）] ）;

到

cal.data（ '顏色拾取'）。onChange.apply（CAL，[COL，HSBToHex（COL）， HSBToRGB（COL），cal.data（ '顏色拾取'） .el]）;

的變化事件，而不是的onChange

：功能（HSB，十六進制RGB）...

到

的onChange：功能（HSB，十六進制，RGB，EL）{
$（EL）。val（'＃'+ hex）;
}

來源

2012-04-10 13:22:21 keithics

正如進一步參考... HTML5已經包含了「顏色」作爲輸入類型。

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

另外，你可以應用一些CSS樣式：

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

現在，主要的問題......你能捕捉到色彩值與一個簡單的腳本來改變BG-顏色。活生生的例子：http://jsfiddle.net/7jg4e/152/

來源

2012-08-20 09:59:16 gmo

感謝keithics ..

我有類似的問題。我必須爲colorpicker調用動態按鈕。我採取類而不是id。

它幫了我很多。

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

來源

2013-03-12 10:57:17 palak

用顏色選擇器改變jquery的顏色？

回答

相關問題