Color picker
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>颜色拾取器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用</legend>
</fieldset>
<div style="margin-left: 30px;">
<div id="test1"></div>
<div id="test2" style="margin-left: 30px;"></div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>表单赋值</legend>
</fieldset>
<div style="margin-left: 30px;">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-form-input">
</div>
<div class="layui-inline" style="left: -11px;">
<div id="test-form"></div>
</div>
</div>
</form>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['element', 'jquery', 'colorpicker', 'layer'], function () {
var $ = layui.jquery;
var element = layui.element;
var colorpicker = layui.colorpicker;
var layer = layui.layer;
//常规使用
colorpicker.render({
elem: '#test1', //绑定元素
change: function (color) { //颜色改变的回调
layer.tips('选择了：' + color, this.elem, {
tips: 1
});
}
});
//初始色值
colorpicker.render({
elem: '#test2',
color: '#2ec770', //设置默认色
done: function (color) {
layer.tips('选择了：' + color, this.elem);
}
});
//表单赋值
colorpicker.render({
elem: '#test-form'
, color: '#1c97f5'
, done: function (color) {
$('#test-form-input').val(color);
}
});
});
</script>
</body>
</html>
Slider
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滑块</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<style type="text/css">
.demo-slider {
margin-top: 20px;
}
</style>
</head>
<body style="padding: 20px">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>基本滑块</legend>
</fieldset>
<div id="slideTest1" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>定义初始值</legend>
</fieldset>
<div id="slideTest2" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置最大最小值</legend>
</fieldset>
<div id="slideTest3" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置步长</legend>
</fieldset>
<div id="slideTest4" class="demo-slider"></div>
<div id="slideTest5" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置提示文本</legend>
</fieldset>
<div id="slideTest6" class="demo-slider"></div>
<div id="slideTest7" class="demo-slider"></div>
<div id="test-slider-tips1" style="position: relative; left: 30px; top: -20px;"></div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['element', 'jquery', 'layer', 'slider'], function () {
var $ = layui.jquery;
var element = layui.element;
var layer = layui.layer;
var slider = layui.slider;
//默认滑块
slider.render({
elem: '#slideTest1' //绑定元素
});
//定义初始值
slider.render({
elem: '#slideTest2'
, value: 20 //初始值
});
//设置最大最小值
slider.render({
elem: '#slideTest3'
, min: 20 //最小值
, max: 50 //最大值
});
//设置步长
slider.render({
elem: '#slideTest4'
, step: 10 //步长
});
slider.render({
elem: '#slideTest5'
, step: 10 //步长
, showstep: true //开启间隔点
});
//设置提示文本
slider.render({
elem: '#slideTest6'
, min: 20
, max: 1000
, setTips: function (value) { //自定义提示文本
return value + 'GB';
}
});
slider.render({
elem: '#slideTest7'
, tips: false //关闭默认提示层
, change: function (value) {
$('#test-slider-tips1').html('当前数值：' + value);
}
});
});
</script>
</body>
</html>
