博客列表 >layui框架表单开关弹出询问框

layui框架表单开关弹出询问框

清雨的博客
清雨的博客原创
2020年06月02日 10:29:381322浏览

layui 框架表单提交开关询问框

index页面

首页没有任何重点,主要是引用layui框架css以及js,其中采用layui的手风琴样式来实现左侧菜单,

左侧菜单注意问题

  1. 在div中加入 lay-accordion用于实现点击对应的折叠面板,将关闭其他的折叠面板;

  2.  加入layui-show将为实现默认打开,去除打开为折叠;其中如果在折叠面板的父级DIV加入lay-accordion,相同会实现,点击对应的面板,将关闭其他面板;

  3. 折叠样式在layui中,采用js加载方式,并且使用element 按需加载;

内容区域:

内容区域主要采用iframe 其注意内容

  1. iframe 用于载入页面,其可以设置,去除边框;去除右侧滚动条及下方滚动条:分别为:

    1. frameborder=0 为无边框1位有边框;

    2. scrolling : 滚动条,其中参数有 auto(需要时出现滚动条)yes(始终显示滚动条)no(始终隐藏滚动条)


  2. iframe 在设置时尽量使用宽度以及高度 100%;控制其大小在父级div中控制宽度及高度;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<!--头部-->
<div style="height: 50px;line-height: 50px;background-color: #0C0C0C;padding: 0 10px">
    <div style="color: #fff;float: left">
        <span>layuiAdmin</span>
    </div>
    <div style="color: #fff;float: right">
        <span style="margin-right: 10px"><i class="layui-icon layui-icon-username" style="margin-right: 5px"></i>admin</span>
        <span><a style="color: #fff" href="">退出</a></span>
    </div>
</div>
<!--头部结束-->
<!--右侧菜单-->
<div style="width: 10%;float: left">
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">用户管理</h2>
            <div class="layui-colla-content">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">管理员管理</h2>
            <div class="layui-colla-content">内容区域</div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">分类管理</h2>
            <div class="layui-colla-content">内容区域</div>
        </div>
    </div>
</div>
<!--右侧菜单结束-->
<!--左侧内容区域-->
<div style="width: 90%;height: 820px;float: left">
    <iframe style="width: 100%;height: 100%" src="cont.html" frameborder="0"></iframe>
</div>
<!--左侧内容区域结束-->

<script>
    //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>

cont页面,终点在于开关,判断是否为开启或则为禁用状态,并且弹出询问框;

开关采用checkbox来实现其中调用layui定义好的lay-skin="switch" 其中在js部分实现监听switch来实现判断是否为true或false

  1. 监听switch 判断是否为true或false

  2. if判断如果为true将弹出询问框 是否启用,取消将返回不变,点击启用将设置为false;

  3. 如果为false将弹出询问框 是否禁用,取消将返回不变,点击禁用将设置为true;

select 做了关联互动,其采用js select 监听,主要监听value值,在后期做后端后,通过监听获取value,json发送后台查询并且反馈前端显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">用户注册</div>
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="username">
                </div>
                <div class="layui-form-mid layui-word-aux">作为用户唯一登录名</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input type="password" class="layui-input" name="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <select name="province" lay-filter="test">
                        <option value="">请选择城市</option>
                        <option value="0">山西省</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline" name="city">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男">
                    <input type="radio" name="sex" value="2" title="女" checked>
                    <input type="radio" name="sex" value="0" title="保密">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">兴趣爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[music]" title="音乐">
                    <input type="checkbox" name="like[sports]" title="体育" checked>
                    <input type="checkbox" name="like[swimming]" title="游泳" checked>
                    <input type="checkbox" name="like[football]" title="足球">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-inline">
                    <input type="checkbox" lay-filter="test1" lay-text="启用|禁用" name="switch" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block" style="width: 400px">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>
<script type="text/javascript">
    layui.use(['form'],function () {
        form = layui.form;
        $ = layui.jquery;
        form.on('select(test)', function(data){
            console.log(data.value); //得到被选中的值
            if (data.value==0){
                //该处可以使用ajax 接口调用数据库数控
                var citys = ['太原市','朔州市','大同市','阳泉市'];
                //向html中插入select
                var html = '<select>';
                $.each(citys,function (i,v) {
                    html+=('<option>'+v+'</option>');
                });
                html += '</select>';
                $('div[name="city"]').html(html);
                form.render();
            }
        });

        form.on('switch(test1)', function(data){

            console.log(data.elem.checked); //开关是否开启,true或者false
            //询问框判断是否开启
            if (data.elem.checked==true){
                layer.confirm('您确定要启用?', {
                    btn: ['启用','取消'] //按钮
                }, function(){
                    layer.msg('启用成功', {icon: 1});
                }, function(){
                    $(data.elem).prop('checked',false)
                    form.render();
                });
            }else {
                layer.confirm('您确定要禁用?', {
                    btn: ['禁用','取消'] //按钮
                }, function(){
                    layer.msg('禁用成功', {icon: 1});
                }, function(){
                    $(data.elem).prop('checked',true)
                    form.render();
                });
            }
        });

    });
</script>
</body>
</html>

layui 框架其中封装的方法几乎在日常开发中已经基本够用,其中可能涉及到特殊需求需要自己编写,一般情况采用layui即可实现;

在后端级前端开发中,重点主要在与js 因为涉及到需要与后端进行交互,html无法实现将采用js,其中如 表单验证;

提示框、询问框,都会涉及到js,layui中已经将常用方法进行封装,在更具需要编写对应代码方可实现;

如上代码中询问框。

  1. 首先实现询问框弹出;

  2. 在进行if判断,判断如果为true将实现对应提示,否则将执行什么;

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议