asp.net 之顏色選擇器,仿調色板功能
1. 插件非常容易使用,只需引用相應的js文件和css樣式文件即可,見代碼示例,插件精小,炫酷
2. 只需要初始化即可使用,並且選擇的顏色會在文本框中以16進制的形式顯示出來,即HEX顏色格式,到時候直接取值即可
3.大多數的顏色控件可能不好收集或者不易使用,故分享出來並且整理出來
4.代碼展示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html> 4 <head> 5 <title>Farbtastic</title> 6 7 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 8 9 <script type="text/javascript" src="farbtastic.js"></script> 10 11 <link rel="stylesheet" href="farbtastic.css" type="text/css" /> 12 13 <script type="text/javascript" charset="utf-8"> 14 15 //初始化 16 $(document).ready(function() { 17 $('#picker').farbtastic('#color'); 18 }); 19 </script> 20 </head> 21 22 <body> 23 24 <h1>jQuery 顏色選擇器</h1> 25 26 <form action="" style="width: 300px;"> 27 <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div> 28 <div id="picker"></div> 29 </form> 30 31 <p>More info<a href="http://www.cnblogs.com/rushme/">rush_me</a>.</p> 32 </body> 33 </html>
5. 關於使用
$('#picker').farbtastic('#color'); 意思是在id為picker的容器,該容器顯示顏色選擇器插件,就是類似於一張很炫圖片,其中id為color是將顏色顯示在這個容器里面,大家可以自定義
初始化時需要自己指定對應的容器id和插線顯示id
6.圖片效果展示
7,關於與插件的js和css,請下載demo