xncolpicker颜色选择器插件

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()

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » xncolpicker颜色选择器插件

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们