jQuery Plusin-farbtastic



在網頁上呈現顏色,必須要使用16進制數字的表示來代表各個顏色,這跟我們一般認知的紅色、黃色...等文字表示顏色有很大的不同,所以在photoshop有顏色選擇器可以讓使用者用是決選出自己喜歡的顏色,而如果想要在網頁上也有一樣的效果,就可以使用farbtastic這個外掛。

先從上面的網址去下載外掛,然後依規則使用外掛,就可以達成效果了。

首先把外掛跟css引入,記得圖片也要放上去同一個資料夾。
<script src="farbtastic.js" type="text/javascript">
</script>
<link href="farbtastic.css" rel="stylesheet" type="text/css"></link>

然後依下面的規則建立元件。
<form><input type="text" id="color" name="color" value="#123456" /></form>
<div id="colorpicker"></div>

最後再在jquery裡把外掛指定給特定元素。
<script type="text/javascript">
$(document).ready(function() {
$('#colorpicker').farbtastic('#color');
});
</script>

然後就可以很簡單的使用這個外掛了,更詳細的說明可以到官網去看看。

範例

留言