web 前端常用组件之Layer弹出层组件

经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到。

感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/

1. Layer 使用特点

Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验。

Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升、易用和实用性.。

Layer 兼容了包括IE6在内的所有主流浏览器。 数量可观的接口,可以自定义需要的风格,每一种弹层模式各具特色。  

Layer 遵循LGPL协议,将永久性提供无偿服务。

2. Web 项目引入 Layer

Layer 依赖 Jquery 强大的 DOM 操纵能力,所以引入 Layer 前记得引入 Jquery。

<script type="application/javascript" src="../smeui/plugins/jquery/jquery-3.1.0.min.js"></script>
<script type="application/javascript" src="../smeui/plugins/layer-2.4/layer.js"></script>

Layer 效果展示

<div>
<p>layer demo</p>
<button id="msg">layer msg</button>
<button id="content">layer content</button>
<button id="iframe">layer iframe</button>
<button id="loading">layer loading</button>
<button id="tips">layer tips</button>
</div> 

a.Layer msg

//layer msg
$('#msg').on('click', function(){
layer.msg('Hello layer');
}); 

b.layer content

//layer content
$('#content').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true,
content: '\<\div style="padding:20px;">自定义内容\<\/div>'
});
}); 

c.layer iframe

//layer iframe
$('#iframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: false,
shadeClose: true,
area : ['600px' , '360px'],
content: 'http://www.baidu.com'
});
}); 

d.layer loading

//layer lading
$('#loading').on('click', function(){
var ii = layer.load();
//此处用setTimeout演示ajax的回调
setTimeout(function(){
layer.close(ii);
}, 10000);
}); 

e.layer tips

//layer tips
$('#tips').on('click', function(){
layer.tips('Hello tips!', '#tips');
});

在 web 项目无论是基本的弹窗还是需要个性化定制的弹出,Layer 都能提供很好的支持,这里只做抛砖引玉,需要更多信息请访问官网。

时间: 2016-09-21

jQuery、layer实现弹出层的打开、关闭功能

打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层,list.js: $(".add_category,.update").click(function(){ //弹出框 var doMain = $('.domain_name').val(); layer.open({ shade: [0.5, '#000', false], type: 2, area: ['900px', '530px'], fix: false, //不固定 maxmin

jQuery使用Layer弹出层插件闪退问题

一.前言 巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下 做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后写点击事件在form表单中(第一个坑),接着,又使用button按钮(悲剧的开始),同样放在form表单下.想要的效果就是当我点击按钮的时候,就弹出层.(悲剧) 好了,巨坑开始,一开始页面打好之后,就放到SSM框架中,出现的问题一开始就是404地址找不到,使用绝对定位不行,浏览器报的错误一直是错误的

jQuery Layer弹出层传值到父页面的实现代码

目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:

layer弹出层中H5播放器全屏出错的解决方法

1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js

layer弹出层框架alert与msg详解

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 在贴出代码 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除

详解Layer弹出层样式

前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请

浅谈layer弹出层按钮颜色修改方法

layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式 在open中 layer.open({ content: '确认提交?', btn: ["确认", "取消"], yes: function (index) { somefunciton... layer.close(index) }, btn2: function (index) { } }); layer中确认按钮在第一个位置,展示也是按顺序展示 如果和自己项目

layer弹出层扩展主题的方法

弹出层插件layer确实很强大,官方提供主题太少,但是提供扩展的方式,由于项目使用统一颜色风格,就想扩展一下.官方默认的三种: 1.白蓝(默认) layer.alert('内容');//默认 2.墨绿 layer.alert('内容', { icon: 1, skin: 'layui-layer-molv' }) 3.深蓝 layer.alert('内容', { icon: 1, skin: 'layui-layer-lan' }) ==========重点啦==================

SSM框架JSP使用Layui实现layer弹出层效果

最近做的系统里,使用layui当作前端的框架,就是用了layui自带的layer弹出层,效果图如下. 首先,导入layui需要的css,js文件,这个就不需要多说了.但是有关键的一步必须要做,也是许多新手会常犯的错误,就是没有预定义layui的form和layer,导致表单和弹出层不显示. 下面是layui的预定义. layui.use(['jquery', 'table', 'layer', 'form'], function() { // 加载layui模块,使用其推荐的[预先加载]方式,详

在layer弹出层中通过ajax返回html拼接字符串填充数据的方法

1,在给一个layer弹出层做checkbox自动选中时,ViewBag传递的时object类型,用不了lambda表达式,代码如下, @foreach (var perm in ViewBag.allPerms) { <input type="checkbox" id="permissionIds_@perm.Id" name="PermissionIds" value="@perm.Id" checked="

在layui中layer弹出层点击事件无效的解决方法

1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

解决layer弹出层中表单不起作用的问题

如下所示: var html = '<form class="layui-form" action="">' + '<div class="layui-form-item"><label class="layui-form-label">角色名</label><div class="layui-input-block"><input type

layer弹出层自定义提交取消按钮的例子

首先从js开始 /** * 检查是否选中 */ Sendandre.check = function () { var selected = $('#' + this.id).bootstrapTable('getSelections'); if (selected.length === 0) { Feng.info("请先选中表格中的某一记录!"); return false; } else { Sendandre.seItem = selected[0]; console.log(