改造过的JS颜色选择器

项目中用到颜色选择功能，在网上找了个颜色选择器，自己改了改代码。做成了一个可动态加载的颜色选择器。

把代码贴上，当是记录。

/*Copyright(c)2009,www.supersite.me*/

var imageUrl = '../Images/color.png';

function iColorShow(id, id2) {

    var eICP = getElementPos(id2); //这里加了一个修改高度的方法

      //id表示前面文本框的id，id2则是颜色图标的id    //var eICP = jQuery("#" + id2).position();

    jQuery("#iColorPicker").css({

        'top': eICP.y + (jQuery("#" + id).outerHeight()) + "px",

        'left': (eICP.x) + "px",

        'position': 'absolute'

    }).fadeIn("fast");

    jQuery("#iColorPickerBg").css({

        'position': 'fixed',

        'top': 0,

        'left': 0,

        'width': '100%',

        'height': '100%'

    }).fadeIn("fast");

    var def = jQuery("#" + id).val();

    jQuery('#colorPreview span').text(def);

    jQuery('#colorPreview').css('background', def);

    jQuery('#color').val(def);

    var hxs = jQuery('#iColorPicker');

    for (i = 0; i < hxs.length; i++) {

        var tbl = document.getElementById('hexSection' + i);

        var tblChilds = tbl.childNodes;

        for (j = 0; j < tblChilds.length; j++) {

            var tblCells = tblChilds[j].childNodes;

            for (k = 0; k < tblCells.length; k++) {

                jQuery(tblChilds[j].childNodes[k]).unbind().mouseover(function (a) {

                    var aaa = "#" + jQuery(this).attr('hx');

                    jQuery('#colorPreview').css('background', aaa);

                    jQuery('#colorPreview span').text(aaa)

                }).click(function () {

                    var aaa = "#" + jQuery(this).attr('hx');

                    jQuery("#" + id).val(aaa).css("background", aaa); // 修改这里

                        //这里是单击颜色时执行的事件

                    var _span = "<div class='color' style='width:12px; height:12px; float:left; cursor:pointer; margin:2px; background:" + aaa + "' onclick=deleteColor(this) title='delete color'></div>";

                    jQuery("#" + id).after(_span);

                    jQuery("#iColorPickerBg").hide();

                    jQuery("#iColorPicker").fadeOut();

                    jQuery(this)

                })

            }

        }

    }

}

