本文介绍 Layui 2.0 版本的更新内容与使用技巧，包括自定义样式的图标、按钮、表单元素，以及选项卡、时间轴等组件的应用示例。
前言：太久没做pc端，再次看到你，现在更新到2.0以后了，1年前还用的1.0.9版本，功能更新了不少，逻辑更加清晰简洁
做了一些组件运用测试demo展示，更多更详细的内容还是得花时间看文档。。。温故而知新。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1开始使用Layui组件</title>
<link rel="stylesheet" href="css/layui.css">
<style>
h2 {
font-size: 20px;
font-weight: 600;
}
h2:after {
content: "——————类别";
}
hr {
border-top: 2px solid red;
}
</style>
</head>
<body>
<h2>各种可设置颜色和大小的矢量icon图标及常规动画(动画时layui-anim是必须的)</h2>
<i class="layui-icon"></i>
<i class="layui-icon" style="color: red;font-size: 30px;"></i>
<i class="layui-icon" style="color: #024;font-size: 40px;">ဂ</i>
<i class="layui-icon layui-anim layui-anim-rotate " style="color: #024;font-size: 40px;">ဂ</i>
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="color: #024;font-size: 40px;">ဂ</i>
<i class="layui-icon layui-anim layui-anim-up" style="color: #024;font-size: 40px;">ဂ</i>
<i class="layui-icon layui-anim layui-anim-scaleSpring" style="color: #024;font-size: 40px;">ဂ</i>
<hr />
<h2>各种可重置颜色的单按钮.按钮组.有间距的按钮组</h2>
<button class="layui-btn"><i class="layui-icon"></i> 添加</button>
<button class="layui-btn" style="background: red;"><i class="layui-icon">ဂ</i></button>
<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 "></i>
</button>
<button class="layui-btn layui-btn-sm ">
<i class="layui-icon "></i>
</button>
<button class="layui-btn layui-btn-sm">
<i class="layui-icon"></i>
</button>
</div>
<div class="layui-btn-container">
<button class="layui-btn">按钮一</button>
<button class="layui-btn">按钮二</button>
<button class="layui-btn">有间距的</button>
<button class="layui-btn">按钮组</button>
</div>
<hr />
<h2>多表单时，提交按钮的lay-filter="aaa"应更换lay-filter="bbb"(另一个表单)更多样式请参考文档。。。</h2>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" 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" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</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-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" 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="checkbox" name="switch" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<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>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="aaa">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<span style="font-weight: 600;">下拉项要放置表单里（测试）</span>
<span>预留“请选择”的提示空间</span>
<select name="city" lay-verify="">
<option value="">请选择</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
<span>带搜索的下拉</span>
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
</form>
<hr />
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;">最新活动</a>
</li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">大数据</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</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>
<li class="layui-nav-item">
<a href="javascript:;">社区</a>
</li>
</ul>
<hr />
<h2>选项卡获得下标</h2>
<div class="layui-tab" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</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>
</div>
<hr />
<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>
<script></script>
<script src="layui.js"></script>
<script>
// form表单
layui.use('form', function() {
var form = layui.form;
//监听提交
form.on('submit(aaa)', function(data) {
console.log(JSON.stringify(data.field));
return false;
});
});
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function() {
var element = layui.element;
element.on('tab(demo)', function(data) {
console.log(data)
})
});
</script>
</body>
</html>
扫一扫
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
