jQuery MiniColors - 轻量级的颜色选择器插件
<!DOCTYPE html>
<html>
<head>
<title>jQuery MiniColors 颜色选择器示例</title>
<link rel="stylesheet" href="jquery.minicolors.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.minicolors.min.js"></script>
<style>
.minicolors-theme-default .minicolors-grid {
border-radius: 5px;
}
</style>
</head>
<body>
<input type="text" id="colorpicker" value="#ffb347" data-control="hue" />
<script>
$(document).ready(function(){
$('#colorpicker').minicolors({
theme: 'default',
position: 'bottom right',
change: function(value) {
// 颜色改变时的回调函数
console.log("新颜色值: ", value);
}
});
});
</script>
</body>
</html>这个示例展示了如何在一个HTML页面中引入jQuery MiniColors颜色选择器插件，并初始化一个颜色选择器实例。当颜色改变时，它会在控制台打印出新的颜色值。这个示例还演示了如何通过CSS覆盖默认主题的样式。
评论已关闭