this.iColorPicker = function () {

    jQuery("input.iColorPicker").each(function (i) {

        if (i == 0) {

            jQuery(document.createElement("div")).attr("id", "iColorPicker").css('display', 'none').html('<table class="pickerTable" id="pickerTable0"><thead id="hexSection0"><tr><td style="background:#f00;" hx="f00"></td><td style="background:#ff0" hx="ff0"></td><td style="background:#0f0" hx="0f0"></td><td style="background:#0ff" hx="0ff"></td><td style="background:#00f" hx="00f"></td><td style="background:#f0f" hx="f0f"></td><td style="background:#fff" hx="fff"></td><td style="background:#ebebeb" hx="ebebeb"></td><td style="background:#e1e1e1" hx="e1e1e1"></td><td style="background:#d7d7d7" hx="d7d7d7"></td><td style="background:#cccccc" hx="cccccc"></td><td style="background:#c2c2c2" hx="c2c2c2"></td><td style="background:#b7b7b7" hx="b7b7b7"></td><td style="background:#acacac" hx="acacac"></td><td style="background:#a0a0a0" hx="a0a0a0"></td><td style="background:#959595" hx="959595"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#898989" hx="898989"></td><td style="background:#7d7d7d" hx="7d7d7d"></td><td style="background:#707070" hx="707070"></td><td style="background:#626262" hx="626262"></td><td style="background:#555" hx="555"></td><td style="background:#464646" hx="464646"></td><td style="background:#363636" hx="363636"></td><td style="background:#262626" hx="262626"></td><td style="background:#111" hx="111"></td><td style="background:#000" hx="000"></td></tr><tr><td style="background:#f7977a" hx="f7977a"></td><td style="background:#fbad82" hx="fbad82"></td><td style="background:#fdc68c" hx="fdc68c"></td><td style="background:#fff799" hx="fff799"></td><td style="background:#c6df9c" hx="c6df9c"></td><td style="background:#a4d49d" hx="a4d49d"></td><td style="background:#81ca9d" hx="81ca9d"></td><td style="background:#7bcdc9" hx="7bcdc9"></td><td style="background:#6ccff7" hx="6ccff7"></td><td style="background:#7ca6d8" hx="7ca6d8"></td><td style="background:#8293ca" hx="8293ca"></td><td style="background:#8881be" hx="8881be"></td><td style="background:#a286bd" hx="a286bd"></td><td style="background:#bc8cbf" hx="bc8cbf"></td><td style="background:#f49bc1" hx="f49bc1"></td><td style="background:#f5999d" hx="f5999d"></td></tr><tr><td style="background:#f16c4d" hx="f16c4d"></td><td style="background:#f68e54" hx="f68e54"></td><td style="background:#fbaf5a" hx="fbaf5a"></td><td style="background:#fff467" hx="fff467"></td><td style="background:#acd372" hx="acd372"></td><td style="background:#7dc473" hx="7dc473"></td><td style="background:#39b778" hx="39b778"></td><td style="background:#16bcb4" hx="16bcb4"></td><td style="background:#00bff3" hx="00bff3"></td><td style="background:#438ccb" hx="438ccb"></td><td style="background:#5573b7" hx="5573b7"></td><td style="background:#5e5ca7" hx="5e5ca7"></td><td style="background:#855fa8" hx="855fa8"></td><td style="background:#a763a9" hx="a763a9"></td><td style="background:#ef6ea8" hx="ef6ea8"></td><td style="background:#f16d7e" hx="f16d7e"></td></tr><tr><td style="background:#ee1d24" hx="ee1d24"></td><td style="background:#f16522" hx="f16522"></td><td style="background:#f7941d" hx="f7941d"></td><td style="background:#fff100" hx="fff100"></td><td style="background:#8fc63d" hx="8fc63d"></td><td style="background:#37b44a" hx="37b44a"></td><td style="background:#00a650" hx="00a650"></td><td style="background:#00a99e" hx="00a99e"></td><td style="background:#00aeef" hx="00aeef"></td><td style="background:#0072bc" hx="0072bc"></td><td style="background:#0054a5" hx="0054a5"></td><td style="background:#2f3192" hx="2f3192"></td><td style="background:#652c91" hx="652c91"></td><td style="background:#91278f" hx="91278f"></td><td style="background:#ed008c" hx="ed008c"></td><td style="background:#ee105a" hx="ee105a"></td></tr><tr><td style="background:#9d0a0f" hx="9d0a0f"></td><td style="background:#a1410d" hx="a1410d"></td><td style="background:#a36209" hx="a36209"></td><td style="background:#aba000" hx="aba000"></td><td style="background:#588528" hx="588528"></td><td style="background:#197b30" hx="197b30"></td><td style="background:#007236" hx="007236"></td><td style="background:#00736a" hx="00736a"></td><td style="background:#0076a4" hx="0076a4"></td><td style="background:#004a80" hx="004a80"></td><td style="background:#003370" hx="003370"></td><td style="background:#1d1363" hx="1d1363"></td><td style="background:#450e61" hx="450e61"></td><td style="background:#62055f" hx="62055f"></td><td style="background:#9e005c" hx="9e005c"></td><td style="background:#9d0039" hx="9d0039"></td></tr><tr><td style="background:#790000" hx="790000"></td><td style="background:#7b3000" hx="7b3000"></td><td style="background:#7c4900" hx="7c4900"></td><td style="background:#827a00" hx="827a00"></td><td style="background:#3e6617" hx="3e6617"></td><td style="background:#045f20" hx="045f20"></td><td style="background:#005824" hx="005824"></td><td style="background:#005951" hx="005951"></td><td style="background:#005b7e" hx="005b7e"></td><td style="background:#003562" hx="003562"></td><td style="background:#002056" hx="002056"></td><td style="background:#0c004b" hx="0c004b"></td><td style="background:#30004a" hx="30004a"></td><td style="background:#4b0048" hx="4b0048"></td><td style="background:#7a0045" hx="7a0045"></td><td style="background:#7a0026" hx="7a0026"></td></tr></thead><tbody><tr><td style="border:1px solid #000;background:#fff;cursor:pointer;height:60px;-moz-background-clip:-moz-initial;-moz-background-origin:-moz-initial;-moz-background-inline-policy:-moz-initial;" colspan="16" align="center" id="colorPreview"><span style="color:#000;border:1px solid rgb(0, 0, 0);padding:5px;background-color:#fff;font:11px Arial, Helvetica, sans-serif;"></span></td></tr></tbody></table><style>#iColorPicker input{margin:2px}</style>').appendTo("body");

            jQuery(document.createElement("div")).attr("id", "iColorPickerBg").click(function () {

                jQuery("#iColorPickerBg").hide();

                jQuery("#iColorPicker").fadeOut()

            }).appendTo("body");

            jQuery('table.pickerTable td').css({

                'width': '12px',

                'height': '14px',

                'border': '1px solid #000',

                'cursor': 'pointer'

            });

            jQuery('#iColorPicker table.pickerTable').css({

                'border-collapse': 'collapse'

            });

            jQuery('#iColorPicker').css({

                'border': '1px solid #ccc',

                'background': '#333',

                'padding': '5px',

                'color': '#fff',

                'z-index': 9999

            })

        }

        jQuery('#colorPreview').css({

            'height': '50px'

        });

       // jQuery(this).css("backgroundColor", jQuery(this).val()).after('<a href="javascript:void(null)" id="icp_' + this.id + '" onclick="iColorShow(\'' + this.id + '\',\'icp_' + this.id + '\')"><img src="' + imageUrl + '" style="border:0;margin:0 0 0 3px" align="absmiddle" ></a>')

    })

};

