荐 前端框架Layui学习四:滑块、评分、轮播、代码修饰器、时间和日期选择器
程序员文章站
2022-07-07 20:50:10
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用。...
Layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用。
一、滑块
通过对 slider 模块的使用,你可以在页面构建出可拖动的滑动元素。
slider组件相关属性:
参数选项 | 说明 |
---|---|
elem | 绑定页面元素 |
type | 滑块类型,default(水平滑块)、vertical(垂直滑块) |
min | 滑动条最小值 |
max | 滑动条最大值 |
range | 是否启动滑块的范围拖曳 |
value | 滑块初始值 |
step | 拖动的步长 |
showstep | 是否显示间断点 |
tips | 是否显示文字提示 |
height | 滑动条高度 |
theme | 主题颜色 |
<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="slideTest3" class="demo-slider"></div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery","element","colorpicker","layer",'slider'],function() {
let $ = layui.jquery;
var element = layui.element;
var colorpicker = layui.colorpicker;
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 //开启间隔点
});
});
</script>
</body>
二、评分
rate 组件可以用来进行展示或评价。
rate 组件相关属性:
参数选项 | 说明 |
---|---|
elem | 指向容器选择器 |
value | 评分的初始值 |
text | 是否显示评分对应的内容 |
<body style="padding: 20px">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>基础效果</legend>
</fieldset>
<div id="test1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义内容</legend>
</fieldset>
<div id="test5"></div>
<div><div id="test6"></div></div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'rate'],function() {
let $ = layui.jquery;
var element = layui.element;
var colorpicker = layui.colorpicker;
var layer = layui.layer;
var slider = layui.slider;
var rate = layui.rate;
//基础效果
rate.render({
elem: '#test1'
})
//自定义文本
rate.render({
elem: '#test5'
,value: 3
,text: true
,setText: function(value){ //自定义文本的回调
var arrs = {
'1': '极差'
,'2': '差'
,'3': '中等'
,'4': '好'
,'5': '极好'
};
this.span.text(arrs[value] || ( value + "星"));
}
})
});
</script>
</body>
三、轮播
通过核心方法:carousel.render(options) 来对轮播设置基础参数,也可以通过方法:carousel.set(options) 来设定全局基础参数.
相关属性如下
可选项 | 说明 |
---|---|
elem | 指向容器选择器 |
width | 设定轮播容器宽度,支持像素和百分比 |
height | 指向容器选择器 |
full | 是否全屏轮播 |
anim | 轮播切换动画方式,default(左右切换)updown(上下切换) fade(渐隐渐显切换) |
autoplay | 是否自动切换 |
interval | 自动切换的时间间隔 |
<body style="padding: 20px">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>填充轮播元素 - 以图片为例</legend>
</fieldset>
<div class="layui-carousel" id="test10">
<div carousel-item="">
<div><img src="../static/images/1.jpg"></div>
<div><img src="../static/images/2.jpg"></div>
<div><img src="../static/images/3.jpg"></div>
<div><img src="../static/images/4.jpg"></div>
<div><img src="../static/images/5.jpg"></div>
</div>
</div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'rate','carousel'],function() {
let $ = layui.jquery;
var rate = layui.rate;
var carousel = layui.carousel;
//图片轮播
carousel.render({
elem: '#test10'
,width: '200px'
,height: '440px'
,interval: 5000
});
});
</script>
</body>
四、代码修饰器
使用方法
使用<pre class="layui-code">放代码</pre>
引入code模块
调用layui.code({属性名:属性值})
代码修饰器如下图所示:
<body style="padding: 20px">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认修饰</legend>
</fieldset>
<pre class="layui-code">
import threading
lock = threading.Lock()
num = 0
def incre(count):
global num
while count>0:
with lock:
num +=1
count -= 1
def main():
threads = []
for i in range(10):
thread = threading.Thread(target=incre,args=(1000,))
thread.start()
threads.append(thread)
for thread in threads:
thread.join()
print("expected value is ", 10 * 1000,"real value is",num)
if __name__ == '__main__':
main()
</pre>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'rate','carousel','code'],function() {
let $ = layui.jquery;
var rate = layui.rate;
var carousel = layui.carousel;
layui.code({
title:'python代码',
about:false,
skin:'notepad'
}
); //实际使用时,执行该方法
});
</script>
</body>
五、时间和日期选择器
首先需要引入layDate的cs和js模块
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/css/layui.css">
<link rel="stylesheet" href="../static/css/layer.css">
<link rel="stylesheet" href="../static/css/laydate.css">
</head>
<script src="../static/css/layui.js"></script>
</script>
</body>
相关属性:
elem:绑定元素,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象
type:空间选择类型,datetime日期时间选择器
theme:主题,default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
calendar:是否显示公历节假日
mark:标注重要的日子
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/css/layui.css">
<link rel="stylesheet" href="../static/css/layer.css">
<link rel="stylesheet" href="../static/css/laydate.css">
</head>
<body style="padding: 20px">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规用法</legend>
</fieldset>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">中文版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">国际版</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
</div>
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'form','element','laydate'],function() {
let $ = layui.jquery;
var form = layui.form;
var element = layui.element;
var laydate = layui.laydate;
laydate.render({
elem:'#test1',
type:'datetime',
calendar:'True'
});
laydate.render({
elem:'#test2',
value:new Date() //指定当前系统时间
});
});
</script>
</body>
本文地址:https://blog.csdn.net/zhengzaifeidelushang/article/details/107337582