layui框架的试用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./layui/css/layui.css"> <script type="text/javascript" src="./layui/layui.js"></script> <title>www</title></head><body> <div style="height: 50px; line-height: 50px;color:#fff; background-color: #000; padding: 0 20px;"> <span style="color: #fff;">后台管理</span> <div style="float: right; color: #fff;"> <span><i class="layui-icon layui-icon-username"></i>admin</span> <span><a href="" style="color: #fff;">退出</a></span> </div> </div> <!-- left --> <div style="width:150px;float: left;"> <div class="layui-collapse" lay-accordion> <div class="layui-colla-item"> <h2 class="layui-colla-title">管理员管理</h2> <div class="layui-colla-content layui-show">管理员</div> <div class="layui-colla-content">普通会员</div> <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 class="layui-colla-item"> <h2 class="layui-colla-title">商品管理</h2> <div class="layui-colla-content">内容区域</div> </div> </div> </div> <!-- 中间栏 --> <div style="float:right; width: 1400px; height: 600px;"> <iframe style="width: 100%; height:100%;" frameborder="0" src="./table.html"></iframe> </div></body></html><script> //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… });</script>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./layui/css/layui.css"> <script type="text/javascript" src="./layui/layui.js"></script> <title>Document</title></head><body style="background-color: rgb(228, 227, 227);"> <div style="padding: 20px;"> <div class="layui-progress"> <div class="layui-progress-bar layui-bg-red" lay-percent="50%"> </div> </div> </div> <div class="layui-row"> <div class="layui-col-sm4"> <div class="layui-card"> <div class="layui-card-header"> 卡片 </div> <div class="layui-card-body"> 卡片是变法全文请问耦合器of好气哦和哈佛年会是打发 器of好气哦和哈佛年会是打发 </div> </div> </div> <div class="layui-col-sm4"> <div class="layui-card"> <div class="layui-card-header"> 卡片 </div> <div class="layui-card-body"> 卡片是变法全文请问耦合器of好气哦和哈佛年会是打发 器of好气哦和哈佛年会是打发 </div> </div> </div> <div class="layui-col-sm4"> <div class="layui-card"> <div class="layui-card-header"> 卡片 </div> <div class="layui-card-body"> 卡片是变法全文请问耦合器of好气哦和哈佛年会是打发 器of好气哦和哈佛年会是打发 </div> </div> </div> </div> <table class="layui-table" lay-skin="" lay-size="sm"> <thead> <tr> <th>名称</th> <th>时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>闲心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>闲心2</td> <td>2016-11-29</td> <td>人生就像是一场修行2</td> </tr> <tr> <td>闲心3</td> <td>2016-11-29</td> <td>人生就像是一场修行3</td> </tr> </tbody> </table> <button class="layui-btn" onclick="popo()">提交</button> <div class="layui-form"> <div class="layui-form-item"> <label for="" class="layui-form-label">开始时间</label> <div class="layui-input-inline"> <input type="text" class="layui-input" id="mydate"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">开始时间</label> <div class="layui-input-inline"> <input type="file" class="layui-icon"> </div> </div> </div> <div class="layui-carousel" id="test1"> <div carousel-item> <div>条目1</div> <div>条目2</div> <div>条目3</div> <div>条目4</div> <div>条目5</div> </div> </div></body></html><script> layui.use(['element','layer','laydate','carousel'],function(){ var element=layui.element; layer=layui.layer; laydate = layui.laydate; laydate.render({ elem:'#mydate' }); var carousel = layui.carousel; carousel.render({ elem:'#test1',width:'100%',arrow:'always' }); }); function popo(){ // layer.alert("测试",{icon:1}); layer.msg("测试",{icon:2}); layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './mian.html' //iframe的url }); }</script>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./layui/css/layui.css"> <script src="./layui/layui.js"></script> <title>Document</title> <style> .layui-form-item .layui-input-inline{ width: 300px; } </style></head><body> <div class="layui-form"> <div class="layui-form-item"> <label for="" class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="" class="layui-input" placeholder="请输入"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" name="" class="layui-input" placeholder="密码"> </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-inline"> <select name="city" lay-filter="test" lay-skin="select"> <option value="">请选择</option> <option value="0">北京</option> <option value="1" disabled>上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> </div> <div name="city" class="layui-input-inline"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">复选框</label> <div class="layui-form-block"> <input type="checkbox" name="" title="写作" checked> <input type="checkbox" name="" title="发呆"> <input type="checkbox" name="" title="禁用" disabled lay-skin="primary"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">开关</label> <div class="layui-input-block"> <input type="checkbox" value="open" lay-filter="test" lay-skin="switch" lay-text="on|off"> </div> </div> <div class="layui-form-item"> <label for="" class="layui-form-label">性别</label> <div class="layui-form-block"> <input type="radio" name="sex" value="0" title="男" checked> <input type="radio" name="sex" value="1" title="女"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">请填写描述</label> <div class="layui-input-inline"> <textarea 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="*">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> <button class="layui-btn layui-btn-danger" onclick="closew()">关闭窗口</button></body></html><script> layui.use(['form'],function(){ form= layui.form; $=layui.jquery; form.on('select(test)',function(data){ // console.log(data.value); if(data.value==3){ var citys=['不知道','不清楚','不了解']; var html = "<select>"; $.each(citys,function(i,v){ html+=('<option>'+v+'</option)'); }); html += '</select>'; $('div[name="city"]').html(html); form.render(); } }); form.on('switch(test)',function(data){ // console.log(data.elem.checked); // if(data.elem.checked){ // console.log($(data.elem).val()); // } layer.confirm('是否开启？',{ btn:['开启','取消'] },function(){ layer.msg('已开启',{icon:1}); },function(){ $(data.elem).prop('checked',false); form.render(); }); }); }); function closew(){ parent.layer.closeAll(); }</script>
总结
- 初次接触Layui，上手难度不大，实现效果不错，但还是需要多多练习。
- 事件的响应还需要多多学习。
