layui框架实战案例(13)：colorpicker颜色选择器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Colorpicker 示例</title>
<link rel="stylesheet" href="path/to/layui/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">选择颜色</label>
<div class="layui-input-block">
<input type="text" name="color" id="colorPicker" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
</div>
</div>
</form>
<script src="path/to/layui/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'colorpicker'], function(){
var form = layui.form
,colorpicker = layui.colorpicker;
// 创建颜色选择器
colorpicker.render({
elem: '#colorPicker' // 绑定元素
,done: function(color){
// 选择颜色完成后的回调
console.log(color); // 输出选择的颜色
}
});
// 提交事件监听
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false; // 阻止表单提交
});
});
</script>
</body>
</html>这个代码实例展示了如何在Layui框架中使用颜色选择器组件。首先，我们引入了Layui的CSS和JavaScript资源。然后，我们使用layui.use来确保Layui的组件和JavaScript库已经加载完成。在这个例子中，我们使用了colorpicker模块来创建颜色选择器，并且绑定到了页面上的一个输入框。我们还展示了如何使用form模块来监听表单的提交事件，并且在提交时阻止默认行为。
评论已关闭