jQuery(function () {

    iColorPicker()

})

function deleteColor(obj) {

    jQuery(obj).remove();

}

function getElementPos(elementId) {

    var ua = navigator.userAgent.toLowerCase();

    var isOpera = (ua.indexOf('opera') != -1);

    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

    var el = document.getElementById(elementId);

    if (el.parentNode === null || el.style.display == 'none') {

        return false;

    }

    var parent = null;

    var pos = [];

    var box;

    if (el.getBoundingClientRect)    //IE

    {

        box = el.getBoundingClientRect();

        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

        return { x: box.left + scrollLeft, y: box.top + scrollTop };

    }

    else if (document.getBoxObjectFor)    // gecko

    {

        box = document.getBoxObjectFor(el);

        var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;

        var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;

        pos = [box.x - borderLeft, box.y - borderTop];

    }

    else    // safari & opera

    {

        pos = [el.offsetLeft, el.offsetTop];

        parent = el.offsetParent;

        if (parent != el) {

            while (parent) {

                pos[0] += parent.offsetLeft;

                pos[1] += parent.offsetTop;

                parent = parent.offsetParent;

            }

        }

        if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) {

            pos[0] -= document.body.offsetLeft;

            pos[1] -= document.body.offsetTop;

        }

    }

    if (el.parentNode) {

        parent = el.parentNode;

    }

    else {

        parent = null;

    }

    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors

        pos[0] -= parent.scrollLeft;

        pos[1] -= parent.scrollTop;

        if (parent.parentNode) {

            parent = parent.parentNode;

        }

        else {

            parent = null;

        }

    }

    return { x: pos[0], y: pos[1] };

}

前端使用方法

改造过的JS颜色选择器的更多相关文章

