文档章节

colorpicker插件和使用(直接能用真美好)

leona_lily
 leona_lily
发布于 2015/04/10 16:23
字数 1072
阅读 60
收藏 1
点赞 0
评论 0

这是jquery.colorpicker.js

/**
 * jQuery插件:颜色拾取器
 *
 * @author  Karson
 * @url     http://blog.iplaybus.com
 * @name    jquery.colorpicker.js
 * @since   2012-6-4 15:58:41
 */
(function($) {
    var ColorHex=new Array('00','33','66','99','CC','FF');
    var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
    $.fn.colorpicker = function(options) {
        var opts = jQuery.extend({}, jQuery.fn.colorpicker.defaults, options);
        initColor();
        return this.each(function(){
            var obj = $(this);
            obj.bind(opts.event,function(){
                //定位
                var ttop  = $(this).offset().top;     //控件的定位点高
                var thei  = $(this).height();  //控件本身的高
                var tleft = $(this).offset().left;    //控件的定位点宽
                $("#colorpanel").css({
                    top:ttop+thei+5,
                    left:tleft
                }).show();
                var target = opts.target ? $(opts.target) : obj;
                if(target.data("color") == null){
                    target.data("color",target.css("color"));
                }
                if(target.data("value") == null){
                    target.data("value",target.val());
                }
          
                $("#_creset").bind("click",function(){
                    target.css("color", target.data("color")).val(target.data("value"));
                    $("#colorpanel").hide();
                    opts.reset(obj);
                });
          
                $("#CT tr td").unbind("click").mouseover(function(){
                    var color=$(this).css("background-color");
                    $("#DisColor").css("background",color);
                    $("#HexColor").val($(this).attr("rel"));
                }).click(function(){
                    var color=$(this).attr("rel");
                    color = opts.ishex ? color : getRGBColor(color);
                    if(opts.fillcolor) target.val(color);
                    target.css("color",color);
                    $("#colorpanel").hide();
                    $("#_creset").unbind("click");
                    opts.success(obj,color);
                });
          
            });
        });
    
        function initColor(){
            $("body").append('<div id="colorpanel" style="position: absolute; display: none;"></div>');
            var colorTable = '';
            var colorValue = '';
            for(i=0;i<2;i++){
                for(j=0;j<6;j++){
                    colorTable=colorTable+'<tr height=12>'
                    colorTable=colorTable+'<td width=11 rel="#000000" style="background-color:#000000">'
                    colorValue = i==0 ? ColorHex[j]+ColorHex[j]+ColorHex[j] : SpColorHex[j];
                    colorTable=colorTable+'<td width=11 rel="#'+colorValue+'" style="background-color:#'+colorValue+'">'
                    colorTable=colorTable+'<td width=11 rel="#000000" style="background-color:#000000">'
                    for (k=0;k<3;k++){
                        for (l=0;l<6;l++){
                            colorValue = ColorHex[k+i*3]+ColorHex[l]+ColorHex[j];
                            colorTable=colorTable+'<td width=11 rel="#'+colorValue+'" style="background-color:#'+colorValue+'">'
                        }
                    }
                }
            }
            colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000;">'
            +'<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="javascript:void(0);" id="_cclose">关闭</a> | <a href="javascript:void(0);" id="_creset">清除</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);
            $("#_cclose").live('click',function(){
                $("#colorpanel").hide();
                return false;
            }).css({
                "font-size":"12px",
                "padding-left":"20px"
            });
        }
        
        function getRGBColor(color) {
            var result;
            if ( color && color.constructor == Array && color.length == 3 )
                color = color;
            if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                color = [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
            if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                color =[parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
            if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                color =[parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
            if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                color =[parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
            return "rgb("+color[0]+","+color[1]+","+color[2]+")";
        }
    };
    jQuery.fn.colorpicker.defaults = {
        ishex : true, //是否使用16进制颜色值
        fillcolor:false,  //是否将颜色值填充至对象的val中
        target: null, //目标对象
        event: 'click', //颜色框显示的事件
        success:function(){}, //回调函数
        reset:function(){}
    };
})(jQuery);
这是demo.html用来测试的

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>ColorPicker颜色选择器演示程序</title>
        <style>
            body,blockquote {margin:0;padding:0;font-size:12px;font-family:"微软雅黑",Verdana,Arial}
            #container {width:900px;margin:0 auto;}
            #image {margin-bottom:10px;}
            blockquote {margin:10px 0;padding:0;}
            .act1 {width:50px;}
          pre {margin:0;padding:0;border:1px solid #ccc;margin-top:10px;padding-left:5px;}
        </style>
    </head>
    <body>
        <div id="container">
        <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.colorpicker.js"></script>
    <h2>ColorPicker颜色选择器演示 <a href="http://blog.iplaybus.com/colorpicker.html">下载该插件</a> | <a href="http://blog.iplaybus.com/colorpicker.html">错误报告</a></h2>
    <blockquote>
        <font color="blue">默认:</font><br />
        请输入颜色值:<input type="text" id="cp1" />
        <pre>
$("#cp1").colorpicker({
    fillcolor:true
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">文字着色:</font><br />
        请输入颜色值:<input type="text" id="cp2" />
        <pre>
$("#cp2").colorpicker({
    fillcolor:true,
    success:function(o,color){
        $(o).css("color",color);
    }
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">外部点击触发:</font><br />
        请输入颜色值:<input type="text" id="cp3text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp3" style="cursor:pointer"/>
        <pre>
$("#cp3").colorpicker({
    fillcolor:true,
    success:function(o,color){
        $("#cp3text").css("color",color);
    }
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">外部鼠标Mouseover触发:</font><br />
        请输入颜色值:<input type="text" id="cp4text" value="这里是测试的文字"/><img src="colorpicker.png" id="cp4" style="cursor:pointer"/>
        <pre>
$("#cp4").colorpicker({
    fillcolor:true,
    event:'mouseover',
    success:function(o,color){
        $("#cp4text").css("color",color);
    }
});</pre>
    </blockquote>
    <blockquote>
        <font color="blue">填充其它对象:</font><br />
        请输入颜色值:<input type="text" id="cp5text" value=""/><img src="colorpicker.png" id="cp5" style="cursor:pointer"/>
        <pre>
$("#cp5").colorpicker({
    fillcolor:true,
    event:'mouseover',
    target:$("#cp5text")
});</pre>
    </blockquote>
</div>
<script type="text/javascript">
    $(function(){
        $("#cp1").colorpicker({
            fillcolor:true
        });
        $("#cp2").colorpicker({
            fillcolor:true,
            success:function(o,color){
                $(o).css("color",color);
            }
        });
        $("#cp3").colorpicker({
            fillcolor:true,
            success:function(o,color){
                $("#cp3text").css("color",color);
            }
        });
        $("#cp4").colorpicker({
            fillcolor:true,
            event:'mouseover',
            success:function(o,color){
                $("#cp4text").css("color",color);
            }
        });
        $("#cp5").colorpicker({
            fillcolor:true,
            event:'mouseover',
            target:$("#cp5text")
        });
    });
</script>
            </div>
<span style="display:none;"><script src="http://s84.cnzz.com/stat.php?id=3501297&web_id=3501297" language="JavaScript" charset="utf-8"></script></span>
        </div>
    </body>
</html>



© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 91
码字总数 37848
作品 0
朝阳
程序员
Sublime 安装的ColorPicker快捷键打不开

下载的地址 解压后,拷贝到如下目录 但是我下载后,发现ctrl+shift+c 没有跳出来, 打开,发现没有colorpicker这个命令 将跳出这个插件的命令添加进去 { "keys": ["ctrl+shift+c"], "command...

shuilan0066 ⋅ 04/06 ⋅ 0

8款实用Sublime text 3插件推荐

Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述。界面整洁美观、文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记。Sublime Text还支持Mac、Windows和Linux各大平...

slagga ⋅ 04/16 ⋅ 0

Element 2.3.7 发布,基于 Vue 2.0 的桌面端组件库

基于 Vue 2.0 的桌面端组件库 Element 2.3.7 发布,此次更新修复了几处 bug: 修复 Table 在由于筛选而使原有的滚动条消失后表头各列宽度未及时更新的问题,#10834 修复可清空的 Input 在初始...

雨田桑 ⋅ 04/30 ⋅ 0

全栈开发必备的10款Sublime Text 插件

全栈开发必备的10款Sublime Text 插件 来源:梦想天空博客园 时间:2014-11-28 10:16:28 阅读数:218406 分享到:6 [导读] Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多...

thinkyoung ⋅ 2015/11/05 ⋅ 0

设计一个基于svg的涂鸦组件(一)

基于svg写了一个涂鸦组件,说项目之前先附上几张效果图: 项目地址:https://github.com/linmingdao/SVGraffiti 效果预览: 功能演示: 由于篇幅问题,本文先总体介绍一下项目的大概情况,重...

林明道 ⋅ 05/15 ⋅ 0

Activiti 跟踪流程执行情况用红色框在流程图上标识路线跟节点

/** * @Author 葛明 * @Note 读取流程资源 * @Date 2017-1-3 15:11 * @param processDefinitionId 流程定义ID * @param resourceName 资源名称 */@RequestMapping(value = "/read-resource"......

m0_37222746 ⋅ 2017/01/06 ⋅ 0

开发者最常用的 8 款 Sublime text 3 插件

Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述。界面整洁美观、文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记。Sublime Text还支持Mac、Windows和Linux各大平...

wojiu9712 ⋅ 2016/02/25 ⋅ 5

11款JavaScript颜色拾取插件推荐

本文收集了11个JavaScript颜色拾取插件,希望你会喜欢。 1. ExColor ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器。...

红薯 ⋅ 2011/12/07 ⋅ 0

全栈开发必备的10款 Sublime Text 插件

Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等。Sublime Text 更妙的是它的可扩展性。所以,这里挑选了全栈开发必备的10款 Sublime Text 插件,让本已...

殊麒 ⋅ 2014/11/23 ⋅ 1

jQuery 颜色选择插件--evol.colorpicker

evol.colorpicker 是 web 颜色选择器,类似微软 Office 2010 上的颜色选择功能。evol.colorpicker 可以在线使用,或者绑定在文本框里面弹出使用。evol.colorpicker 是 jQuery UI 部件,支持各...

叶秀兰 ⋅ 2014/10/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部