基於 Mootools 框架的顏色選擇套件-mooRainbow
 |
| 程式執行時樣子 |
在設計師製作後台的時候，偶爾會需要用到顏色，使用者又不可能去被色碼開修圖程式去看色碼在到後台又很麻煩，所以這一類型的套件就此誕生了!!基於Mootools 框架強大的JavaScripts 顏色選擇套件。
使用方法：
首先先把 Mootools 的框架和套件檔案加入
首先先把 Mootools 的框架和套件檔案加入
//Mootools 框架檔案
<script src="mootools.js" type="text/javascript"></script>
<script src="mooRainbow.js" type="text/javascript"></script>
//CSS 部分可自行修改成您需要呈現的樣子
<link rel="stylesheet" type="text/css" href="mooRainbow.css">
再來在你要放置選擇顏色的地方HTML的部分
<label>
<img id="myRainbow" src="imgs/rainbow.png" alt="[r]" width="16" height="16" />
<input id="myInput" name="myInput" type="text" size="13" />
</label>
最後加上Javascript的部分就完成了
<script language="javascript">
window.addEvent('domready', function() {
var r = new MooRainbow('myRainbow', {
'startColor': [58, 142, 246],
'onChange': function(color) {
$('myInput').value = color.hex;
}
});
});
</script>
附上他可供修改的參數
| 屬性 | 說明 |
| id | MooRainbow作用的id 預設值為 mooRainbow 注意：每個物件都必須有一個唯一的ID |
| prefix | CSS的classnames 的前綴字 |
| imgpath | 放置顏色編輯器的圖片位置 |
| startColor | 預設的顏色 |
| wheel | 讓方向鍵上下起作用!預設為 false |
| onChange | 當顏色按下時執行的函式 |
| onComplate | 當完成選擇的時候執行的函式 |
作者網站：http://moorainbow.woolly-sheep.net
檔案大小：7.2 KB(不包含Mootools框架)
檔案下載：http://moorainbow.woolly-sheep.net/#download
檔案備份：下載
0 意見