颜色选择器||滑块
顏色選擇器
<%@ 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>滑塊
?
<%@ 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>?
總結
