[jQuery] Color Picker - 簡易顏色選擇器 jQuery, colorPicker

wmh

jQuery Color Picker
http://vreboton.ibacolod.com/Dot ... bid/60/Default.aspx
簡易的顏色選擇器

使用方式

下載 jQuery Color Picker 後，將 js 和 css 引用進來。

<link rel="stylesheet" type="text/css" href="ColorPicker.css" />  
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="ColorPicker.js"></script>

基本的範例



html 原始碼如下，基本上就是一個文字輸入框，可以帶入預設值：

<input type="text" id="demo1" value="#FF33FF" />

JavaScript 如下，對 jQuery 物件使用 attachColorPicker() 即可：

$('#demo1').attachColorPicker();

callback 的範例

這個 plugin 可透過一點小技巧達到 callback 的效果，這個範例是在選擇顏色後同時改變文章的底色。



直接來看 JavaScript 原始碼的部份：

$('#demo2').attachColorPicker().change(function() {
  $(".postmessage:first").css("background-color", $('#demo2').getValue());
});

其實 callback 的機制是透過文字框的 onchange 事件來處理，被選取的顏色也已經更新到文字框內，因此直接取出文字框內的值，再做你要的處理即可。

carlkyo

好深奧啊
一直看都沒看懂

wmh

  是我寫的不清楚嗎？

要有一點點 JavaScript/jQuery 的使用經驗啦，很容易上手的。

happyZorn

  講解明瞭,清楚 ..very 讚 !!