layui学习笔记1

layui

样式:

layui-layout-admin:

layui-header:

layui-main:

一 简单使用

将下载后得到的layui文件夹整个的放在项目中

再引入

	<link rel="stylesheet" href="layui/css/layui.css">//你layui.css的路径
	<script src="layui/layui.js"></script>//你layui.js的路径

// layui.js 与 layui.all.js区别: layui.all.js就是包含了所有模块,如果你引用的是它,就不需要下面的调用模块,但一般不是所有模块都要用,引用layui.js即可.

调用模块:

//调用 layer , from 模块 ,弹出一个消息 'Hello World'
layui.use(['layer', 'form'], function() {
					var layer = layui.layer,
						form = layui.form;
					layer.msg('Hello World');
				});

图标:

<i class="layui-icon">&#xe6c9;</i>	
&#xe6c9;	即是图标对应的 unicode 字符
&amp;&#xe6c9; 显示'&#xe6c9;'

或者

<i class="layui-icon layui-icon-login-qq"></i>

按钮:

<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>

 <div class="layui-btn-group">	//按钮组
    <button type="button" class="layui-btn">增加</button>
    <button type="button" class="layui-btn ">编辑</button>
    <button type="button" class="layui-btn">删除</button>
  </div>

可选 主题,尺寸,颜色,圆角,图标

layui-btn-radius	//圆角
layui-btn-lg	//大型
layui-btn-sm	//小型
layui-btn-xs	//迷你

颜色:

• 赤色：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”

导航栏:

<ul class="layui-nav">
			<li class="layui-nav-item"><a href="">最新活动</a></li>
			<li class="layui-nav-item layui-this">
				<a href="javascript:;">产品</a>
				<dl class="layui-nav-child">
					<dd><a href="">选项1</a></dd>
					<dd><a href="">选项2</a></dd>
					<dd><a href="">选项3</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="">大数据</a></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 class="layui-this"><a href="">选中项</a></dd>
					<dd><a href="">电商平台</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="">社区</a></li>
		</ul>

要使导航栏动起来,必须加载element模块,即使什么也不做

layui.use(['element'], function() {
});

导航栏默认水平, 想使用垂直导航栏则加上 layui-nav-tree

layui-this 当前选中项

如果想将某子项靠右

style="float:right"

选项卡:

<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">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </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>

风格: 默认风格layui-tab 简约风格+ layui-tab-brief 卡片风格:layui-tab-card

layui-tab 代表选项卡

​ layui-tab-title 卡片的头

​ layui-tab-content 卡片内容

​ layui-tab-item 具体的卡片内容

​ layui-show 显示

layui-allowclose=“true” //允许删除选项卡的子项

layui-filter="" //过滤器,类似选择器

三 布局+面板:栅格系统

把每一行12等分.

layui-row 代表一行

layui-col-space15 //space 0~30 间距

​ layui-col-md6 //代表当前卡片占整行的12分之几

数据表格*

<table id="user" lay-filter="ueser-table"></table>

var tableObj = table.render({
			elem: '#user',//该表格绑定的元素
			url: '/layui/test.json', //数据接口				,
			cellMinWidth: 80, //每格最小宽度
			toolbar: '#toolheaderbar', //开启默认工具栏
			defaultToolbar: ['filter'],
			width: '100%',
			height: '554px',
			limit: 20,//每页显示多少行数据
			id: 'user',
			cols:[  //表头等格式{
				field: 'uid',//数据中对应项
				title: 'ID',//列名
				width: 80,
				sort: true,//排序
				align: 'center'//居中
			},
			],
			page,//开启分页
			parseData:function(res){}

table更新

//更新改行数据

table.on('tool(ueser-table)', function(obj) { //ueser-table table标签中lay-filter的值
	obj.updata({
​		字段:值
	})
}

layui中使用jquery

layui集成了jquery,它将jquer当做一个模块在使用

layui.use(['jquery'], function() {
					var $ = layui.jquery;
					$('.layui-btn').click(function(){
						alert($(this).html())
					});
				});