【第39天】JavaScript相册小练习,LayUI的重要组件

版权声明:©2018 本文為博主來秋原創,轉載請註明出處,博主保留追責權利。 https://blog.csdn.net/qq_30257081/article/details/85253963

1 JavaScript相册小练习

1.1 “=”、“==”、“===”之间的区别

  • “=”的意思是赋值
  • “==”的意思是两者若是同一种数据类型,根据“===”来判断值是否相同;两者若不是同一种数据类型,就自动转换为同一种类型后根据“===”判断是否相同
  • “===”的意思是严格相等,两者不是同一种数据类型,立刻返回false,是同一种数据类型则进行比较

1.2 制作相册

  • 效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 代码
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>小练习 相册</title>
        <style>
            div#container{
                margin:0 auto;
                width:830px;
                height:900px;
            }
            body{
                background-color:black;
            }

        </style>
    </head>
    <body>
        <div id="container">
            <!--通过表格形式制作布局-->
            <table>
                <!--主logo-->
                <caption><img src="image/logo.png"></caption>
                <tr>
                    <!--左箭头,激发事件中传入对应的值-->
                    <td><input type="image" src="image/left.gif" onclick="change('left')"></td>

                    <!--主图-->
                    <td><img src="image/1.jpg" id="myPic"></td>

                    <!--左箭头,激发事件中传入对应的值--->
                    <td><input type="image" src="image/right.gif" onclick="change('right')"></td>
                </tr>
            </table>
        </div>
        <script>


            /**
             *  在方法外定义值,如果将这个值放在change(value)事件内部,
             * 会导致这个值在每次点击(左右箭头)时,值都赋为一。
             */
            let currentPage = 1;

            function change(value){

                if(value == 'left'){
                    if(currentPage > 1){
                        currentPage--;
                    }else{
                        alert("已经是首页了");
                    }
                }

                if(value == 'right'){
                    if(currentPage < 6){
                        currentPage++;
                    }else{
                        alert("已经是末页了");
                    }
                }

                /**
                 * 绑定id之后直接通过这个变量来调用标签中的src属性并修改其值,
                 * 因为这里图已经定义为1.jpg、2.jpg共六张,这里写死
                 * 另外,".innerHTML"属性的意思是修改一个标签开闭之间的内容,
                 * 不是追加,而是直接覆盖,可以添加HTMl语句
                 * */
                let dom_img = document.getElementById("myPic");
                dom_img.src = "image/" + currentPage + ".jpg";
            }
        </script>
    </body>
</html>

2 LayUI的重要组件

       一个功能强大的的国产前端框架,分块介绍如何一些重要组件。

2.1 使用之初

  • 引入LayUI的相关文件,一般名为“layui”,下图是它的文档树,其中相关组件可以移步官网文档

在这里插入图片描述

2.2 使用LayUI所必需的环境模板

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>环境模板,如何引入layui以及常见参数解惑</title>
       
        <!--
            viewport:屏幕可视区域
            
            
            content属性值:
                 width:可视区域的宽度,值可为数字或关键词device-width(表示设备的理想宽度)
            
                 height:同width
            
                 intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
                 
                 maximum-scale=1.0、minimum-scale=1.0:可视区域的缩放级别,
                 maximum-scale:用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
            
                 user-scalable:是否可对页面进行缩放,no(禁止缩放)或填写0同样表示禁止缩放
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
       
        <!--
            删除默认的苹果工具栏和菜单栏。
            需要显示工具栏和菜单栏时,不需要添加,默认值为yes,即显示。
        -->
        <meta name="apple-mobile-web-app-capable" content="yes">
       
        <!--
            引入LayUI的CSS样式
            media:表示引入的css适用于何种设备,all表示可以针对所有设备
        -->
        <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
    </head>
    <body>
        
        <!--
            表示去除链接多余动作,如果不设置此参数则页面会刷新,
            如果使用“#”会造成无意义的空跳转
        -->
        <a href="javascript:;">测试</a>



        <!--
            引入LayUI的JS脚本
        -->
        <script src="layui/layui.js"></script>
        
        <!--
            用户自定义的JS脚本
        -->
        <script>

        </script>
    </body>
</html>

2.3 布局

       2.3.1后面的代码只展示body标签中的内容。

