顏色選擇器效果百百種款，現在要介紹的 jQuery miniColors 也是一款方便簡單使用的顏色選擇器。
套件名稱：jQuery miniColors
套件版本：N/A
作者網站：http://www.abeautifulsite.net/......elector-for-input-controls/
套件網址：N/A
發佈日期：2012-03-09
檔案大小：15.3 KB
檔案下載：jquery.miniColors.js jquery.miniColors.css
圖片資源：images.zip
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | letterCase(選填) 描述： 設定文字大小寫顯示方式；'lowercase' 表示全小寫, 'uppercase' 表示全大寫 預設值： 無 disabled(選填) 描述： 若設為 true 則停用顏色選擇 預設值： 無 readonly(選填) 描述： 若設為 true 則顏色選擇只能唯讀 預設值： 無 |
參數選項說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | letterCase(選填) 描述： 設定文字大小寫顯示方式；'lowercase' 表示全小寫, 'uppercase' 表示全大寫 預設值： 無 disabled(選填) 描述： 若設為 true 則停用顏色選擇 預設值： 無 readonly(選填) 描述： 若設為 true 則顏色選擇只能唯讀 預設值： 無 value(選填) 描述： 設定或取得顏色值 預設值： 無 destroy(選填) 描述： 取消 miniColors 效果並還原成原本的輸入框 預設值： 無 |
方法說明：
檢視原始碼 JavaScript
1 2 3 4 5 | // 把指定元素轉換成 miniColors 效果 $(selector).miniColors(options); // 設定或是取得 miniColors 參數值 $(selector).miniColors('methodName', [value]); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <link type="text/css" rel="stylesheet" href="jquery.miniColors.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.miniColors.js"></script> <script type="text/javascript"> $(function(){ // 把有 .color-picker 的輸入框轉換成 miniColors 效果 $(".color-picker").miniColors({ letterCase: 'uppercase' }); $("#randomize").click(function(){ // 產生隨機顏色 $(".color-picker").each(function(){ $(this).miniColors('value', '#' + Math.floor(Math.random() * 16777215).toString(16)); }); }); }); </script> <body> <input type="text" name="color1" class="color-picker" size="6" autocomplete="on" maxlength="10" /> <br /><br /> <input type="hidden" name="color4" class="color-picker" size="6" value="#ff0000" /> <br /><br /> <input type="button" id="randomize" value="隨機顏色" /> </body> |
这个控件IE6不支持呀~~
是啊, 或者可以試試 Simple Color Picker
我試過，發現他在IE6下不兼容的問題，主要是應為使用PNG不透明所引起的。你可以使用DD_belatedPNG.js 來解決這個問題。