Home » Code » jquery颜色选择器colpick-jQuery-Color-Picker

jquery颜色选择器colpick-jQuery-Color-Picker

分享一款jquery颜色选择插件,名字叫colpick-jQuery-Color-Picker。纯js和css实现,无需图片,支持IE7或以上浏览器,需要jquery1.7或以上版本支持。官网:http://colpick.com/plugin

首先引入必须的三个文件,jquery、js和css文件:

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="colpick.js"></script>
<link rel="stylesheet" type="text/css" href="colpick.css">

最基本的使用,全部使用默认设置:

html代码:<input type='text' id='picker'>
jquery代码:$("#picker").colpick();//需要要页面加载完后调用

这样,当然我们点击input输入框时,就会出现如下的选择页面:

colpick-jQuery-Color-Picker颜色选择器

默认设置

这样子调用,只是能出现个样子,选择了颜色点击OK并不能把颜色值显示到input框内,不知道作者是怎么想的。一般的默认设置应该都能达到某个实际应用效果才对。所以这里我们得手动设置一些参数,参数众多,有兴趣可以点开官网查看,这里只罗列几个经常用到的。看下面的例子:

<script type="text/javascript">
    $("#picker").colpick({
        layout:'hex',
                    //布局样式,'full'(RGB, HEX, and HSB fields),'rgbhex' (no HSB fields) and hex(no HSB, no rgb)
                    //三种,默认为full,一般使用hex即可。
        submit:false,
                    //是否显示OK提交按钮,如果为true显示选择器上显示实时值的框会分半,一半显示下边color属性旧颜色,
                    // 一半显示实时新颜色。
        colorScheme:'light',
                    //配色方案,有light和dark可选,dark有点黑不太合适。默认为light。
        color:'0066CC',
                    //默认显示颜色,程序有自己默认的值,官网说法是11ff00。前面的#可写可不写。
        showEvent:'focus',
                    //触发事件,默认为click。
        onChange:function(hsb,hex,rgb,el,bySetColor) {
                    //颜色改变时触发的函数,前面三个是改变着的颜色的实时值。el为调用colpick函数的DOM对象,
                    // 比如默认例子中的input框。最后一个,如果为true表示onChange回调函数是通过colpickSetColor函数
                    // (看下边的keyup事件)触发的,而不是由用户直接操作选择器改变颜色值触发。
            if(!bySetColor) $(el).val(hex);
                    //不是colpickSetColor函数触发的,则为用户通过选择器改变颜色触发的,实时显示到input框。想把实时
                    // 值显示到其他地方,找到相应节点即可。
        }
    }).keyup(function(){
        $(this).colpickSetColor(this.value);
                    //colpickSetColor是插件为jquery扩充的函数,可用来设置选择器的颜色,就是手动更改颜色值时下边的
                    // 选择器的颜色值跟着变
    })
</script>

以上例子的效果如下,个人觉得已经能满足一些基本需求。在其他地方点击选择器会消失。

colpick-jQuery-Color-Picker颜色选择器

例子效果

这么个小例子就不写demo了,有需求的自己到官网看吧。其实这类颜色选择器插件有很多,不少功能比这个功能要强大。个人选择它是因为简单好上手而且功能足够,没有最好的只有最合适的。其他同类推荐可以参考这篇文章

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.