標題: [jQuery] Color Picker - 簡易顏色選擇器 [打印本頁]
作者: wmh 時間: 2008-5-26 00:39 標題: [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>
基本的範例
[jsg.example]
<input type="text" id="demo1" value="#FF33FF" />
<link rel="stylesheet" type="text/css" href="_lib/jquery/plugins/ColorPicker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/ColorPicker.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
$j('#demo1').attachColorPicker();
});
</script>
[/jsg.example]
html 原始碼如下，基本上就是一個文字輸入框，可以帶入預設值：<input type="text" id="demo1" value="#FF33FF" />
JavaScript 如下，對 jQuery 物件使用 attachColorPicker() 即可：$('#demo1').attachColorPicker();
callback 的範例
這個 plugin 可透過一點小技巧達到 callback 的效果，這個範例是在選擇顏色後同時改變文章的底色。
[jsg.example]
<input type="text" id="demo2" />
<script type="text/javascript">
$j(document).ready(function() {
$j('#demo2').attachColorPicker().change(function() {
$j(".postmessage:first").css("background-color", $j('#demo2').getValue());
});
});
</script>
[/jsg.example]
直接來看 JavaScript 原始碼的部份：
$('#demo2').attachColorPicker().change(function() {
$(".postmessage:first").css("background-color", $('#demo2').getValue());
});
其實 callback 的機制是透過文字框的 onchange 事件來處理，被選取的顏色也已經更新到文字框內，因此直接取出文字框內的值，再做你要的處理即可。
作者: carlkyo 時間: 2008-9-18 22:14
好深奧啊
一直看都沒看懂
作者: wmh 時間: 2008-9-18 22:35
是我寫的不清楚嗎？
要有一點點 JavaScript/jQuery 的使用經驗啦，很容易上手的。
作者: happyZorn 時間: 2009-1-23 22:09 標題: 讚 !!
講解明瞭,清楚 ..very 讚 !!
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|