LayUI弹出层的学习

弹出层的学习 -- 以添加学生为例

 先看结果的展示图：

 

 

 那么，这个layui的弹出层的使用，自己之前在小项目中也是用过，所以用起来还是比较顺畅的，那么具体如何使用，具体如下分析：

先展示这两部分代码：

<!-- 表头工具栏 -->
<script type="text/html" id="headbar">
    <a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-file">新增学生</i></a>
    <a class="layui-btn layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-edit">批量删除</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">批量导入</i></a>
</script>

<%--数据表格主体--%>
<table id="demo" lay-filter="test"></table>

在展示监听的代码：

        //监听数据头部工具栏的按钮
        table.on("toolbar(test)",function (obj) {
            switch (obj.event) {
                //添加学生页面
                case 'add':
                    openAddStudentPage();
                    break;
            }
        })

展示openAddStudentPage();函数

        /**
         * 点击添加学生按钮显示弹出层的函数实现
         */
        function openAddStudentPage() {
            layer.open({
                type:1,//页面类型  1位页面层
                area:['500px','400px'],
                title:"添加学生页面",
                content:$("#addstudentpage")
            });
        }

其中有绑定的弹出层页面：

<%--添加学生的弹出层--%>
<div id="addstudentpage">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="margin-top: 30px">
            <label class="layui-form-label">输入关键字</label>
            <div class="layui-input-block">
                <input type="text" name="title" style="width: 450px" required  lay-verify="required" placeholder="请输入关键字搜索..." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 30px">
            <label class="layui-form-label">输入关键字</label>
            <div class="layui-input-block">
                <input type="text" name="title" style="width: 450px" required  lay-verify="required" placeholder="请输入关键字搜索..." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="doSearch">立即搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

在弹出层中是一个form表单，其中的action属性可以将数据提交到后台，就可以不使用ajax实现数据的提交，比较方便。