js颜色选择器制作分析
给html元素设置事件监听, 触发事件弹出颜色选择器颜色选择器绘制获取上次选择的颜色(当前颜色) 绘制渐变色板(canvas) (方法: 横轴渐变ff0000, ffff00, 00ff00, ...
HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
js 颜色选择插件
COLPICK是一款非常的轻小,无需图片就可以实现颜色选择器的jquery插件,只用 JS 和 CSS 就实现了全部功能,而且非常直观,类似Photoshop的界面,使用方便.颜色的明暗很容易自定义, ...
插件使用一颜色选择器---cxColor
cxColor 是一款颜色选择器.这样的插件使用场景不多.可喜的这是国人写的. 官方网站: https://github.com/ciaoca/cxColor 使用方法: 1.引入jquery库 1 ...
【canvas系列】用canvas实现一个colorpicker（类似PS的颜色选择器）
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
c#/asp.net实现炫酷仿调色板/颜色选择器功能
asp.net 之颜色选择器,仿调色板功能 1. 插件非常容易使用,只需引用相应的js文件和css样式文件即可,见代码示例,插件精小,炫酷 2. 只需要初始化即可使用,并且选择的颜色会在文本框中以16 ...
11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
js颜色拾取器
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
UWP 颜色选择器(ColorPicker) 和自定义的Flyout(AdvancedFlyout)
ColorPicker 故事背景项目里面需要一个像Winfrom里面那样的颜色选择器,如下图所示: 在网上看了一下.没有现成的东东可以拿来使用.大概查看了一下关于颜色的一些知识,想着没人种树,那就由 ...

随机推荐

iOS 之 Cocoapods安装
进入正题前,先来点前奏:了解cocoapods是某天看一个博客,那时才明白原来写项目不用一个个将三方库拷进项目里啊,惊讶的我是一塌糊涂的啊...(原谅我那时还没进入过正规的IT公司....好多你们自然 ...
北京电子科技学院（BESTI）实验报告3
北京电子科技学院(BESTI)实验报告3 课程: 信息安全系统设计基础班级:1452.1453 姓名:(按贡献大小排名)周恩德 .郑凯杰学号:(按贡献大小排名)20145217 .201453 指 ...
iOS 单例模式范例
The singleton pattern is useful for creating objects that are shared across the entire application, ...
R实现灰色预测
1.简介预测就是借助于对过去的探讨去推测.了解未来.灰色预测通过原始数据的处理和灰色模型的建立,发现.掌握系统发展规律,对系统的未来状态做出科学的定量预测.对于一个具体的问题,究竟选择什么样的预测模 ...
HDU 3038 How Many Answers Are Wrong(种类并查集)
题目链接食物链类似的题,主要是在于转化,a-b的和为s,转换为b比a-1大s.然后并查集存此节点到根的差. 假如x的根为a,y的根为b: b - y = rank[y] a - x = rank[ ...
linux install Theano+Tensorflow+Keras
安装过程中,网络状态一定要好,如果安装过程中出现time out的提示信息,今天就可以洗洗睡啦,等明天网络状态好的时候再安装. 安装过程出现不知名的错误的时候,执行第一步,update一下 1.#up ...
<二>JDBC_通过ResultSet执行查询操作
一.ResultSet: 结果集. 封装了使用 JDBC 进行查询的结果. 1. 调用 Statement 对象的 executeQuery(sql) 可以得到结果集. 2. ResultSet 返 ...
团队作业week9 scenario testing
1.How do you expect different personas to use your software? What’s their need and their goals, how ...
delphi URL 编码的转换
先介绍一下,Delphi中处理Google的URL编码解码,其中就会明白URL编码转换的方法的从delphi的角度看Google(谷歌)URL编码解码方式在网上搜索了一下,似乎没有什么关于goog ...
解决导入so库报错小结
最近公司准备将重构后的项目上线,可是等到我接手的时候发现一个很纠结的问题:安卓5.0以上的手机(例如我现在在用的红米note3)运行重构后项目发生报错,提示缺少某so库. 而5.0以下的手机(我的小米 ...

改造过的JS颜色选择器

改造过的JS颜色选择器的更多相关文章

随机推荐

热门专题