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 事件來處理,被選取的顏色也已經更新到文字框內,因此直接取出文字框內的值,再做你要的處理即可。 |