2.3.1 行列的定义

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>布局</title>
        <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
        <meta name="viewport" content="width=device-width, 
        initial-scale=1, maximum-scale=1">
        <style>
            .pink{
                background-color: pink;
            }
            .silver{
                background-color: silver;
            }
            .hotpink{
                background-color:hotpink;
            }
            .red{
                background-color:red;
            }
            .yellow{
                background-color:yellow;
            }
            .blue{
                background-color:blue;
            }
            .orange{
                background-color:orange;
            }
            .green{
                background-color:green;
            }
            .cyan{
                background-color:cyan;
            }
            .purple{
                background-color:purple;
            }
        </style>
    </head>
    <body>
    <!--
            布局
            1.	采用 layui-row 来定义行,如:<div class="layui-row"></div>,相当于table中的tr

            2.	采用类似“layui-col-md*”这样的预设类来定义一组列(column),且放在行(row)内,这相当于table中的td
            其中:

                变量md 代表的是不同屏幕下的标记,列可以同时出现最多四种不同的组合,
                分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),
                以呈现更加动态灵活的布局。

                变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12

                如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12且内容溢出,多余的列将自动另起一行。
                设置的列小于12的,内容溢出时,多余的列也自动起一行。

            3*.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

            4.	最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局
    -->
    <!--
            这里以PC中型桌面为例
            将栅格放入一个带有 class="layui-container" 的特定的容器中,以便在小屏幕以上的设备中固定宽度,让列可控。

            还可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中,那么宽度将不会固定,而是 100% 适应

            注意,列中开闭标签中需要有内容才可以显示这一行

            这里显示的数字表示这一列占了12份中的几份
    -->
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div class="red">1本列占一等分本列占一等分本列占一等分
                    本列占一等分本列占一等分本列占一等分</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="orange">3</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md5">
                    <div class="yellow">5</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md7">
                    <div class="green">7</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md9">
                    <div class="cyan">9</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md11">
                    <div class="blue">11</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="pink">12</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md13">
                    <div class="purple">13</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md14">
                    <div class="hotpink">14</div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md9">
                    <div class="pink">9/12</div>
                </div>
                <div class="layui-col-md3">
                    <div class="silver">3/12</div>
                </div>
            </div>
        </div>
    </body>
</html>
  • 效果图
    在这里插入图片描述

2.3.2 设置列间距

    <!--         
         通过“列间距”的预设类,来设定列之间的间距。
         且一行中最左的列不会出现左边距,最右的列不会出现右边距。
         列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。
         我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
         
         layui-col-space1	列之间间隔 1px
         layui-col-space3	列之间间隔 3px
         layui-col-space5	列之间间隔 5px
         layui-col-space8	列之间间隔 8px
         layui-col-space10	列之间间隔 10px
         layui-col-space12	列之间间隔 12px
         layui-col-space15	列之间间隔 15px
         layui-col-space18	列之间间隔 18px
         layui-col-space20	列之间间隔 20px
         layui-col-space22	列之间间隔 22px
         layui-col-space28	列之间间隔 28px
         layui-col-space30	列之间间隔 30px

         对列追加 类似 layui-col-md-offset* 的预设类,从而让列向右偏移。
         其中 * 号代表的是偏移占据的列数,可选中为 1 - 12。 
         如:layui-col-md-offset3,即代表在“中型桌面屏幕”下,让该列向右偏移3个列宽度
    -->
        <div class="layui-container">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md4">
                <div class="pink">4/12</div>
            </div>
            <div class="layui-col-md4">
                <div class="purple">4/12</div>
            </div>
            <div class="layui-col-md4">
                <div class="hotpink">4/12</div>
            </div>
        </div>
        
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="red">4/12</div>
            </div>


            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="blue">4/12</div>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>

    </script>
  • 效果图
    在这里插入图片描述

2.3.3 栅格嵌套

	<!--
        理论上,你可以对栅格进行无穷层次的嵌套,这更加增强了栅格的表现能力。而嵌套的使用非常简单。
         在列元素(layui-col-md*)中插入一个行元素(layui-row),即可完成嵌套。
         嵌套列中一行出现溢出情况的,自动换行显示
    -->
    <div class="layui-container">
        <div class="layui-row layui-col-space5">
            <div class="layui-col-md5">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <div class="red">内部列1</div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="yellow">内部列2</div>
                    </div>
                    <div class="layui-col-md9">
                        <div class="blue">内部列3</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md7">
                <div class="layui-row">
                    <div class="layui-col-md12">
                        <div class="red">内部列1</div>
                    </div>
                    <div class="layui-col-md9">
                        <div class="yellow">内部列2</div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="blue">内部列3</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <script>

    </script>    
  • 效果图
    在这里插入图片描述

