代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="fcolorpicker.css">-->
<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 src="./dist/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 XNColorPicker({
color: "#ca9999",
selector: "#nohistory",
showprecolor: true,//显示预制颜色
prevcolors: null,//预制颜色，不设置则默认
showhistorycolor: false,//显示历史
historycolornum: 16,//历史条数
format: 'hsla',//rgba hex hsla,初始颜色类型
showPalette:true,//显示色盘
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 nopre = new XNColorPicker({
color: "#ff0987",
selector: "#nopre",
showprecolor: false,//显示预制颜色
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',//
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 notype = new XNColorPicker({
color: "#f21fff",
selector: "#notype",
showprecolor: true,//显示预制颜色
prevcolors: null,//预制颜色，不设置则默认
showhistorycolor: true,//显示历史
historycolornum: 16,//历史条数
format: 'hsla',//rgba hex hsla,初始颜色类型
showPalette:true,//显示色盘
show:false, //初始化显示
lang:'cn',// cn 、en
colorTypeOption:'single',//
onError: function (e) {
},
onCancel:function(color){
console.log("cancel",color)
},
onChange:function(color){
console.log("change",color)
},
onConfirm:function(color){
console.log("confirm",color)
}
})
document.querySelector("#destroy").onclick=function(){xncolorpicker.destroy();}
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手