返回列表 發帖

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

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

好深奧啊
一直看都沒看懂

TOP

  是我寫的不清楚嗎?

要有一點點 JavaScript/jQuery 的使用經驗啦,很容易上手的。
To infinity and beyond!

TOP

讚 !!

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

TOP

返回列表 回復 發帖