zoukankan      html  css  js  c++  java
  • LayUI 使用

    LayUI

     经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.

      其他UI框架:
        Bootstrap,Element, EasyUI,LayUI 等等

    LayUI使用

     Layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

      1. 官网首页下载 https://www.layui.com/

      2. 引入layui核心文件:

    layui/css/layui.css	// layui中内置的样式
    layui/layui.js		// layui中核心的js插件(模块化使用)
    layui/layui.all.js 	// layui中所有的js
    

      3. layui的目录介绍:

       layui
        ├─css //css目录
        │ │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)
        │ │ ├─laydate
        │ │ ├─layer
        │ │ └─layim
        │ ├─layui.css //核心样式文件
        │ └─layui.mobile.css //移动端CCSS样式
        ├─font //字体图标目录(内置字体)
        ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)
        │─lay //模块核心目录
        │ └─modules //各模块组件(所有模块的JS)
        │─layui.js //基础核心库(所有JS的入口)
        └─layui.all.js //包含layui.js和所有模块的合并文件(layui中所有的js)

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <!-- 
     1. 在JS引入时  若引入多个JS, JS之间存在依赖性.则优先引入被依赖的JS
     2. 一般引入JS,在body的最后面引入,因为代码自上而下的执行,这样可以等页面的DOM元素都加载了引入JS,避免不生效和异常问题
    -->
    <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
     // 初始化layui模块
     layui.use(['form','jquery'],function(){
    		// 初始化模块的对象
     	// 初始化jquery对象
    		var $ = layui.jquery;
    		// 初始化form表单模块对象
    		var form = layui.form;
    	});
    </script>
    </body>
    </html>
    

    页面元素

    布局

    栅格系统:

     容器进行了 12 等分,预设了 4*12 种 CSS 排列类,它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用.
    

    一.栅格布局规则

    1. 采用 layui-row 来定义行,如:<div class="layui-row"></div>
    2. 采用类似 layui-col-md 这样的预设类来定义一组列(column),且放在行(row)内。其中:变量md 代表的是不同屏幕下的标记(可选值见下文)变量代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12如果多个列的“等分数值”总和等于12,则刚好满行排列。如果大于12,多余的列将自动另起一行。
    3. 列可以同时出现最多四种不同的组合,分别是:xs(超小屏幕,如手机)、sm(小屏幕,如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕),以呈现更加动态灵活的布局。
    4. 可对列追加类似 layui-col-space5layui-col-md-offset3 这样的预设类来定义列的内边距的间距和偏移(自身所在容器的12等份)。
    5. 最后,在列(column)元素中放入你自己的任意元素填充内容,完成布局!

    颜色

    样式 颜色
    class="layui-bg-red" 赤色,比较引人注意的颜色
    class="layui-bg-orange" 橙色,暖色系,一般用于提示性元素
    class="layui-bg-green" 墨绿,通常用于按钮、及任何修饰元素
    class="layui-bg-cyan" 藏青:侧边或底部普遍采用的颜色
    class="layui-bg-blue" 蓝色:比较适合一些鲜艳色系的页面
    class="layui-bg-black" 雅黑:通常用于导航
    class="layui-bg-gray" 银灰:背景、边框

    字体图标

    ​ 通过对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标.然后对元素加上图标对应的字体图标.

    layui-icon : 表示是一个字体图标

    layui-icon-XXXX:具体的内置图标

    字体图标在LayUI中有两种表现方式:

    ​ 1.使用class样式

    ​ 2.使用图标字符集

    例如:

    <p>字体图标</p>
    <!-- 使用class样式 -->
    <i  class="layui-icon layui-icon-rate"></i>
    <!-- 使用特殊的字体字符集 -->
    <i  class="layui-icon">&#xe67b;</i>
    

    动画

    ​ 内置动画,使用: class="layui-anim" 表示是动画,动画Layui内置8种,后面跟具体的动画效果

    动画样式 动画效果
    class="layui-anim layui-anim-up" 从最底部往上滑入
    class="layui-anim layui-anim-upbit" 微微向上划入
    class="layui-anim layui-anim-scale" 平滑放大
    class="layui-anim layui-anim-scaleSpring" 弹簧式放大
    class="layui-anim layui-anim-fadein" layui-anim-fadein
    class="layui-anim layui-anim-fadeout" 渐隐
    class="layui-anim layui-anim-rotate" 360旋转
    class="layui-anim layui-anim-loop" 循环动画

    按钮(重点)

    ​ 使用class = "layui-btn" 表示按钮样式

    颜色:

    名称 组合
    原始 class="layui-btn layui-btn-primary"
    默认 class="layui-btn"
    百搭 class="layui-btn layui-btn-normal"
    暖色 class="layui-btn layui-btn-warm"
    警告 class="layui-btn layui-btn-danger"
    禁用 class="layui-btn layui-btn-disabled"

    尺寸:

    尺寸 组合
    大型 class="layui-btn layui-btn-lg"
    默认 class="layui-btn"
    小型 class="layui-btn layui-btn-sm"
    迷你 class="layui-btn layui-btn-xs"

    形状:

    是否圆角:class=" layui-btn-radius" :表示圆角

    例如:

    主题 组合
    原始 class="layui-btn layui-btn-radius layui-btn-primary"
    默认 class="layui-btn layui-btn-radius"
    百搭 class="layui-btn layui-btn-radius layui-btn-normal"
    暖色 class="layui-btn layui-btn-radius layui-btn-warm"
    警告 class="layui-btn layui-btn-radius layui-btn-danger"
    禁用 class="layui-btn layui-btn-radius layui-btn-disabled"

    图标按钮:即将button和i标签使用字体图标结合

    <button class="layui-btn  layui-btn-lg layui-btn-danger">
        <i class="layui-icon layui-icon-fire"></i>按钮
    </button>
    

    注意:

    ​ class="layui-btn-group" 按钮组,将多个按钮放在一起,可以缩小默认的按钮之间的间隙

    导航

    ​ layui默认导航是水平导航,使用: class="layui-nav".

    ​ class="layui-nav-item" : 表示导航中的项

    水平导航

    class="layui-nav" 表示导航 水平导航

    ​ |--- class="layui-nav-item" 表示导航中的具体项

    ​ |--- class="layui-nav-child" 表示导航项中的子项

    ​ |--- class="layui-this" 表示当前被选中的项

    垂直导航

    class="layui-nav layui-nav-tree" : 表示是导航中垂直导航

    ​ |--- class="layui-nav-itemed" : 被展开的导航项

    ​ |--- class="layui-nav-side" : 会垂直占一列

    Tab选项卡

    导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能.

    在layui中,class="layui-tab"表示是一个选项卡

    ​ |--- class="layui-tab-title" : 表示选项卡的标题

    ​ |--- class="layui-this" : 表示当前被选中的项

    ​ |--- class="layui-tab-content" : 表示选项卡中的内容

    ​ |--- class="layui-tab-item" : 表示内容项

    ​ |--- class="layui-show" : 表示当前内容项会展示

    选项卡风格:

    样式 说明
    layui-tab-brief 简单风格(下划线)
    layui-tab-card Tab卡片风格(块)

    特殊属性:

    属性名 说明
    lay-allowClose="true" 选项卡可以被关闭(只要该属性有值,则表示生效)
    lay-id="xxx" 选项卡中用于设置选项的唯一的匹配索引
    lay-filter="xxx" 选卡的唯一标识(一般用于layui中事件)

    事件:

    事件名 说明
    element.on('tab(filter)', function(data){}); 监听选项卡切换
    element.on('tabDelete(filter)', function(data){})' 监听选项卡的删除
    element.tabAdd('demo', options); 新增选项卡
    element.tabChange('lay-filter值', layid); 切换选项卡
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
    <div class="layui-tab" lay-allowClose="true" lay-filter="myTab"> 
      <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>
    </div>
     <button id="addBtn">新增一个选项卡</button>
      <button id="addBtn2">切换选项卡</button>
     <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    	//初始化layui模块
    	layui.use(['element','jquery'],function(){
    		var element = layui.element;
    		var $ = layui.jquery;
    		//选项卡事件:
    		//选项卡切换事件
    		element.on('tab(myTab)',function(data){//tab(lay-filter的值)
    			console.log(data);
    			//当前选项信息:	整个选项卡信息以及当前信息
    			console.log(data.elem);
    			console.log("get(0):"+data.elem.get(0)); //jquery 对象 :  js对象转化为jquery对象   jquery 对象怎么转化为js对象
    			// js对象转化为jquery 对象 : $(js对象) :  
    			// 获取上一个选项
    			console.log(data.elem.prevObject);
    			//所在选项卡的下标索引, 从 0 开始
    			console.log(data.index);
    		});
    		//选项卡删除事件
    		element.on('tabDelete(myTab)', function(data){//tab(lay-filter的值)
    			console.log(this); //当前Tab标题所在的原始DOM元素
    			console.log(data.index); //得到当前Tab的所在下标
    			console.log(data.elem); //得到当前的Tab大容器
    		});
    		//为按钮绑定点击事件
    		$("#addBtn").click(function(){
    			//新增选项卡
    			var tab = {
    					 title: '新增选项卡的标题',
    					 content: '选项卡的内容', //支持传入html
    					 id: '999'
    			};
    			element.tabAdd("myTab", tab);
    		});
    		//切换选项卡
    		$("#addBtn2").click(function(){
    			//切换选项卡 tabChange("lay-filter的值", lay-id值);
    			element.tabChange("myTab", 999);
    		});
    	});
    </script>
    </body>
    </html>
    

    进度条

    ​ 在layui中,使用class="layui-progress"表示进度条.

    ​ class="layui-progress-bar" 表示具体的进度条

    ​ class="layui-progress-big" 表示尺度大号

    属性:

    属性名 说明
    lay-percent="10%" 进度条进度
    lay-showPercent="true" 是否显示进度值
    lay-filter="XXX" 事件操作相关属性值

    事件:

    事件名称 说明
    element.progress('lay-filter的值',value); 更新进度条进度

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body style="padding: 100px">
    <!-- 表示进度条 -->
    <div class="layui-progress" lay-showPercent="true" lay-filter="myProgress">
    	<div class="layui-progress-bar" lay-percent="0%" id="myProgressBar"></div>
    </div>
    <button id="btn1">开始涨涨涨</button>
     <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    	//初始化layui模块
    	layui.use(['element','jquery'],function(){
    		var element = layui.element;
    		var $ = layui.jquery;
    		
    		//点击按钮后 让进度条进度增涨
    		$("#btn1").click(function(){
    			var m = 10;
    			window.setInterval(function(){
    				var v = m+"%";
    				m = m+10;
    				if(m > 100){
    					m = 100;
    				}
    				//获取进度条的值
    				element.progress('myProgress', v);
    			}, 1000);
    		});
    	});
    </script>
    </body>
    </html>
    

    面板

    ​ 在layui中,面板是指:一个独立的容器,装元素,而折叠面板则能有效地节省页面的可视面积.

    普通面板:

    ​ class="layui-card" : 表示普通面板

    ​ |--- class="layui-card-header" 面板的头部信息

    ​ |--- class="layui-card-body" 面板内容

    折叠面板:

    ​ class="layui-collapse" : 表示折叠面板

    ​ |--- class="layui-colla-item" : 折叠面板中的项

    ​ |--- class="layui-colla-title" : 折叠面板中的项中的标题

    ​ |--- class="layui-colla-content" : 折叠面板项中的内容

    ​ |--- class="layui-show" : 折叠面板中 展开的项

    属性:
    属性名 说明
    lay-accordion 表示折叠面板只能展开一个面板项
    事件
    事件名 说明
    element.on('collapse(lay-filter值)', function(data){}); 监听面板的展开或者收缩

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body style="padding-left: 100px">
    <h1>普通面板</h1>
    <div class="layui-card">
      <div class="layui-card-header">面板标题</div>
      <div class="layui-card-body">
        	面板内容
      </div>
    </div>
    <h1>折叠面板</h1>
    <div class="layui-collapse">
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">杜甫</h2>
        <div class="layui-colla-content layui-show">内容区域</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>
    <h1>手风琴面板---只能显示一个</h1>
    <div class="layui-collapse" lay-accordion lay-filter="myPanel"> 
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">杜甫</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">李清照</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
      </div>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">鲁迅</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
      </div>
    </div>
     <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    	//初始化layui模块
    	layui.use(['element','jquery'],function(){
    		var element = layui.element;
    		var $ = layui.jquery;
    		//监听面板的展开或者收缩
    		element.on('collapse(myPanel)', function(data){
    			//console.log(data);
    			console.log(data.show); //得到当前面板的展开状态,true或者false
    			console.log(data.title); //得到当前点击面板的标题区域DOM对象
    			console.log(data.content); //得到当前点击面板的内容区域DOM对象
    		});
    	});
    </script>
    </body>
    </html>
    

    时间线

    在layui中,使用class="layui-timeline"表示时间线.

    使用class="layui-timeline-item" 表示实现线中的项

    ​ |--- class="layui-timeline-content 表示时间线的内容

    ​ |--- class="layui-timeline-title" 表示内容的标题

    ​ 使用<p>标签表示具体的内容

    注意: 在时间线中可以插入图标:

     <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body style="padding-left: 100px">
    <ul class="layui-timeline">
      <li class="layui-timeline-item">
         <i class="layui-icon layui-timeline-axis">&#xe756;</i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月18日</h3>
          <p>
            layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
            <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
            <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon">�</i>
          </p>
        </div>
      </li>
      <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe756;</i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月16日</h3>
          <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
          <ul>
            <li>《登高》</li>
            <li>《茅屋为秋风所破歌》</li>
          </ul>
        </div>
      </li>
      <li class="layui-timeline-item">
      	 <i class="layui-icon layui-timeline-axis">&#xe756;</i>
        <div class="layui-timeline-content layui-text">
          <h3 class="layui-timeline-title">8月15日</h3>
          <p>
            中国人民抗日战争胜利72周年
            <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
            <br>铭记、感恩
            <br>所有为中华民族浴血奋战的英雄将士
            <br>永垂不朽
          </p>
        </div>
      </li>
      <li class="layui-timeline-item">
      	 <i class="layui-icon layui-timeline-axis" style="color:red">&#xe756;</i>
        <div class="layui-timeline-content layui-text">
          <div class="layui-timeline-title">过去</div>
        </div>
      </li>
    </ul>
     <!-- 引入layui中JS -->
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
    	//初始化layui模块
    	layui.use(['element','jquery'],function(){
    		var element = layui.element;
    		var $ = layui.jquery;
    	});
    </script>
    </body>
    </html>
    

    表单-form(重点)

    ​ 在layui中,layui不仅仅为表单提供了一套内置的样式.也为表单提供了一系列的操作的方法.

    样式:

    class="layui-form"表示该容器使用表单的样式.该样式,是表单中具体样式的基础.

    ​ |--- class="layui-form-item" : 表示表单中的具体项

    ​ |--- class="layui-form-label" : 表示表单项中label标签,文本说明

    ​ |--- class="layui-input-block" : 表示一个input容器,block块元素 占一行

    ​ |--- class="layui-input-inline" : 表示一个input容器,inline 行内块.不占一行

    ​ |--- class="layui-input" : 表示一个input标签

    ​ |--- class="layui-inline" : 表示不独占一行,一般用于一项中存在多个form元素,使用其包裹

    特殊样式:

    ​ 在layui中,对form表单中checkbox,radio,select的样式,做了特殊处理.使用javascript,根据原生input中的属性,进行渲染,重新生成了响应效果的DIV元素.并且生成的DIV元素与原生input标签存在属性值的绑定关系.

    复选框:

    属性名 说明
    title 显示的文字
    lay-skin 风格:默认 primary 原始复选框效果 switch: 开关形式
    checked 选中
    value 复选框值
    lay-text="文本1|文本2" 开关效果显示的文字

    单选按钮:

    属性名 说明
    title 显示的文字
    checked 选中
    value 复选框值

    下拉框:

    属性名 说明
    selected 选中
    lay-search 开启搜索效果

    form表单特殊属性:

    属性名 属性值 说明
    title 任意字符 设定元素名称,一般用于checkbox、radio框
    lay-skin switch(开关风格) primary(原始风格) 定义元素的风格,目前只对 checkbox 元素有效,可将其转变为开关样式
    lay-ignore 任意字符或不设值 是否忽略元素美化处理。设置后,将不会对该元素进行初始化渲染,即保留系统风格
    lay-filter 任意字符 事件过滤器,主要用于事件的精确匹配,跟选择器是比较类似的。其实它并不私属于form模块,它在 layui 的很多基于事件的接口中都会应用到。
    lay-verify email(邮箱)url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条规则的验证,格式:lay-verify="验证A|验证B" 如:lay-verify="required|phone|number" 另外,除了我们内置的校验规则,你还可以给他设定任意的值,比如lay-verify="pass",那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证
    lay-verType tips(吸附层) alert(对话框) msg(默认) 用于定义异常提示层模式。
    lay-reqText 任意字符 用于自定义必填项(即设定了 lay-verify="required" 的表单)的提示文本 注意:该功能为 layui 2.5.0 新增
    lay-submit 无需填写值 绑定触发提交的元素,如button

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body style="padding: 100px">
    
    	<form class="layui-form" action="">
    		<div class="layui-form-item">
    			<label class="layui-form-label">显示文字</label>
    			<!-- input 容器 这种是独占一行 -->
    			<div class="layui-input-block">
    				<input class="layui-input" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg"  lay-reqText="独占一行不能为空" />
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<div class="layui-inline">
    				<label class="layui-form-label">显示文字1</label>
    				<!-- input 容器 这种是独占一行 -->
    				<div class="layui-input-inline">
    					<input class="layui-input" lay-verify="number|username"  lay-verType="tips"/>
    				</div>
    			</div>
    			<div class="layui-inline">
    				<label class="layui-form-label">显示文字</label>
    				<!-- input 容器 这种是独占一行 -->
    				<div class="layui-input-inline">
    					<input class="layui-input" placeholder="显示的文字" />
    				</div>
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">复选框:</label>
    			<div class="layui-input-block">
    				<!-- 原始风格 -->
    				<input type="checkbox"  name="like[write]" title="写作" lay-skin="primary">
    				<!-- 开关风格 -->
          			<input type="checkbox" name="like[read]" lay-text="文本1|文本2" lay-skin="switch" checked>
          			<!-- 默认风格 -->
          			<input type="checkbox" name="like[dai]" title="发呆">
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">单选按钮:</label>
    			<div class="layui-input-block">
    				<input type="radio" name="sex" value="nan" title="男">
    				<input type="radio" name="sex" value="nv" title="女" checked>
    				<input type="radio" name="sex" value="" title="中性" disabled>
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">下拉框:</label>
    			<div class="layui-input-block">
    				<select name="city" lay-verify="" lay-search>
      					<option value="010">layer</option>
      					<option value="021">form</option>
      					<option value="0571" selected>layim</option>
    				</select>  
    			</div>
    		</div>
    		<button class="layui-btn" lay-submit >提交</button>		
    	</form>
    	<!-- 引入layui中JS -->
    	<script type="text/javascript" src="layui/layui.js"></script>
    	<script type="text/javascript">
    		//初始化layui模块
    		layui.use([ 'element', 'jquery', 'form' ], function() {
    			var element = layui.element;
    			var $ = layui.jquery;
    			var from = layui.form;
    			//自定义校验规则
    			from.verify({
    				username:function(value, item){
    					console.log(value);
    					if(value.length < 10){
    						 return '用户名不能少于10位';
    					}
    				}
    			});
    		});
    	</script>
    </body>
    </html>
    
    事件:
    事件类型 描述
    select 监听select下拉选择事件
    checkbox 监听checkbox复选框勾选事件
    switch 监听checkbox复选框开关事件
    radio 监听radio单选框事件
    submit 监听表单提交事件
    方法:
    方法名称 解释
    render() 重新渲染
    val() 获取或者为表单赋值

    示例:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入layui的css样式 -->
    <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body style="padding: 100px">
    	<form class="layui-form" action="http://www.baidu.com"  lay-filter="myForm">
    		<div class="layui-form-item">
    			<label class="layui-form-label">显示文字</label>
    			<!-- input 容器 这种是独占一行 -->
    			<div class="layui-input-block">
    				<input class="layui-input"  name="input1"  value="13111111111" placeholder="独占一行" lay-verify="required|phone" lay-verType="msg"  lay-reqText="独占一行不能为空" />
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<div class="layui-inline">
    				<label class="layui-form-label">显示文字1</label>
    				<!-- input 容器 这种是独占一行 -->
    				<div class="layui-input-inline">
    					<input class="layui-input" name="input2"  value="13111111111" lay-verify="number|username"  lay-verType="tips"/>
    				</div>
    			</div>
    			<div class="layui-inline">
    				<label class="layui-form-label">显示文字</label>
    				<!-- input 容器 这种是独占一行 -->
    				<div class="layui-input-inline">
    					<input class="layui-input" name="input3"  placeholder="显示的文字" />
    				</div>
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">复选框:</label>
    			<div class="layui-input-block">
    				<!-- 原始风格 -->
    				<input type="checkbox" lay-filter="formCheckbox"  value="写作" name="like[write]" title="写作" lay-skin="primary">
    				<!-- 开关风格 -->
          			<input type="checkbox" lay-filter="formCheckbox" value="文本" name="like[text]" lay-text="文本1|文本2" lay-skin="switch" checked>
          			<!-- 默认风格 -->
          			<input type="checkbox" lay-filter="formCheckbox" value="发呆" name="like[dai]" title="发呆">
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">单选按钮:</label>
    			<div class="layui-input-block">
    				<input type="radio" lay-filter="formRadio" name="sex" value="男" title="男">
    				<input type="radio" lay-filter="formRadio" name="sex" value="女" title="女" checked>
    				<input type="radio" lay-filter="formRadio" name="sex" value="" title="中性" disabled>
    			</div>
    		</div>
    		<div class="layui-form-item">
    			<label class="layui-form-label">下拉框:</label>
    			<div class="layui-input-block">
    				<select id="city" name="city"  lay-search   lay-filter="formSelect">
      					<option value="010">layer</option>
      					<option value="021">form</option>
      					<option value="0571" selected>layim</option>
    				</select>  
    			</div>
    		</div>
    		<button class="layui-btn"  lay-submit lay-filter="submitBtn">提交</button>		
    	</form>
    	<br>
    	<button class="layui-btn"  id="initForm">为表单初始化值</button>
    	<br>
    	<button class="layui-btn" id="addDom">为下拉框新增option</button>
    	<!-- 引入layui中JS -->
    	<script type="text/javascript" src="layui/layui.js"></script>
    	<script type="text/javascript">
    		//初始化layui模块
    		layui.use([ 'element', 'jquery', 'form' ], function() {
    			var element = layui.element;
    			var $ = layui.jquery;
    			var form = layui.form;
    			//自定义校验规则
    			form.verify({
    				username:function(value, item){
    					if(value.length < 10){
    						 return '用户名不能少于10位';
    					}
    				}
    			});
    		//==========监听下拉框选择事件===========	
    		//监听下拉框选择事件
    		form.on("select(formSelect)",function(data){
    			console.log(data);
    			console.log(data.elem); //得到select原始DOM对象
    			console.log(data.value); //得到被选中的值
    			console.log(data.othis); //得到美化后的DOM对象
    		});
    		//==========复选框选择事件:只支持原生风格  默认风格===========
    		form.on("checkbox(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 原生风格和默认风格
    			  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("switch(formCheckbox)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
    			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("radio(formRadio)",function(data){// checkbox(lay-filter): 每个checkbox上的lay-filter 并且只支持 开关风格
    			 console.log(data.elem); //得到radio原始DOM对象
    			 console.log(data.value); //被点击的radio的value值
    		});
    		//========监听表单提交=========
    		form.on('submit(submitBtn)',function(data){// submit(lay-filter值):lay-filter值是提交按钮上面
    			console.log(data);
    			console.log(data.field);
    			//阻止表单提交  因为表单提交后 会刷新页面.一般使用ajax提交表单数据,然后阻止表单提交.只有使用layui的表单提交才能触发数据校验.
    			//使用layui的表单提交事件,在事件中使用ajax提交数据,然后阻止表单提交,这样既可以使用layui的数据校验,也可以使用ajax的异步提交数据
    			return false;
    		});
    		//==========方法: 为表单初始化值:===========
    		$("#initForm").click(function(){
    			var data = {
    					'input1':'12345678911',
    					'input2':'12345678911',
    					'input3':'12345678911',
    					'like[write]': true,
    					'like[text]':true,
    					'like[dai]':true,
    					'sex':'女',
    					'city':'021'
    			};
    			form.val("myForm",data);//此时lay-filter值,是form表单上的lay-filter值
    			//得到form的值
    			console.log(form.val("myForm"));
    		});
    		//===========方法: 重新渲染表单============
    		$("#addDom").click(function(){
    			$("#city").append("<option value='option' >新增option</option>");
    			//重新渲染表单
    			form.render();
    		});
    	});
    	</script>
    </body>
    </html>
    

    表格-table(重点)

    ​ 在layui中,使用class="layui-table"表示表格的样式.表格分为静态表格和动态表格.静态表格是指页面固定数据写死的静态HTML标签.动态的表格是指使用Javascript自动渲染出来的表格.根据数据,以及特定属性渲染出响应的表格.

    表格基础参数

    参数 类型 说明 示例值
    elem String/DOM 指定原始 table 容器的选择器或 DOM,方法渲染方式必填 "#demo"
    cols Array 设置表头。值是一个二维数组。方法渲染方式必填 详见表头参数
    url(等) - 异步数据接口相关参数。其中 url 参数为必填项 详见异步接口
    toolbar String/DOM/Boolean 开启表格头部工具栏区域,该参数支持四种类型值:toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器toolbar: '
    xxx
    ' //直接传入工具栏模板字符toolbar: true //仅开启工具栏,不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板注意: 1. 该参数为 layui 2.4.0 开始新增。 2. 若需要“列显示隐藏”、“导出”、“打印”等功能,则必须开启该参数
    false
    defaultToolbar Array 该参数可自由配置头部工具栏右侧的图标按钮 详见头工具栏图标
    width Number 设定容器宽度。table容器的默认宽度是跟随它的父元素铺满,你也可以设定一个固定值,当容器中的内容超出了该宽度时,会自动出现横向滚动条。 1000
    height Number/String 设定容器高度 详见height
    cellMinWidth Number (layui 2.2.1 新增)全局定义所有常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth 100
    done Function 数据渲染完的回调。你可以借此做一些其它的操作 详见done回调
    data Array 直接赋值数据。既适用于只展示一页数据,也非常适用于对一段已知数据进行多页展示。 [{}, {}, {}, {}, …]
    totalRow Boolean 是否开启合计行区域。layui 2.4.0 新增 false
    page Boolean/Object 开启分页(默认:false) 注:从 layui 2.2.0 开始,支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外) {theme: '#c00'}
    limit Number 每页显示的条数(默认:10)。值务必对应 limits 参数的选项。 注意:优先级低于 page 参数中的 limit 参数 30
    limits Array 每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。 注意:优先级低于 page 参数中的 limits 参数 [30,60,90]
    loading Boolean 是否显示加载条(默认:true)。如果设置 false,则在切换分页时,不会出现加载条。该参数只适用于 url 参数开启的方式 false
    title String 定义 table 的大标题(在文件导出等地方会用到)layui 2.4.0 新增 "用户表"
    text Object 自定义文本,如空数据时的异常提示等。注:layui 2.2.5 开始新增。 详见自定义文本
    autoSort Boolean 默认 true,即直接由 table 组件在前端自动处理排序。 若为 false,则需自主排序,通常由服务端直接返回排序好的数据。 注意:该参数为 layui 2.4.4 新增 详见监听排序
    initSort Object 初始排序状态。用于在数据表格渲染完毕时,默认按某个字段排序。 详见初始排序
    id String 设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件,它是表格容器的索引,你在下文诸多地方都将会见识它的存在。 值得注意的是:从 layui 2.2.0 开始,该参数也可以自动从
    中的 id 参数中获取。
    test
    skin(等) - 设定表格各种外观、尺寸等 详见表格风格

    表头参数

    参数 类型 说明 示例值
    field String 设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识,其值是JSON数据中key username
    title String 设定标题名称,显示标题 用户名
    width Number/String 设定列宽,若不填写,则自动分配;若填写,则支持值为:数字、百分比 请结合实际情况,对不同列做不同设定。 200 30%
    minWidth Number 局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth 100
    type String 设定列类型。可选值有:normal(常规列,无需设定)checkbox(复选框列)radio(单选框列,layui 2.4.0 新增)numbers(序号列)space(空列) 任意一个可选值
    LAY_CHECKED Boolean 是否全选状态(默认:false)。必须复选框列开启后才有效,如果设置 true,则表示复选框默认全部选中。 true
    fixed String 固定列。可选值有:left(固定在左)、right(固定在右)。一旦设定,对应的列将会被固定在左或右,不随滚动条而滚动。 注意:如果是固定在左,该列必须放在表头最前面;如果是固定在右,该列必须放在表头最后面。 left(同 true) right
    hide Boolean 是否初始隐藏列,默认:false。layui 2.4.0 新增 true
    totalRow Boolean 是否开启该列的自动合计功能,默认:false。layui 2.4.0 新增 true
    totalRowText String 用于显示自定义的合计文本。layui 2.4.0 新增 "合计:"
    sort Boolean 是否允许排序(默认:false)。如果设置 true,则在对应的表头显示排序icon,从而对列开启排序功能。注意:不推荐对值同时存在“数字和普通字符”的列开启排序,因为会进入字典序比对。比如:'贤心' > '2' > '100',这可能并不是你想要的结果,但字典序排列算法(ASCII码比对)就是如此。 true
    unresize Boolean 是否禁用拖拽列宽(默认:false)。默认情况下会根据列类型(type)来决定是否禁用,如复选框列,会自动禁用。而其它普通列,默认允许拖拽列宽,当然你也可以设置 true 来禁用该功能。 false
    edit String 单元格编辑类型(默认不开启)目前只支持:text(输入框) text
    event String 自定义单元格点击事件名,以便在 tool 事件中完成对该单元格的业务处理 任意字符
    style String 自定义单元格样式。即传入 CSS 样式 background-color: #5FB878; color: #fff;
    align String 单元格排列方式。可选值有:left(默认)、center(居中)、right(居右) center
    colspan Number 单元格所占列数(默认:1)。一般用于多级表头 3
    rowspan Number 单元格所占行数(默认:1)。一般用于多级表头 2
    templet String 自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等 详见自定义模板
    toolbar String 行工具栏 详见行工具事件

    异步数据接口参数

    ​ 数据的异步请求由以下几个参数组成:

    参数名 功能
    url 接口地址。默认会自动传递两个参数:?page=1&limit=30(该参数可通过 request 自定义) page 代表当前页码、limit 代表每页数据量
    method 接口http请求类型,默认:get
    where 接口的其它参数。如:where: {token: 'sasasas', id: 123}
    contentType 发送到服务端的内容编码类型。如果你要发送 json 内容,可以设置:contentType: 'application/json'
    headers 接口的请求头。如:headers: {token: 'sasasas'}
    parseData 数据格式解析的回调函数,用于将返回的任意数据格式解析成 table 组件规定的数据格式.在layui中,默认规定返回3个字段: code,msg,count,data,并且默认code的值为0表示正常.其他值不正常.且data是一个数组.其他格式layui默认是无法解析.所以需要使用parseData函数进行适配.
    request 用于对分页请求的参数:page、limit重新设定名称,如:
    response 如果你想重新规定返回的数据格式,那么可以借助 response 参数,如:

    在layui中,渲染表格存在两种方式:

    方式一:自动渲染

    ​ 所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。你需要关注的是以下三点:

    1. 带有 class="layui-table" 标签。
    2. 对标签设置属性 lay-data="" 用于配置一些基础参数
  • 相关阅读:
    Hibernate的查询方式汇总
    JdbcTemplate详解
    spring读取数据库的配置信息(url、username、password)时的<bean>PropertyPlaceholderConfigurer的用法
    spring aop方式配置事务中的三个概念 pointcut advice advisor
    spring mvc静态资源请求和<mvc:annotation-driven>
    spring aop实现原理
    Spring 配置 事务的几种方式
    转!!常用的4种动态网页技术—CGI、ASP、JSP、PHP
    转! java 中“==” 与“ .equals ”比较
    mysql 批处理文件--- 创建 用户 以及 导入数据
  • 原文地址:https://www.cnblogs.com/lyang-a/p/11939156.html
Copyright © 2011-2022 走看看