xncolpicker颜色选择器插件

插件描述

漂亮的颜色选择器，支持渐变色模式，rgba hex hsla 三种色彩格式，支持历史颜色，预制颜色，支持自定义输入，只依赖 jquery，colPicker。

使用步骤

下载代码

将 src 目录放置您的项目中

引用 js 文件，例如：

<script src="./dist/xncolorpicker.min.js"></script>

初始化选择器

var xncolorpicker = new XNColorPicker({
    color: "#ff0000", 
    selector: "#colorpicker",
    onError: function (e) {
    },
    onCancel:function(color){
        console.log("cancel",color)
    },
    onChange:function(color){
        console.log("change",color)
    },
    onConfirm:function(color){
        console.log("confirm",color)
    }
})

选择器配置项

{
    color:'#ffffff',//初始颜色
    selector: "",//选择器容器
    showprecolor: true,//显示预制颜色
    prevcolors: null,//预制颜色,不填为默认
    showhistorycolor: true,//显示历史
    historycolornum: 16,//历史条数
    format: 'rgba',//rgba hex hsla,初始颜色类型
    showPalette: true,//显示色盘
    show: false, //初始化显示
    lang: 'cn',// 中英文 cn en
    colorTypeOption:'single,linear-gradient,radial-gradient',//颜色选择器可选类型，纯色，线性渐变，径向渐变
    canMove:true,//默认为 true
    autoConfirm:true,//改变颜色时自动确认
    onError: function (e) {  
    },
    onCancel:function(color){
        console.log("cancel",color)
    },
    onChange:function(color){
        console.log("change",color)
    },
    onConfirm:function(color){
        console.log("confirm",color)
    }
}

方法

• 销毁实例 xncolorpicker.destroy()
• 清空历史颜色 xncolorpicker.clearHistoryColors()

以上关于xncolpicker颜色选择器插件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。