2.3.4 兼容性

       以下代码黏贴到IE8、9的body标签内可以兼容LayUI的栅格。

    <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

2.4 图标

       LayUI的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库。因此你可以把一个icon看作是一个普通的文字,这意味着你直接用 css 控制文字属性,如 color、font-size这种作用于字体的属性就可以改变图标的颜色和大小。这里只举例图标如何使用,更多图标移步官方文档·字体图标查找。
       只需要按照如下代码将内置图标的对应CSS类名(类中须有layui-icon)粘贴到i标签或Unicode字符复制到i标签之间即可。


        <i class="layui-icon layui-icon-face-smile"></i>

        <i class="layui-icon" style="font-size:150px;color:orangered;padding:20px">&#xe6af;</i>
        <script src="layui/layui.js"></script>
	    <script>
	
	    </script>

在这里插入图片描述

2.5 动画与按钮

2.5.1 动画

       其中 layui-anim 是必须的,后面跟着的是不同的动画类。

    <!--
          动画的类型:

          从最底部往上滑入
          layui-anim-up

          微微往上滑入
          layui-anim-upbit

          平滑放大
          layui-anim-scale

          弹簧式放大
          layui-anim-scaleSpring

          渐现
          layui-anim-fadein

          渐隐
          layui-anim-fadeout

          360度旋转
          layui-anim-rotate

          循环动画
          追加:layui-anim-loop
    -->
    <!--其中 layui-anim 是必须的,后面跟着的即是不同的动画类-->
    <div style="width:200px;height:100px;background-color:lightblue"
         class="layui-anim layui-anim-fadein">看看效果</div>

    <div class="layui-anim layui-anim-rotate">
        <i class="layui-icon layui-icon-refresh-3"
           style="font-size:100px;color:blue;padding:20px"></i>
    </div>
    <script src="layui/layui.js"></script>
    <script>

    </script>

(动画视频不会做,自己试试吧- -|||)

2.5.2 按钮

    <!--
        按钮
    -->
    <button class="layui-btn layui-anim layui-anim-scale">我是一个按钮呀</button>
    <br/>
    <br/>
    
    <!--
        图标配合按钮
    -->
    <button class="layui-btn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>

    <button class="layui-btn layui-btn-sm layui-btn-primary">
        <i class="layui-icon layui-icon-login-wechat"></i>
    </button>
    <br/>
    <br/>
    
    <!--
        按钮组
    -->
    <div class="layui-btn-group">
        <button class="layui-btn">增加</button>
        <button class="layui-btn">编辑</button>
        <button class="layui-btn">删除</button>
    </div>

    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe640;</i>
        </button>
        <button class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe602;</i>
        </button>
    </div>

    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button class="layui-btn layui-btn-primary layui-btn-sm">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>
    <script src="layui/layui.js"></script>
    <script>

    </script>

在这里插入图片描述

