前端框架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的更多相关文章
- 分享一个登录页面(前端框架layui)-20200318
效果图 对该页面的总结: 1.前端框架layui layui官网:https://www.layui.com/,下载之后,简单配置就可使用 2.layui模块引用与使用的方式 <script&g ...
- Java程序员必备后台前端框架--Layui【从入门到实战】（一）
layui入门使用及图标的使用 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 下载Layui与文件分析 下载直接去官网下载即可 文件分析 下载完成后,解压会 ...
- 一套一般般的前端框架 layui
http://www.layui.com/doc/
- Java程序员必备后台前端框架--Layui【从入门到实战】（二）
layui使用 导航菜单.选项卡 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 导航菜单 在layui官网中示例中,我们可以找到关于导航的例子: 我们点击查 ...
- 利用layui前端框架实现对不同文件夹的多文件上传
利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...
- layui前端框架
项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动) html代码 要给这个标签绑定click方法 <a href='javascript:;' data-me ...
- layui前端框架实例（修复官网数据接口异常问题）
layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...
- H5前端框架推荐合集
Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...
- 整合X-Admin前端框架改造ABP
“站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...
随机推荐
- wcf session开启
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] pu ...
- HashTable、HashSet和Dictionary的区别
今天又去面试了,结果依然很悲催,平时太过于关注表面上的东西,有些实质却不太清楚,遇到HashTable和Dictionary相关的知识,记录下来,希望对后来人有所帮助,以及对自己以后复习可以参考. 1 ...
- ng-bind,ng-cloak优化数据显示
<div>{{text}}</div> 当我们使用angular在页面中有取值的时候,如果出现网络加载慢的问题,可能会在页面上出现{{text}}这种不好的体验,那么angul ...
- JS倒计时网页自动跳转代码
<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...
- iOS中两个APP之间的跳转和通信
app间的跳转 一:在第一个app首先要做下面这些操作: 1.在info.plist文件中的Information Property List下添加一项:URL types. 2.点开URL type ...
- FME规划数据GIS更新入库
规划数据经过转换处理入库GIS,城市规划的特殊性,使得GIS里面数据经过分析处理后直接导出为CAD数据的话,肯定难以满足原来规划的要求,这个是硬伤.又要用GIS来进行空间分析处理统计,数据管理就必须了 ...
- C++ map使用（基于hashtable）
C++ map使用(基于hashtable) 实际上基于hashtable的map有两种一种是hash_map,unordered_map,但是最好使用后者,原因如下[1] 因为标准化的推进,unor ...
- oracle psql 调优
1 不一定sql越长反倒性能越差,尽量多where条件使得初始结果集最小,然后再和其他表相连 2 使用patition 3 同一个结果集被多次使用,可以使用with table
- Android--Notification
1.通知(Notification)是应用程序没有运行在前台时可以向用户发出一些提示消息的功能,发出通知后,手机状态栏会显示通知,用户可以通过下拉状态栏来查看和操作通知: 2.Notification ...
- SQL中的取整函数FLOOR、ROUND、CEIL、TRUNC、SIGN
1 trunc(value,precision)按精度(precision)截取某个数字,不进行舍入操作.2 round(value,precision)根据给定的精度(precision)输入数值. ...