前端框架layui
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架layui相关的知识，希望对你有一定的参考价值。
可以了解下jQuery组件layer
layui开始使用
Layui兼容除IE6/7以外的全部浏览器，并且绝大多数结构支持响应式
弹出层
如果你使用的是Layui，那么你直接在官网下载layui框架即可，无需引入jQuery和layer.js，但需要引入layui.css和layui.js
基础参数：
layer.open({content: ‘‘})layer.msg(‘‘, {time: 3})
type参数：
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
icon - 图标。信息框和加载层的私有参数
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2
demo.html
<!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title>弹出层</title> <link rel="stylesheet" href="../layui/css/layui.css"/> <script src="../jquery-3.1.1.min.js"></script> <script src="../layui/layui.js"></script> <style> /*body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7} body .demo-class .layui-layer-btn a{background:#333;} body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}*/ </style> </head> <body> <button class="layui-btn layui-btn-primary btn1">信息框</button> <button class="layui-btn layui-btn-primary btn2">页面层</button> <button class="layui-btn layui-btn-primary btn3">iframe层</button> <button class="layui-btn layui-btn-primary btn4">加载层</button> <button class="layui-btn layui-btn-primary btn5">tips层</button> <button class="layui-btn layui-btn-primary btn6">button6</button> <button class="layui-btn layui-btn-primary btn7">button7</button> <button class="layui-btn layui-btn-primary btn8">button8</button> <button class="layui-btn layui-btn-primary btn9">button9</button> <button class="layui-btn layui-btn-primary btn10">button10</button> <br/><br/> <p> type参数：<br /> 0（信息框，默认）1（页面层）2（iframe层）3（加载层） </p> <script> /*加载模块*/ layui.use(‘layer‘, function () { var layer = layui.layer; // 初始化就绪 layer.ready(function () { layer.msg(‘很高兴一开场就见到你‘); }); $(‘.btn1‘).on(‘click‘, function () { layer.msg(‘信息框‘); }); $(‘.btn2‘).on(‘click‘, function () { layer.open({ type: 1, content: ‘页面层‘, title: ‘我是页面层的标题‘ }); }); $(‘.btn3‘).on(‘click‘, function () { layer.open({ type: 2, content: ‘iframe.html‘, title: ‘iframe层‘, area: [‘800px‘, ‘800px‘], success: function (layero, index) { // 获取iframe页的DOM var body = layer.getChildFrame(‘body‘, index); console.log(body.html()); //得到iframe页的body内容 body.find(‘input‘).val(‘Hi, 我是从父页来的‘); } }); }); $(‘.btn4‘).on(‘click‘, function () { layer.open({ type: 3, title: ‘加载层‘ }); // 关闭加载层 setTimeout(function () { layer.closeAll(‘loading‘); }, 2000); }); $(‘.btn5‘).on(‘click‘, function () { layer.tips(‘默认就是向右的‘, ‘.btn5‘) }); layer.config({ skin: ‘demo-class‘ }); //图标 $(‘.btn6‘).on(‘click‘, function () { layer.alert(‘酷毙了‘, {icon: 1}); }); $(‘.btn7‘).on(‘click‘, function () { layer.alert(‘不开心。。‘, {icon: 5}); }); $(‘.btn8‘).on(‘click‘, function () { layer.load(1); }); $(‘.btn9‘).on(‘click‘, function () { layer.confirm(‘纳尼？‘, { btn: [‘确认‘, ‘取消‘, ‘返回‘], // 可以无限个按钮 btn3: function (index, layero) { // 按钮三的回调 console.log(‘按钮三的回调‘); } }, function (index, layero) { // 按钮一的回调 console.log(‘按钮一的回调‘); }, function (index, layero) { // 按钮二的回调 console.log(‘按钮二的回调‘); }); }); $(‘.btn10‘).on(‘click‘, function () { layer.open({ content: ‘test‘, shade: [0.8, ‘#393D49‘], shadeClose: true, // 是否点击遮罩关闭 shift: 0, // 动画，可选参数：0-6, moveType: 1, // 传统的拖拽方式 btn: [‘按钮一‘, ‘按钮二‘, ‘按钮三‘], yes: function (index, layero) { // 按钮一的回调 console.log(‘按钮一的回调‘); }, btn2: function(index, layero) { // 按钮二的回调 console.log(‘按钮二的回调‘); }, btn3: function (index, layero) { // 按钮三的回调 console.log(‘按钮三的回调‘); }, cancel: function () { // 右上角关闭回调 console.log(‘右上角关闭回调‘); } }); }); }); </script> </body> </html>
iframe.html
<!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text"/> <p>这是要内嵌的html页</p> </body> </html>
多功能分页
没有详细介绍
流加载
代码demo.html
<!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title>流加载文档</title> <link rel="stylesheet" href="../layui/css/layui.css"/> <script src="../layui/layui.js"></script> <style> ul#demo li { width: 48%; height: 100px; background: #eeeeee; margin: 0 5px 10px 5px; float: left; } ul#demo { width: 600px; height: 300px; overflow: auto; } #box { width: 600px; height: 300px; overflow: auto; margin-top: 50px; } #box img { margin: 0 5px 10px 5px; } </style> </head> <body> <!--信息流--> <ul id="demo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <p>图片懒加载</p> <div id="box"> <img lay-src="//gw1.alicdn.com/bao/uploaded/i1/TB1OniJLXXXXXXzXpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw1.alicdn.com/bao/uploaded/i2/TB1_pszKVXXXXXGXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i3/TB156kaLXXXXXaXXpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i4/TB1jWOKKpXXXXauXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1FUw6NpXXXXb_XFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i3/TB1j7_3KVXXXXanXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw1.alicdn.com/bao/uploaded/i4/TB19vptNXXXXXbEXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1LuytNXXXXXaPaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw2.alicdn.com/bao/uploaded/i3/TB1IZghJFXXXXbMXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1m4W8LpXXXXb7XpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw2.alicdn.com/bao/uploaded/i3/TB1T2RMKXXXXXcvXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw2.alicdn.com/bao/uploaded/i3/TB1TnPmJVXXXXalXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw1.alicdn.com/bao/uploaded/i3/TB1MjpSLVXXXXXzXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw2.alicdn.com/bao/uploaded/i1/TB10rxlNpXXXXb8XpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i1/TB1Zn4dNXXXXXawXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw2.alicdn.com/bao/uploaded/i4/259002843/TB29jKia8LxQeBjy0FnXXcQwpXa_!!259002843.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i1/TB1U02kNXXXXXcFXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw1.alicdn.com/bao/uploaded/i3/TB157htMpXXXXalXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i1/TB1GJK1LpXXXXaVXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw1.alicdn.com/bao/uploaded/i1/TB1jMaTMVXXXXbJXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw2.alicdn.com/bao/uploaded/i4/TB1ewCGMVXXXXXvapXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1QtjVLXXXXXchXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1XkbLMVXXXXaNapXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/> </div> <script> layui.use(‘flow‘, function () { var flow = layui.flow; // 信息流 flow.load({ elem: ‘#demo‘, // 指定列表容器 done: function (page, next) { // 到达临界点（默认滚动触发），触发下一页 // console.log(‘触发下一页‘); var list = []; console.log(page); for(var i = page; i < 17; i++) { list.push(‘<li>‘ + i + ‘</li>‘); } // 执行下一页渲染，如果不存在数据，则告诉flow已经没有更多 next(list.join(‘‘)); /** * 从服务器上请求 * @type {Array} * var lis = []; //以Ajax请求为例，请求下一页数据（注意：page是从2开始返回） $.getJSON(‘/api/list?page=‘+page, function(res){ //假设你的列表返回在data集合中 layui.each(res.data, function(index, item){ lis.push(‘<li>‘+ item.title +‘</li>‘); }); //执行下一页渲染，如果不存在数据，则告诉flow已经没有更多 next(lis.join(‘‘), res.data.length === 0); }); */ } }); // 图片懒加载 //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img） flow.lazyimg(); }); </script> </body> </html>
日期选择ui很美
以上是关于前端框架layui的主要内容，如果未能解决你的问题，请参考以下文章