2.6 表单

    <!--
        在一个容器中设定 class="layui-form" 来标识一个表单元素块,通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素
        ,并通过内置的 form模块 来完成各种交互。依赖加载模块:form (请注意:如果不加载form模块,select、checkbox
        、radio等将无法显示,并且无法使用form相关功能)

        可选:通过追加 layui-form-pane 的class,来设定表单的方框风格
        <form class="layui-form layui-form-pane" action="">
              内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭),如:
              <div class="layui-form-item" pane>
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                  <input type="radio" name="sex" value="男" title="男">
                  <input type="radio" name="sex" value="女" title="女" checked>
                </div>
              </div>
        </form>
    -->

    <form class="layui-form" action="helloworld1.html" method="post" lay-filter="myForm">
        <!--
            class="layui-form-item"
            每一个表单项使用此属性嵌套在外层表示一个表单项
        -->
        <div class="layui-form-item">
            <!--
                class="layui-form-label"
                表示标签区域
            -->
            <label class="layui-form-label">用户姓名:</label>
            <!--
                class="layui-input-block"
                块元素输入框,占满一行
                class="layui-input-inline"
                行内元素输入框,不占满一行

                class="layui-inline":定义父元素的行内页面元素类型
                class="layui-input-inline":定义内层行内
            -->
            <div class="layui-input-block">
                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~1:单行文本、密码输入框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                <!--
                    required:直接书写此属性表示调用H5规范属性,非Layui内置属性
                            如果使用Layui内置验证可以省略此属性

                    lay-verify  required(必填项)
                                phone(手机号)
                                email(邮箱)
                                url(网址)
                                number(数字)
                                date(日期)
                                identity(身份证)
                                自定义值	同时支持多条规则的验证,格式:lay-verify="验证A|验证B"
                                如:lay-verify="required|phone|number"

                                另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify="verifyName"
                                ,那么你就需要借助form.verify()方法对verifyName进行一个校验规则的定义。

                    autocomplete="off"  是否记录用户输入过的信息,存在on 和 off两个值,
                    默认值为on,但是为安全性考虑,一般关闭,但是在chrome浏览器中如果出现关闭不能的情况可以填写
                    autocomplete="new-password"

                -->
                <input type="text" name="name" lay-verify="required|verifyName"
                       placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="password" lay-verify="required|verifyPassword"
                       placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <!--
                layui-form-mid:设置辅助文字居于输入框中部
                layui-word-aux:设置提示文字样式
            -->
            <div class="layui-form-mid layui-word-aux">(必填)用户密码应该在5到10位之间</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_min" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_max" placeholder=""
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~2:下拉列表框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-form-item">
            <label class="layui-form-label">归属地:</label>
            <div class="layui-input-inline">
                <select name="city" lay-verify="required"
                        lay-filter="filterSelect">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2" disabled >广州</option>
                    <option value="3">深圳</option>
                    <option value="4">山东</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">提示问题:</label>
            <div class="layui-input-inline">
                <select name="quiz">
                    <option value="">请选择</option>
                    <optgroup label="城市记忆">
                        <option value="你工作的第一个城市">你工作的第一个城市?</option>
                    </optgroup>
                    <optgroup label="学生时代">
                        <option value="你的工号">你的工号?</option>
                        <option value="你最喜欢的老师">你最喜欢的老师?</option>
                    </optgroup>
                </select>
            </div>
        </div>

        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~3:复选框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-form-item">
            <label class="layui-form-label">爱好1:</label>
            默认风格:
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作" lay-filter="filterCheck">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[forbidden]" title="禁用" disabled>
            </div>
        </div>
        <!--
            title	任意字符	设定元素名称,一般用于checkbox、radio框
            lay-skin	switch(开关风格) primary(原始风格)	定义元素的风格,目前只对 checkbox 元素有效,可将其转变为开关样式
            lay-ignore	任意字符或不设值	是否忽略元素美化处理。设置后,将不会对该元素进行初始化渲染,即保留系统风格
            lay-filter	任意字符	事件过滤器,主要用于事件的精确匹配,跟选择器是比较类似的。其实它并不私属于form模块,它在 layui 的很多基于事件的接口中都会应用到。
        -->
        <div class="layui-form-item">
            <label class="layui-form-label">爱好2:</label>
            原始风格:
            <div class="layui-input-block">
                <input type="checkbox" name="" title="写作" lay-skin="primary" lay-filter="filterCheck" checked>
                <input type="checkbox" name="" title="阅读" lay-skin="primary">
                <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
            </div>
        </div>

        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~4:复选框(特殊)~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-form-item">
            <label class="layui-form-label">开关:</label>
            <div class="layui-input-block">
                <input type="checkbox" name="xxx" lay-skin="switch" lay-filter="filterSwitch" value="onOff">
                <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
                <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
                <input type="checkbox" name="aaa" lay-skin="switch" disabled>
            </div>
        </div>

        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~5:单选框~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-form-item">
            <label class="layui-form-label">单选框:</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="" title="" lay-filter="filterSex">
                <input type="radio" name="sex" value="" title="" lay-filter="filterSex" checked>
            </div>
        </div>

        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~6:文本域~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域:</label>
            <div class="layui-input-inline">
                    <textarea name="weibo" placeholder="请输入内容" class="layui-textarea"
                              cols="30" rows="5"></textarea>
            </div>
        </div>

        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~7:提交~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <!--
                    lay-submit	无需填写值,绑定触发提交的元素,如button
                -->
                <button class="layui-btn" lay-submit lay-filter="filterSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!--
            引入LayUI的JS脚本
        -->
    <script src="layui/layui.js"></script>
    <script>

        //遵循 LayUI 的模块规范建立一个入口文件,通过 layui.use() 方式加载该入口文件,相当于Java中的主函数
        //必须在执行该方法后才会加载内置函数
        //方括号中的元素用来声明该模块所依赖的模块
        //function意为回调函数,加载这个组件之后调用的函数
        layui.use(['form', 'layedit', 'laydate','layer'], function(){
            let form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;


            //表单初始赋值,一般不用,去掉即可
            //myForm 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
            form.val('myForm', {
                "name": "value"
                ,"password":"123456"
                ,"price_min":100
                ,"price_max":200
                ,"city":"1"
                ,"quiz":"你工作的第一个城市"
                ,"like[write]":true //复选框选中状态
                ,"weibo":"测试"
            });


            //验证规则
            form.verify({
                //这里的item的意思是得到绑定verifyName的原始DOM对象
                //如果使用正则表达式,无法使用item参数
                verifyName:function(value,item){
                    if(value.length<4||value.length>8){
                        return "用户名必须在4到8位之间";
                    }
                    console.log(item);
                },
                //以下为第二种书写方式一般配合正则表达式
                verifyPassword:[/^[\S]{5,10}$/,"用户密码必须在5到10位之间"]
            });


            //事件监听
            //监听多选框
            form.on('checkbox(filterCheck)', function(data){
                console.log(data.elem); //得到checkbox的原始DOM对象
                console.log(data.elem.checked); //是否被选中,true或者false
                console.log(data.value); //复选框value值,也可以通过data.elem.value得到
                console.log(data.othis); //得到美化后的DOM对象
            });


            //事件监听
            //监听下拉列表框
            form.on("select(filterSelect)",function(data){
                console.log(data);//获取option的信息
            });


            //事件监听
            //监听switch特殊复选框
            form.on("switch(filterSwitch)",function(data){
                /*
                * layer.tips('显示的信息',在哪个对象处显示);
                * */
                layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF',data.othis);
                if(data.elem.checked==true){
                    console.log("开开啦!!");
                    //通过设置value值从而在表单提交时提交value数据
                    data.elem.value="我是switch";
                }else{
                    console.log("关闭啦!!");
                    console.log(data.elem.value);
                }
            });


            //事件监听
            //监听radio单选框
            form.on('radio(filterSex)', function(data){
                console.log(data.elem); //得到radio原始DOM对象
                console.log(data.value); //被点击的radio的value值
            });


            //监听提交
            form.on('submit(filterSubmit)',function(data){
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                });
                //阻止表单跳转。如果需要表单跳转,去掉这段即可
                return false;
            });
        });
    </script>

