ColorPicker js control
看过http://andreaslagerkvist.com/jquery/colour-picker/之后,发现很麻烦,所以自己动手丰衣足食.
下面看代码
JavaScript
<script type="text/javascript"> $(function () { Init6Color(); $("#colorValue").click(function () { $("#ColorList").show(); }); }); function Init6Color() { var cs = new Array('00', '33', '66', '99', 'CC', 'FF'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { for (var k = 0; k < 6; k++) { var c = cs[i] + cs[j] + cs[k]; $("<div class='colordiv' style=\"background-color:#" + c + " \"></div>").appendTo($("#ColorList")) .click(function () { var color = $(this).css("background-color"); $("#colorValue").val(color).css("background-color", color); $("#ColorList").hide(); }); } } } } </script>
CSS:
<style type="text/css"> #ColorList { width: 180px; display: none; } #colorValue { background: url("jquery.colourPicker.gif") right center no-repeat; } .colordiv { display: inline-block; width: 30px; height: 30px; float: left; } </style>
HTML:
<div> <input id="colorValue" readonly="readonly" /> <div id="ColorList"> </div> </div>
博客园页面显示是第一次写,存在诸多问题,下面是源码地址:
https://files.cnblogs.com/Flyear/ColorPicker.zip
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架