荐前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器

程序员文章站 2022-04-01 11:21:47

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。...

Layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。

一、滑块

通过对 slider 模块的使用，你可以在页面构建出可拖动的滑动元素。
荐
前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器
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 组件可以用来进行展示或评价。
荐
前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器
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) 来设定全局基础参数.
荐
前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器
相关属性如下

可选项	说明
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({属性名：属性值})

代码修饰器如下图所示：
荐
前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器

<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>

荐
前端框架Layui学习四：滑块、评分、轮播、代码修饰器、时间和日期选择器
相关属性：
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

相关标签：大数据平台搭建前端框架Layui

上一篇： CSS深入剖析border和box-shadow（附漂亮样式）

下一篇：微信小程序换肤功能实现代码(思路详解)