2.7 导航

       在使用导航之前,需要依赖element模块及JS库,否则无法进行功能操作。(本章节后面的代码均省略引入script脚本的操作)

    <script src="layui/layui.js"></script>
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){
            let element = layui.element;
        });
    </script>

2.7.1 水平导航

    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item"><a href="">产品</a></li>
        <!--
            layui-this:表示默认选中
        -->
        <li class="layui-nav-item layui-this"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <!--
                    这里是二级菜单
                    <dl>
                        <dt>标题1</dt>
                        <dd>标题1内容</dd>
                        <dt>标题2</dt>
                        <dd>标题2内容</dd>
                    </dl>
                -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>

        <!--
            layui-badge:可作为未读信息的徽标,标签中传入即为显示的内容
        -->
        <li class="layui-nav-item" style="float: right;">
            <a href="">控制台<span class="layui-badge">9</span></a>
        </li>

        <!--
            layui-badge-dot:可作为未读信息的徽标,红点
        -->
        <li class="layui-nav-item" style="float: right;">
            <a href="">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item" style="float: right;">
            <a href=""><img src="images/avatar.png" class="layui-nav-img">Eric</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">注销</a></dd>
            </dl>
        </li>
    </ul>

效果图(子表单隐藏):
在这里插入图片描述

2.7.2 各种配色的导航

 <!--
        共支持以下几种配色
        layui-bg-cyan(藏青,默认)
        layui-bg-molv(墨绿)
        layui-bg-green (墨绿)
        layui-bg-blue(艳蓝)
        layui-bg-orange (橙色)
    -->
    <ul class="layui-nav layui-bg-orange" lay-filter="">
        <li class="layui-nav-item"><a href="javascript:;">栏目1</a></li>
        <li class="layui-nav-item"><a href="javascript:;">栏目2</a></li>
        <li class="layui-nav-item"><a href="javascript:;">栏目3</a></li>
        <li class="layui-nav-item"><a href="javascript:;">栏目4</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">栏目4子列表1</a></dd>
                <dd><a href="javascript:;">栏目4子列表2</a></dd>
                <dd><a href="javascript:;">栏目4子列表3</a></dd>
                <dd><a href="javascript:;">栏目4子列表4</a></dd>
                <dd><a href="javascript:;">栏目4子列表5</a></dd>
            </dl>
        </li>
    </ul>

