zoukankan      html  css  js  c++  java
  • 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 {  180px; display: none; }
            #colorValue { background: url("jquery.colourPicker.gif") right center no-repeat; }
            .colordiv { display: inline-block;  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
  • 相关阅读:
    ASP.NET
    JS、JQury
    ASP.NET
    ASP.NET
    ASP.NET
    C#
    C#
    C#
    基础算法-树:预备知识
    开发环境配置--Ubuntu+Qt4+OpenCV(二)
  • 原文地址:https://www.cnblogs.com/feinian/p/2116506.html
Copyright © 2011-2022 走看看