朱能源做网站/淘宝流量平台
前言:太久没做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>