效果图:
在这里插入图片描述

2.7.3 垂直导航

    <ul class="layui-nav layui-nav-tree" lay-filter="">
        <!-- 
        	侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> 
        -->
        <!--
            layui-nav-itemed:此属性表示默认展开
        -->
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">默认展开</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">选项1</a></dd>
                <dd><a href="javascript:;">选项2</a></dd>
                <dd><a href="">跳转</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
    </ul>

效果图:
在这里插入图片描述

2.7.4 侧边导航

    <!--
        注意侧边导航与垂直导航几乎一致,但是会从上到下占满整个浏览器
    -->
    <ul class="layui-nav layui-nav-tree layui-nav-side">
          <li class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">默认展开</a>
              <dl class="layui-nav-child">
                  <dd><a href="javascript:;">选项1</a></dd>
                  <dd><a href="javascript:;">选项2</a></dd>
                  <dd><a href="">跳转</a></dd>
              </dl>
          </li>
          <li class="layui-nav-item">
              <a href="javascript:;">解决方案</a>
              <dl class="layui-nav-child">
                  <dd><a href="">移动模块</a></dd>
                  <dd><a href="">后台模版</a></dd>
                  <dd><a href="">电商平台</a></dd>
              </dl>
          </li>
          <li class="layui-nav-item"><a href="">产品</a></li>
          <li class="layui-nav-item"><a href="">大数据</a></li>
      </ul>

效果图:
在这里插入图片描述

2.7.5 面包屑

    <!--
        <cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    -->
    <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">国际新闻</a>
            <a href="">亚太地区</a>
            <a><cite>正文</cite></a>
        </span>
    <hr>
    <!--
        你还可以通过设置属性 lay-separator="-" 来自定义分隔符
    -->
    <span class="layui-breadcrumb" lay-separator="-">
            <a href="">首页</a>
            <a href="">国际新闻</a>
            <a href="">亚太地区</a>
            <a><cite>正文</cite></a>
        </span>
    <hr>
    <span class="layui-breadcrumb" lay-separator="|">
            <a href="">娱乐</a>
            <a href="">八卦</a>
            <a href="">体育</a>
            <a href="">搞笑</a>
            <a href="">视频</a>
            <a href="">游戏</a>
            <a href="">综艺</a>
        </span>
    <hr>

效果图:
在这里插入图片描述

2.8 选项卡

       与导航类似,在使用选项卡之前,需要依赖element模块及JS库,否则无法进行功能操作。(本章节后面的代码均省略引入script脚本的操作)

    <script src="layui/layui.js"></script>
    <script>
        //注意:导航 依赖 element 模块,否则无法进行功能性操作
        layui.use('element', function(){
            let element = layui.element;
        });
    </script>

2.8.1 默认风格

        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">我是网站设置的内容</div>
                <div class="layui-tab-item">我是用户管理的内容</div>
                <div class="layui-tab-item">我是权限分配的内容</div>
                <div class="layui-tab-item">我是商品管理的内容</div>
                <div class="layui-tab-item">我是订单管理的内容</div>
            </div>
        </div>

效果图:
在这里插入图片描述

在这里插入图片描述

2.8.2 简洁风格

      <!--
            通过追加class:layui-tab-brief 来设定简洁风格。
        -->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">我是网站设置</div>
                <div class="layui-tab-item">我是用户管理的内容</div>
                <div class="layui-tab-item">我是权限分配的内容</div>
                <div class="layui-tab-item">我是商品管理的内容</div>
                <div class="layui-tab-item">我是订单管理的内容</div>
            </div>
        </div>

效果图:
在这里插入图片描述

2.8.3 卡片风格

<div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
                <li>权限分配</li>
                <li>商品管理</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content" style="height:100px;">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
            </div>
        </div>

效果图:
在这里插入图片描述

2.8.4 带删除的tab

       <!--
            只要对最外层容器    添加lay-allowClose="true"
            则tab可以删除
        -->
        <div class="layui-tab" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户基本管理</li>
                <li>权限分配</li>
                <li>全部历史商品管理文字长一点试试</li>
                <li>订单管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">1</div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
            </div>
        </div>

效果图:
在这里插入图片描述
在这里插入图片描述

没有更多推荐了,返回首页