c#/asp.net實現炫酷仿調色板/顏色選擇器功能


 

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


 





 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM