[jQuery] Color Picker - 簡易顏色選擇器
[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jQuery Color Picker[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] [url]http://vreboton.ibacolod.com/DotNetNuke/ControlsandTips/tabid/60/Default.aspx[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 簡易的顏色選擇器
[b][size=4][color=Indigo]使用方式[/color][/size][/b]
下載 jQuery Color Picker 後，將 js 和 css 引用進來。
[code html]
<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>
[/code]
[b][/b]
[b][size=4][color=Indigo]基本的範例[/color][/size][/b]
[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 原始碼如下，基本上就是一個文字輸入框，可以帶入預設值：
[code html:nocontrols]<input type="text" id="demo1" value="#FF33FF" />[/code]
JavaScript 如下，對 jQuery 物件使用 attachColorPicker() 即可：
[code js:nocontrols]$('#demo1').attachColorPicker();[/code]
[b][/b]
[b][size=4][color=Indigo]callback 的範例[/color][/size][/b]
這個 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 原始碼的部份：
[code js]
$('#demo2').attachColorPicker().change(function() {
$(".postmessage:first").css("background-color", $('#demo2').getValue());
});
[/code]
其實 callback 的機制是透過文字框的 onchange 事件來處理，被選取的顏色也已經更新到文字框內，因此直接取出文字框內的值，再做你要的處理即可。 好深奧啊
一直看都沒看懂:L :L 是我寫的不清楚嗎？
要有一點點 JavaScript/jQuery 的使用經驗啦，很容易上手的。
讚 !!
:) 講解明瞭,清楚 ..very 讚 !!頁:
[1]