zoukankan      html  css  js  c++  java
  • Jquery颜色选择器Demo,真的非常好用的

    本人比较懒,直接给源码了!

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <title>Index</title>

        <script src="http://www.cnblogs.com/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>    ///你的Jquery库
        <script type="text/javascript"  src="http://www.google.cn/jsapi"></script>    
        <script src="http://www.cnblogs.com/Plugins/ColorPicker/jquery.colorpicker.js"  type="text/javascript"></script>    ///你必须加载的jquery文件


        <script language="javascript" type="text/javascript">
            function getColor() {
                var Color = $("#txtcolor").val();
                //alert(Color.toString());
                $("#Words").css("color", "red");
                $("#Words").css("color", Color.toString());
            }
        </script>
    </head>
    <body>
        <div>
            <script type="text/javascript">
                $(function () {
                    $.showcolor('btncolor', 'txtcolor'); //第一参数:按钮ID,第二参数: 文本框ID
                    $.showcolor('imgcolor', 'txtcolor1');
                })
    </script>
    <input type="text" id="txtcolor" />
    <input type="button" id="btncolor" value="选取字体颜色" />

    <input type="button" id="getColor" onclick="getColor();" value="给字体加颜色" />
    <span id="Words">
    选择的文字
    </span>
        </div>
    </body>
    </html>

    jquery.colorpicker.js  文件内容如下:

    /**
    * @author 疯狂秀才 (代加工,不算原创,jquery 插件不是很熟,拿此练练!!)
    * QQ:1055818239
    */
    var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
    var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
    $(function () {
        initColor();
        $("#colorpanel").hide();
    })

    function initColor() {
        $("body").append('<div id="colorpanel" style="position: absolute; display: none;"></div>');
        var colorTable = '';
        for (i = 0; i < 2; i++) {
            for (j = 0; j < 6; j++) {
                colorTable = colorTable + '<tr height=12>'
                colorTable = colorTable + '<td width=11 style="background-color:#000000">'

                if (i == 0) {
                    colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">'
                } else {
                    colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '">'
                }

                colorTable = colorTable + '<td width=11 style="background-color:#000000">'
                for (k = 0; k < 3; k++) {
                    for (l = 0; l < 6; l++) {
                        colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">'
                    }
                }
            }
        }

        colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
                   + '<tr height=30><td colspan=21 bgcolor=#cccccc>'
                   + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
                   + '<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
                   + '<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"><a href=### id="_cclose">关闭</a></td></tr></table></td></table>'
                   + '<table id="CT" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000"  style="cursor:pointer;">'
                   + colorTable + '</table>';
        $("#colorpanel").html(colorTable);
    }

    function showColorPanel(obj, txtobj) {
        $('#' + obj).click(function () {
            //定位
            var ttop = $(this).offset().top;     //控件的定位点高
            var thei = $(this).height();  //控件本身的高
            var tleft = $(this).offset().left;    //控件的定位点宽

            $("#colorpanel").css({
                top: ttop + thei + 5,
                left: tleft
            })

            $("#colorpanel").show();

            $("#CT tr td").unbind("click").mouseover(function () {
                var aaa = $(this).css("background-color");
                $("#DisColor").css("background-color", aaa);
                $("#HexColor").val(aaa);
            }).click(function () {
                var aaa = $(this).css("background-color");
                $('#' + txtobj).val(aaa).css("color", aaa);
                $("#colorpanel").hide();
            })

            $("#_cclose").click(function () { $("#colorpanel").hide(); }).css({ "font-size": "12px", "padding-left": "20px" })
        })
    }

    jQuery.extend({
        showcolor: function (btnid, txtid) { showColorPanel(btnid, txtid); }
    })

    完成, 效果如下图所示

      

  • 相关阅读:
    【HDOJ】2267 How Many People Can Survive
    【HDOJ】2268 How To Use The Car
    【HDOJ】2266 How Many Equations Can You Find
    【POJ】2278 DNA Sequence
    【ZOJ】3430 Detect the Virus
    【HDOJ】2896 病毒侵袭
    求奇数的乘积
    平方和与立方和
    求数列的和
    水仙花数
  • 原文地址:https://www.cnblogs.com/kezhiping/p/3030603.html
Copyright © 2011-2022 走看看