xncolorpicker实现颜色选择器效果代码-html代码-BFW代码库

xncolorpicker实现颜色选择器效果代码

代码语言：html

所属分类：选择器

代码描述：xncolorpicker实现颜色选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body{
            background: #eee;
        }
        #colorpicker{
            /*position: fixed;*/
            /*right: 0;*/
            /*margin-top: 100px;*/
            border: 1px solid #fff;
            display: inline-block;
        }
    </style>
</head>
<body>


<div>
    <p>全功能 <a id="destroy">销毁</a></p>
    <div id="colorpicker"></div>
</div>
<div>
    <p>不显示调色盘</p>
    <div id="nopallete"></div>
</div>
<div>
    <p>不显示历史</p>
    <div id="nohistory"></div>
</div>
<div>
    <p>不显示预制颜色</p>
    <div id="nopre"></div>
</div>
<div>
    <p>不可切换颜色类型</p>
    <div id="notype"></div>
</div>
</body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/xncolorpicker.min.js"></script>
<script>
    var xncolorpicker = new XNColorPicker({
        color: "linear-gradient(0.0deg,hsla(279,63%,58%,1) 0.0,hsla(198,83%,53%,1) 100.0%)",
        selector: "#colorpicker",
        showprecolor: true,//显示预制颜色
        prevcolors: null,//预制颜色，不设置则默认
        showhistorycolor: true,//显示历史
        historycolornum: 16,//历史条数
        format: 'hsla',//rgba hex hsla,初始颜色类型
        showPalette:true,//显示色盘
        show:false, //初始化显示
        lang:'cn',// cn 、en
        colorTypeOption:'single,linear-gradient,radial-gradient',
        canMove:false,//选择器位置是否可以拖拽
        alwaysShow:false,
        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)
        }
    })
    var nopallete = new XNColorPicker({
        color: "#008867",
        selector: "#nopallete",
        showprecolor: true,//显示预制颜色
        prevcolors: null,//预制颜色，不设置则默认
        showhistorycolor: true,//显示历史
        historycolornum: 16,//历史条数
        format: 'hsla',//rgba hex hsla,初始颜色类型
        showPalette:false,//显示色盘
        show:false, //初始化显示
        lang:'cn',// cn 、en
        colorTypeOption:'single,linear-gradient,radial-gradient',//
        onError: function (e) {

        },
        onCancel:function(color){
            console.log("cancel",color)
        },
        onChange:function(color){
            console.log("change",color)
        },
        onConfirm:function(color){
            console.log("confirm",color)
        }
    })
    var nohistory = new XNColorP.........完整代码请登录后点击上方下载按钮下载查看