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
posted @   DukeCheng  阅读(483)  评论(0编辑  收藏  举报
编辑推荐:
· 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 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示