layerui
引用layer.js,官网:http://layer.layui.com/
常用属性:btn/icon/skin/time/content/yes(点击确认、提交)
常用窗体
.alert
layer.alert("内容");
layer.alert('墨绿风格,点击确认看深蓝', {
skin: 'layui-layer-molv'//样式类名
, closeBtn: 0
}, function () {
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan'
, closeBtn: 0
, shift: 2 //动画类型
});
});
.confirm
layer.confirm('您是如何看待前端开发?',{
btn: ['重要', '奇葩'] //按钮
}, function () {
layer.msg('的确很重要', { icon: 1 });
}, function () {
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
},function() {
layer.msg('明白就好', { time: 20000 });
},function() {
layer.msg('知道就好', { time: 20000 });
});
});
.msg
layer.msg('hello.');
.open 自定义窗口
layer.open({
type: 1,
skin: 'layui-layer-demo',//样式类名
btn: ["关闭"],
/*closeBtn: 0, //不显示关闭按钮*/
shift: 2,
shadeClose: true, //开启遮罩关闭
content: '内容'
});
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['700px','90%'],
content: 'http://layer.layui.com/mobile/'//iframe的url
});
.html
$("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力为您搜索,请稍后...');
.load 加载
$("#layerOpen").load("/Order/ProductList");
.tips
关闭layer
用一个变量存储弹窗,在需要关闭的地方调用close方法
<div style="display:none;"id="layerOpen"></div>
var layerOpen = null; //弹窗变量
layerOpen=layer.open({
type: 1,
title: "查看XXX的详情",
area: ["1000px","600px"],
content: $("#layerOpen"),
cancel: function () {
$("#layerOpen").html("");
}
});
layer.close(layerOpen);
打开自定义页面
$("#layerOpen").html('<imgsrc="/images/loading.gif"/>正在努力为您搜索,请稍后...');
$("#layerOpen").load("/Controller/Action");
layerOpen = layer.open({
type: 1,
title: "选择XXX",
area: ["1000px","600px"],
content: $("#layerOpen"),
cancel: function () {
$("#layerOpen").html("");
}
});
加载页面
保存变量,打开页面赋值,关闭页面
//加载layer
var load = null;
$.ajax({
type: "POST",
url: "/Controller/Action",
data: {
"PKID":PKID,
"Path": path
},
beforeSend: function () {
load = layer.load(0, { shade:[0.3, '#000'] });//0代表加载的风格,支持0-2
},
success: function (result) {
if (load != null) {
layer.close(load);
}
layer.alert(result.Msg, '提示');
}
});
layerui的更多相关文章
- 【Javascript】好用的js弹层插件,layerUI
官网:layerUI 中文手册:layerAPI
- layerUi与AJAX的一种思路
javascript:function rep(id) { layer.confirm("确定要拒绝此认证吗?", { btn: ["确定", "取消 ...
- layerui如何隐藏按钮?
https://www.layui.com/doc/modules/layer.html#btn 建议把 btn: ['取消'],btnAlign: 'c',yes: function (index) ...
- LayeruI Loadding Custom word
var getTableResult = function (pageIndex, pageSize) { var index = layer.load(2, { content: '加载中..... ...
- layerui如何设置显示的位置?
转自:http://www.layui.com/doc/modules/layer.html#offset layer.open({ type: 1,//默认:0 (0表示信息框,1表示页面层,2表示 ...
- Layerui 弹出层的位置设置
距顶 offset: '300px' 例1: layer.msg("请先选择项!", { offset: '300px' });例2: layer.confirm("确定 ...
- layerui ios不适应问题
.admin-main {-webkit-overflow-scrolling: touch; overflow: scroll; position: absolute; left: 0; top: ...
- layerui上传文件
参考: http://www.layui.com/doc/modules/upload.html <1> 文件上传(以下函数必须要在js文件加载时执行) upload.render({ e ...
- Turtle Online:致力于打造超接地气的PC前端架构,组件+API,快速搭建前端开发
架构创作初衷 每当新开一个项目时,都会绞尽脑汁去考虑采用哪种框架:requirejs/seajs.jquery/zepto.backbone.easeUI/Bootstrap/AngularJS……, ...
随机推荐
- 【C++竞赛 H】The sum problem
Time Limit: 1s Memory Limit: 32MB 问题描述 Given a sequence 1,2,3,-,N, your job is to calculate the numb ...
- css3-5 css3鼠标、列表和尺寸样式怎么用(文字有关的样式会被继承)
css3-5 css3鼠标.列表和尺寸样式怎么用(文字有关的样式会被继承) 一.总结 一句话总结:css标签中文字有关的样式会被继承.由常用样式记起. 1.鼠标常用样式有哪些? cursor:poi ...
- js进阶 11-13 jquery如何包裹元素和去除元素外的包裹
js进阶 11-13 jquery如何包裹元素和去除元素外的包裹 一.总结 一句话总结:wrap().wrapAll().unwrap().innerWrap()四个方法 1.jquery中unwr ...
- Ajax基础与Json应用(一)
一.Ajax概念 Ajax是异步的javacript和xml 发音: Ajax [ˈeɪˌdʒæks] 二.同步与异步 传统方式(同步):一个请求对应一个回应,他们是同步的,回应不完成,没办法对这个页 ...
- Objective-C编码规范[译]
原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : r ...
- dom对象常用的属性和方法有哪些?
dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...
- 百度消息推送REST API探究
一.百度云推送介绍 云推送(Push)是百度开放云向开发者提供的消息推送服务:通过利用云端与客户端之间建立稳定.可靠的长连接来为开发者提供向客户端应用推送实时消息服务. 百度云推送服务支持推送三种类型 ...
- 微信小程序从零开始开发步骤(一)
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了.1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,点击 ht ...
- [Flow] The Fundamentals of Flow
Install: yarn global add flow-typed /*get type defination*/ yarn add flow-bin -D For example you hav ...
- Graphics-Processing Architecture Based on Approximate Rendering
BACKGROUND The present invention generally relates to the processing of graphics data, and particula ...