layui是什么?
layui是一个适用于后端人员的一个前端框架工具集,其中封装了前端常用DOM标签的css样式,简单 容易上手,区别于那些基于 MVVM 底层的 UI 框架,回归到原生HTML/css/js本身,其简单的模块 化,避开了很多前端工具的复杂配置,拿来即用
官网传送门:
layui-doc.pearadmin.com/doc/index.h…
layui是什么?
layui有哪些内容?
底层方法
layui.define()
layui.use()
layui.define()
1 layui.define()方法用于拓展layui模块,也就是自定义模块
2 那如何自定义模块呢?
3 1、确认模块名,举个例子:我们要添加一个“father”模块,然后我们要新建一个father.js,
4 文件储存位置不具要求;按你喜欢的来就行。
5 2、编写father.js文件内容,代码如下:
6 layui.define(function(exports){
7 //提示:模块也可以依赖其它模块,如:layui.define('layer', callback);
8 var obj = {
9 hello: function(str){
10 alert((str||'father')+",I am you Father!");
11 }
12 };
13
14 //输出test接口
15 exports('father', obj);
16 });
17 3、在别的文件中使用自定义模块,代码如下:
18 //config的设置是全局的
19 layui.config({
20 base: '/res/js/' //假设这是你存放拓展模块的根目录
21 }).extend({ //设定模块别名
22 father: 'father' //如果 mymod.js 是在根目录,也可以不用设定别名
23 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
24 });
25
26 //你也可以忽略 base 设定的根目录,直接在 extend 指定路径(主要:该功能为layui 2.2.0 新增)
27 layui.extend({
28 mod2: '{/}http://cdn.xxx.com/lib/mod2'
29 //{/}的意思即代表采用自有路径,即不跟随 base 路径
30 })
31
32 //使用拓展模块
33 layui.use(['father', 'mod1'], function(){
34 var father = layui.father
35 ,mod1 = layui.mod1
36 ,mod2 = layui.mod2;
37
38 father.hello('张三'); //弹出 张三,I am you Father!
39 });
40
41
layui.use()
1 layui.use()方法是预加载模块的方法
2 使用方法如下:
3 layui.use(['layer','table'],function(){
4 ver layer=layui.layer //加载layer弹窗模块
5 ver table=layui.table //加载table表格模块
6 //使用layer弹窗模块
7 layer.msg("我是弹窗中的信息弹框")
8
9 //使用table表格模块
10 table.render({
11 ···· //代码
12 })
13 })
14
页面元素 其中元素包括:
1、布局(栅格、后台)
1 栅格的布局规则:
2 行:用layui-row来定义,比如:<div class="layui-row"></div>
3
4 列:用layui-col来定义同一行的列,注意要在同一个layui-row中定义,否则不显示在同一行中,会出现布局混乱
5
6 列的布局大小可以由以下四个类型组合:xs(超小屏幕,如手机),sm(小屏幕,如平板电脑),
md(桌面中等屏幕),lg(桌面大型屏幕)
7 例如:
8 <div class="layui-row">
9 <div class="layui-col-md4">
10 4/12
11 </div>2、颜色
12 </div>
13
14 列的间距用layui-col-space* 来控制,“*”支持列之间为 1-30 区间的所有双数,以及 1、5、15、25的单数
15
16 列的偏移用layui-col-md-offset*来控制,“*”选择的范围是1-12之间,因为layui-col将一行分为12份
17
18 栅格也可以进行无限套娃,就是栅格中再套栅格
2、颜色
1 这一块的元素我觉得是非常好理解的,就是layui把经典的简约颜色都已经设定好了,只要用class引用就行了
2 封装好的颜色有:
3 赤色:class="layui-bg-red"
4 橙色:class="layui-bg-orange"
5 墨绿:class="layui-bg-green"
6 藏青:class="layui-bg-cyan"
7 蓝色:class="layui-bg-blue"
8 雅黑:class="layui-bg-black"
9 银灰:class="layui-bg-gray"
3、字体图标
1 首先说图标的引用吧:
2 对一个内联元素(一般推荐用 i标签)设定 class="layui-icon",来定义一个图标
3 用法是:<i class="layui-icon layui-icon-face-smile"></i>
4 如果对它的默认属性不满意,也可以替换属性:
5 你可以去定义它的颜色或者大小,如:
6 <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>
内置图标库一共是有168个,查看传送门:
layui-doc.pearadmin.com/doc/element…
4、动画
1 动画的引用非常简单,只要在class中表明即可
2 其中 layui-anim 是必须的,后面跟着的即是不同的动画类
3 <div class="layui-anim layui-anim-up"></div>
4
5 循环动画,追加:layui-anim-loop
6 <div class="layui-anim layui-anim-up layui-anim-loop"></div>
7
8 内置的动画一览:
9 从最底部往上滑入
10 layui-anim-up
11
12 微微往上滑入
13 layui-anim-upbit
14
15 平滑放大
16 layui-anim-scale
17
18 弹簧式放大
19 layui-anim-scaleSpring
20
21 渐现
22 layui-anim-fadein
23
24 渐隐
25 layui-anim-fadeout
26
27 360度旋转
28 layui-anim-rotate
29
30 循环动画
31 追加:layui-anim-loop
32
5、按钮
1 在网页中,按钮也是一个非常重要的组件,layui怎么可能少了它呢
2
3 在layui中,只要你在网页元素标签中用class声明layui-btn,都可将该元素变成按钮
4 例如:
5 <button type="button" class="layui-btn layui-btn-normal">测试</button> //本身
6 <a href="javascript:void(0);" class="layui-btn layui-btn-normal">测试二</a> //div变成了按钮
7
8 按钮的主题样式一共有6种:
9 原始(纯白) class="layui-btn layui-btn-primary"
10 默认(橄榄绿) class="layui-btn"
11 百搭(蓝色) class="layui-btn layui-btn-normal"
12 暖色(暖黄色) class="layui-btn layui-btn-warm"
13 警告(橙色) class="layui-btn layui-btn-danger"
14 禁用(灰白不可点击) class="layui-btn layui-btn-disabled"15
16 按钮的尺寸大小:
17 大型 class="layui-btn layui-btn-lg"
18 默认 class="layui-btn"
19 小型 class="layui-btn layui-btn-sm"
20 迷你 class="layui-btn layui-btn-xs"
21
22 大型百搭 class="layui-btn layui-btn-lg layui-btn-normal"
23 正常暖色 class="layui-btn layui-btn-warm"
24 小型警告 class="layui-btn layui-btn-sm layui-btn-danger"
25 迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled"
26
27 流体按钮的最大化适应:
28 <button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
29
30 按钮的圆角:
31 原始 class="layui-btn layui-btn-radius layui-btn-primary"
32 默认 class="layui-btn layui-btn-radius"
33 百搭 class="layui-btn layui-btn-radius layui-btn-normal"
34 暖色 class="layui-btn layui-btn-radius layui-btn-warm"
35 警告 class="layui-btn layui-btn-radius layui-btn-danger"
36 禁用 class="layui-btn layui-btn-radius layui-btn-disabled"
37
38 大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
39 小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
40 迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"
41
42 结合上面的图标,就可以形成图标按钮了,请看实例:
43 <button type="button" class="layui-btn">
44 <i class="layui-icon"></i> 添加
45 </button>
46
47 <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
48 <i class="layui-icon">ဂ</i>
49 </button>
50
51 按钮组:将按钮放入一个class="layui-btn-group"元素中,即可形成按钮组,按钮本身仍然可以随意搭配
52 文字版按钮组:
53 <div class="layui-btn-group">6、表单
54 <button type="button" class="layui-btn">增加</button>
55 <button type="button" class="layui-btn">编辑</button>
56 <button type="button" class="layui-btn">删除</button>
57 </div>
58
59 图标版按钮组:
60 <div class="layui-btn-group">
61 <button type="button" class="layui-btn layui-btn-sm">
62 <i class="layui-icon"></i>
63 </button>
64 <button type="button" class="layui-btn layui-btn-sm">
65 <i class="layui-icon"></i>
66 </button>
67 <button type="button" class="layui-btn layui-btn-sm">
68 <i class="layui-icon"></i>
69 </button>
70 <button type="button" class="layui-btn layui-btn-sm">
71 <i class="layui-icon"></i>
72 </button>
73 </div>
74
75 在按钮太多的时候也会挺烦恼的,按钮间距啊,很令人头疼,这时layui也有解决办法:
76 按钮容器!它会自动给你的按钮进行排版
77 <div class="layui-btn-container">
78 <button type="button" class="layui-btn">按钮一</button>
79 <button type="button" class="layui-btn">按钮二</button>
80 <button type="button" class="layui-btn">按钮三</button>
81 </div>
82
6、表单
1 1、简单的输入框样式
2 <input type="text" name="title" required lay-verify="required"
3 placeholder="请输入标题" autocomplete="off" class="layui-input">
4 // required:注册浏览器所规定的必填字段
5 // lay-verify:注册form模块需要验证的类型
6 // class="layui-input":layui.css提供的通用CSS类
7
8 2、普通下拉框
9 <select name="city" lay-verify="">
10 <option value="">请选择一个城市</option>
11 <option value="010">北京</option>
12 <option value="021">上海</option>
13 <option value="0571">杭州</option>
14 </select>
1516 3、分组下拉框
17 //通过 optgroup 标签给select分组
18 <select name="quiz">
19 <option value="">请选择</option>
20 <optgroup label="城市记忆">
21 <option value="你工作的第一个城市">你工作的第一个城市?</option>
22 </optgroup>
23 <optgroup label="学生时代">
24 <option value="你的工号">你的工号?</option>
25 <option value="你最喜欢的老师">你最喜欢的老师?</option>
26 </optgroup>
27 </select>
28
29 4、带搜索功能的下拉框
30 <select name="city" lay-verify="" lay-search>
31 <option value="010">layer</option>
32 <option value="021">form</option>
33 <option value="0571" selected>layim</option>
34 ……
35 </select>
36
37 //属性selected可设定默认项
38 //属性disabled开启禁用,select和option标签都支持
39
40
41
1 layui之复选框样式:
2
3 默认风格:
4 <input type="checkbox" name="" title="写作" checked>
5 <input type="checkbox" name="" title="发呆">6 <input type="checkbox" name="" title="禁用" disabled>
7 原始风格:
8 <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
9 <input type="checkbox" name="" title="发呆" lay-skin="primary">
10 <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
11
12 //属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
13 //属性checked可设定默认选中
14 //属性lay-skin可设置复选框的风格
15 //设置value="1"可自定义值,否则选中时返回的就是默认的on
16
1 layui复选框的衍生之一:开关
2 通过设定 lay-skin="switch" 形成了开关风格
3 属性checked可设定默认开
4 属性disabled开启禁用
5 属性lay-text可自定义开关两种状态的文本
6 设置value="1"可自定义值,否则选中时返回的就是默认的on
7
8 <input type="checkbox" name="xxx" lay-skin="switch">
9 <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
10 <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
11 <input type="checkbox" name="aaa" lay-skin="switch" disabled>
12
13
1 单选框:
2 属性title可自定义文本
3 属性disabled开启禁用
4 设置value="xxx"可自定义值,否则选中时返回的就是默认的on
5 <input type="radio" name="sex" value="nan" title="男">
6 <input type="radio" name="sex" value="nv" title="女" checked>
7 <input type="radio" name="sex" value="" title="中性" disabled>
1 网页的文本域样式
2 class="layui-textarea":layui.css提供的通用CSS类
3 <textarea name="" required lay-verify="required" placeholder="请输入"
4 class="layui-textarea"></textarea>
1 组装行内表单:
2 样式:
3 class="layui-inline":定义外层行内
4 class="layui-input-inline":定义内层行内
56 <div class="layui-form-item">
7
8 <div class="layui-inline">
9 <label class="layui-form-label">范围</label>
10 <div class="layui-input-inline" style="width: 100px;">
11 <input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
12 </div>
13 <div class="layui-form-mid">-</div>
14 <div class="layui-input-inline" style="width: 100px;">
15 <input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">
16 </div>
17 </div>
18
19 <div class="layui-inline">
20 <label class="layui-form-label">密码</label>
21 <div class="layui-input-inline" style="width: 100px;">
22 <input type="password" name="" autocomplete="off" class="layui-input">
23 </div>
24 </div>
25
26 </div>
1 通过追加 layui-form-pane 的class,来设定表单的方框风格。内部结构不变
2
3 <form class="layui-form layui-form-pane" action="">
4 内部结构都一样,值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性(否则会看起来比较别扭),如:
5 <div class="layui-form-item" pane>
6 <label class="layui-form-label">单选框</label>
7 <div class="layui-input-block">
8 <input type="radio" name="sex" value="男" title="男">
9 <input type="radio" name="sex" value="女" title="女" checked>
10 </div>
11 </div>
12 </form>
7、导航
水平导航栏:
1 上图的结构:
2 <ul class="layui-nav" lay-filter="">
3 <li class="layui-nav-item"><a href="">最新活动</a></li>
4 <li class="layui-nav-item layui-this"><a href="">产品</a></li>
5 <li class="layui-nav-item"><a href="">大数据</a></li>
6 <li class="layui-nav-item">
7 <a href="javascript:;">解决方案</a>
8 <dl class="layui-nav-child"> <!-- 二级菜单 -->
9 <dd><a href="">移动模块</a></dd>
10 <dd><a href="">后台模版</a></dd>
11 <dd><a href="">电商平台</a></dd>
12 </dl>
13 </li>
14 <li class="layui-nav-item"><a href="">社区</a></li>
15 </ul>
16
17 <script>
18 //注意:导航 依赖 element 模块,否则无法进行功能性操作
19 layui.use('element', function(){
20 var element = layui.element;
21
22 //…
23 });
24 </script>
1 上图的结构代码:
2 <ul class="layui-nav">
3 <li class="layui-nav-item">
4 <a href="">控制台<span class="layui-badge">9</span></a>
5 </li>
6 <li class="layui-nav-item">
7 <a href="">个人中心<span class="layui-badge-dot"></span></a>
8 </li>
9 <li class="layui-nav-item">
10 <a href=""><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ba775e3a7ee4edb8d2896e0cbaaeff6~tplv-k3u1fbpfcp-zoom-1.image" class="layui-nav-img">我</a>
11 <dl class="layui-nav-child">
12 <dd><a href="javascript:;">修改信息</a></dd>
13 <dd><a href="javascript:;">安全管理</a></dd>
14 <dd><a href="javascript:;">退了</a></dd>
15 </dl>
16 </li>
导航栏的主题颜色
1 举个栗子:
2 //如定义一个墨绿背景色的导航
3 <ul class="layui-nav layui-bg-green" lay-filter="">
4 …
5 </ul>
6
垂直/侧边导航栏
1 上图结构代码:
2 <!-- 垂直导航需要追加class:layui-nav-tree
3 侧边导航需要追加class:layui-nav-tree layui-nav-side -->
4
5
6 <ul class="layui-nav layui-nav-tree" lay-filter="test">
7 <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
8 <li class="layui-nav-item layui-nav-itemed">
9 <a href="javascript:;">默认展开</a>
10 <dl class="layui-nav-child">
11 <dd><a href="javascript:;">选项1</a></dd>
12 <dd><a href="javascript:;">选项2</a></dd>
13 <dd><a href="">跳转</a></dd>
14 </dl>
15 </li>
16 <li class="layui-nav-item">
17 <a href="javascript:;">解决方案</a>
18 <dl class="layui-nav-child">
19 <dd><a href="">移动模块</a></dd>
20 <dd><a href="">后台模版</a></dd>
21 <dd><a href="">电商平台</a></dd>
22 </dl>
23 </li>
24 <li class="layui-nav-item"><a href="">产品</a></li>
25 <li class="layui-nav-item"><a href="">大数据</a></li>
26 </ul>
面包屑:
1 上图代码
2
3 <span class="layui-breadcrumb">
4 <a href="">首页</a>
5 <a href="">国际新闻</a>
6 <a href="">亚太地区</a>
7 <a><cite>正文</cite></a>
8 </span>
9
10 还可以通过设置属性 lay-separator="-" 来自定义分隔符
11 如: 首页- 国际新闻- 亚太地区- 正文
12
13 <span class="layui-breadcrumb" lay-separator="-">
14 <a href="">首页</a>
15 <a href="">国际新闻</a>
16 <a href="">亚太地区</a>
17 <a><cite>正文</cite></a>
18 </span>
面包屑--->>>小导航栏:
1 <span class="layui-breadcrumb" lay-separator="|">
2 <a href="">娱乐</a>
3 <a href="">八卦</a>
如:<li class="layui-navitem" lay-unselect>刷新</li>4 <a href="">体育</a>
5 <a href="">搞笑</a>
6 <a href="">视频</a>
7 <a href="">游戏</a>
8 <a href="">综艺</a>
9 </span>
8、选项卡
默认的选项卡风格:
1 默认风格代码:
2 <div class="layui-tab">
3 <ul class="layui-tab-title">
4 <li class="layui-this">网站设置</li>
5 <li>用户管理</li>
6 <li>权限分配</li>
7 <li>商品管理</li>
8 <li>订单管理</li>
9 </ul>
10 <div class="layui-tab-content">
11 <div class="layui-tab-item layui-show">内容1</div>
12 <div class="layui-tab-item">内容2</div>
13 <div class="layui-tab-item">内容3</div>
14 <div class="layui-tab-item">内容4</div>
15 <div class="layui-tab-item">内容5</div>
16 </div>17 </div>
18
19 <script>
20 //注意:选项卡 依赖 element 模块,否则无法进行功能性操作
21 layui.use('element', function(){
22 var element = layui.element;
23
24 //…
25 });
26 </script>
27
1 简洁风格代码:
2 简洁风格代码:
<!-- 通过追加class:layui-tab-brief 来设定简洁风格。 值得注意的是,如果存在 layui-tab-item 的
内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。 你通常需要设置
过滤器,通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】-->
5 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
6 <ul class="layui-tab-title">
7 <li class="layui-this">网站设置</li>
8 <li>用户管理</li>
9 <li>权限分配</li>
10 <li>商品管理</li>
11 <li>订单管理</li>
12 </ul>
13 <div class="layui-tab-content"></div>
14 </div>
1 卡片风格代码:
2 <!-- 通过追加class:layui-tab-card来设定卡片风格-->
3 <div class="layui-tab layui-tab-card">
4 <ul class="layui-tab-title">
5 <li class="layui-this">网站设置</li>
6 <li>用户管理</li>
7 <li>权限分配</li>
8 <li>商品管理</li>
9 <li>订单管理</li>
10 </ul>
11 <div class="layui-tab-content" style="height: 100px;">
12 <div class="layui-tab-item layui-show">1</div>
13 <div class="layui-tab-item">2</div>
14 <div class="layui-tab-item">3</div>
15 <div class="layui-tab-item">4</div>
16 <div class="layui-tab-item">5</div>
17 <div class="layui-tab-item">6</div>
18 </div>
19 </div>1 所有风格都支持响应式
1 可删除式风格:
2 <!-- 设置属性 lay-allowClose="true" 来允许Tab选项卡被删除-->
3 <div class="layui-tab" lay-allowClose="true">
4 <ul class="layui-tab-title">
5 <li class="layui-this">网站设置</li>
6 <li>用户基本管理</li>
7 <li>权限分配</li>
8 <li>全部历史商品管理文字长一点试试</li>
9 <li>订单管理</li>
10 </ul>
11 <div class="layui-tab-content">
12 <div class="layui-tab-item layui-show">1</div>
13 <div class="layui-tab-item">2</div>
14 <div class="layui-tab-item">3</div>
15 <div class="layui-tab-item">4</div>
16 <div class="layui-tab-item">5</div>
17 <div class="layui-tab-item">6</div>
18 </div>
19 </div>
9、进度条
1 应用的也是背景色公共类
2 <!-- 属性 lay-percent :代表进度条的初始百分比,你也可以动态改变进度-->
3 <div class="layui-progress">
4 <div class="layui-progress-bar" lay-percent="10%"></div>
5 </div>
6
7 <script>
8 //注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作
9 layui.use('element', function(){
10 var element = layui.element;
11 });
12 </script>
13
14 不仅仅是满足于进度条的初始化显示,通常情况下你需要动态改变它的进度值,
element模块提供了这样的基础方法:element.progress(filter, percent);。
15 <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
16 <div class="layui-progress-bar" lay-percent="0%"></div>
17 </div>
18
19 上述是一个已经设置了过滤器(lay-filter="demo")的进度条
20 现在你只需要在某个事件或者语句中执行方法:element.progress('demo', '50%');
21 即可改变进度
1 进度条文本的显示:
2 当对元素设置了class为 layui-progress-big 时,即为大尺寸的进度条风格。
默认风格的进度条的百分比如果开启,会在右上角显示,而大号进度条则会在内部显示。
通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示,
支持:普通数字、百分数、分数(layui 2.1.7 新增) 注意:默认情况下不会显示百分比文本,
如果你想开启,对属性lay-showPercent设置任意值即可,如:yes。但如果不想显示,
千万别设置no或者false,直接剔除该属性即可。
5
6 <div class="layui-progress" lay-showPercent="true">
7 <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
8 </div>
9
10 <div class="layui-progress" lay-showPercent="yes">
11 <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
12 </div>
13
14 <div class="layui-progress layui-progress-big" lay-showPercent="yes">
15 <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
16 </div>
1 当对元素设置了class为 layui-progress-big 时,即为大尺寸的进度条风格。
默认风格的进度条的百分比如如果开启,会在右上角显示,而大号进度条则会在内部显示。
2 <div class="layui-progress layui-progress-big">
3 <div class="layui-progress-bar" lay-percent="20%"></div>
4 </div>
5
6 <div class="layui-progress layui-progress-big">
7 <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
8 </div>
9
10 <div class="layui-progress layui-progress-big" lay-showPercent="true">
11 <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
12 </div>
13
14
10、面板
1 卡片面板结构代码:
2 <div class="layui-card">
3 <div class="layui-card-header">卡片面板</div>
4 <div class="layui-card-body">
5 卡片式面板面板通常用于非白色背景色的主体内<br>
6 从而映衬出边框投影
7 </div>
8 </div>
1 通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板,element 模块会自动呈现状态图标
2
3 <div class="layui-collapse">
4 <div class="layui-colla-item">
5 <h2 class="layui-colla-title">杜甫</h2>
6 <div class="layui-colla-content layui-show">内容区域</div>7 </div>
8 <div class="layui-colla-item">
9 <h2 class="layui-colla-title">李清照</h2>
10 <div class="layui-colla-content layui-show">内容区域</div>
11 </div>
12 <div class="layui-colla-item">
13 <h2 class="layui-colla-title">鲁迅</h2>
14 <div class="layui-colla-content layui-show">内容区域</div>
15 </div>
16 </div>
17
18 <script>
19 //注意:折叠面板 依赖 element 模块,否则无法进行功能性操作
20 layui.use('element', function(){
21 var element = layui.element;
22
23 //…
24 });
25 </script>
26
27
1 折叠面板的升级版:手风琴版
2 在折叠面板的父容器设置属性 lay-accordion 来开启手风琴,那么在进行折叠操作时,始终只会展现当前的面板。
3
5 <div class="layui-collapse" lay-accordion>
6 <div class="layui-colla-item">
7 <h2 class="layui-colla-title">杜甫</h2>
8 <div class="layui-colla-content layui-show">内容区域</div>
9 </div>
10 <div class="layui-colla-item">
11 <h2 class="layui-colla-title">李清照</h2>
12 <div class="layui-colla-content layui-show">内容区域</div>
13 </div>
14 <div class="layui-colla-item">
15 <h2 class="layui-colla-title">鲁迅</h2>
16 <div class="layui-colla-content layui-show">内容区域</div>
17 </div>
18 </div>
11、徽章
速览:徽章风格:
1 徽章样式:
2 小圆点,通过 layui-badge-dot 来定义,里面不能加文字
3 <span class="layui-badge-dot"></span>
4 <span class="layui-badge-dot layui-bg-orange"></span>
5 <span class="layui-badge-dot layui-bg-green"></span>
6 <span class="layui-badge-dot layui-bg-cyan"></span>
7 <span class="layui-badge-dot layui-bg-blue"></span>
8 <span class="layui-badge-dot layui-bg-black"></span>
9 <span class="layui-badge-dot layui-bg-gray"></span>
10
11 椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
12 <span class="layui-badge">6</span>
13 <span class="layui-badge">99</span>
14 <span class="layui-badge">61728</span>
15
16 <span class="layui-badge">赤</span>
17 <span class="layui-badge layui-bg-orange">橙</span>
18 <span class="layui-badge layui-bg-green">绿</span>
19 <span class="layui-badge layui-bg-cyan">青</span>
20 <span class="layui-badge layui-bg-blue">蓝</span>
21 <span class="layui-badge layui-bg-black">黑</span>
22 <span class="layui-badge layui-bg-gray">灰</span>
23
24 边框体,通过 layui-badge-rim 来定义
25 <span class="layui-badge-rim">6</span>
26 <span class="layui-badge-rim">Hot</span>
将徽章与其他元素进行搭配:
1 与按钮相结合:
2 <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
3 <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
导航栏:
1
2 <ul class="layui-nav" style="text-align: right;">
<-- 小Tips:这里有没有发现,设置导航靠右对齐(或居中对齐)其实非常简单 -->
3 <li class="layui-nav-item">
4 <a href="">控制台<span class="layui-badge">9</span></a>
5 </li>
6 <li class="layui-nav-item">
7 <a href="">个人中心<span class="layui-badge-dot"></span></a>
8 </li>
9 </ul>
选项卡:
1 <!-- 选项卡的所有风格皆可用 -->
2 <div class="layui-tab layui-tab-brief">
3 <ul class="layui-tab-title">
4 <li class="layui-this">网站设置</li>
5 <li>用户管理<span class="layui-badge-dot"></span></li>
6 <li>最新邮件<span class="layui-badge">99+</span></li>
7 </ul>
8 <div class="layui-tab-content"></div>
9 </div>
12、时间线
图标可以任意定义(但并不推荐更改)
标题区域并不意味着一定要加粗
内容区域可自由填充。
上图代码:
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></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"></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"></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"></i>
<div class="layui-timeline-content layui-text">
<div class="layui-timeline-title">过去</div>
</div>
</li>
</ul>