欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-07 20:50:10
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