一个让你想到即可做到的web弹窗/层----Layer
Layer
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性!
如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,快速认识她吧~~
1初识Layer
// 引入好layer.js后,直接用即可
<script src="js/jquery-3.1.1.js"></script>
<script src="layer.js"></script>
<script>
layer.msg('hello');
</script>
2看几个信息框实例
① 简单弹出一个提示层
$('#test1').on('click', function(){
layer.msg('hello');
});
② 信息框-1
layer.alert('见到你真的很高兴', {icon: 6});
③ 信息框-2
layer.msg('你确定你很帅么?', {
time: 0 //不自动关闭
,btn: ['必须啊', '丑到爆']
,yes: function(index){
layer.close(index);
layer.msg('雅蠛蝶 O.o', {
icon: 6
,btn: ['嗷','嗷','嗷']
});
}
});
④ 页面层-自定义
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
skin: 'yourclass',
content: '自定义HTML内容'
});
⑤ iframe层
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '//player.youku.com/embed/XMjY3MzgzODg0'
});
3加载层
layer.load();
layer.load(1);
③ 带文字的
layer.msg('加载中', {
icon: 16
,shade: 0.01
});
4Layer mobile
layer.open({
title: [
'我是标题',
'background-color:#8DCE16; color:#fff;'
]
,anim: 'up'
,content: '展现的是全部结构'
,btn: ['确认', '取消']
});
② 可以设置多长时间自动关闭:
layer.open({
content: '通过style设置你想要的样式'
,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
,time: 3
});
③ 自定义一个全屏的页面层:
var pageii = layer.open({
type: 1
,content: html //新页面
,anim: 'up'
,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});
layer.open({
content: '这是一个底部弹出的询问提示'
,btn: ['删除', '取消']
,skin: 'footer'
,yes: function(index){
layer.open({content: '执行删除操作'})
}
});
layer 采用 MIT 开源许可证,他们是免费使用的。PC端弹窗解决用Lyaer是个不错的选择,大家可以去下载一个感受一下~~
一个让你想到即可做到的web弹窗/层----Layer的更多相关文章
- Layer 一个让你想到即可做到的web弹窗/层 解决方案
最近工作上面用到的web弹窗组件layer layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. layer官方 ...
- layer,一个可以让你想到即可做到的javascript弹窗(层)解决方案
学习网址:http://layer.layui.com/ 下载地址:http://res.layui.com/download/layer-v2.1.zip 我们提到的基础参数主要指调用方法时用到的配 ...
- 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
- web 前端常用组件【07】弹出层 Layer
web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...
- DDD开发框架ABP之动态Web API层
建立动态Web API 控制器 ASP.NET Boilerplate 能够自动为您的应用层产生Web API层.比如说我们有如下的一个应用服务: public interface ITaskAppS ...
- ABP框架 - 动态Web Api层
文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...
- 动态Web API层
返回总目录 本篇目录 构建动态Web API控制器 ForAll 方法 重写ForAll 方法 Http动词 动态Javascript代理 Ajax参数 单一服务脚本 Angular支持 Durand ...
- Web表现层
目录 Web表现层调用过程... 2 延迟... 3 什么是延迟... 3 延迟的构成... 3 最基本的优化思路:... 4 Web表现层性能优化... 4 Web性能的基本指标... 4 Web性 ...
- layer 1.9.2 发布,国产 Web 弹层不懈的前行者
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
随机推荐
- 201621123088《Java程序设计》第1周学习总结
1.本周学习总结 以几个关键词描述本周的学习内容.并阐述关键概念之间的联系. 这周是我第一次学习Java,对于我这个上学期没有学好的人来说,Java无疑是一个新的噩梦,但是我相信我这学期一定能学好Ja ...
- LINUX - awk命令之NF和$NF区别 (转)
NF和$NF 区别问答:(转)1.awk中$NF是什么意思?#pwd/usr/local/etc~# echo $PWD | awk -F/ '{print $NF}'etcNF代表:浏览记录的域的个 ...
- Akka(25): Stream:对接外部系统-Integration
在现实应用中akka-stream往往需要集成其它的外部系统形成完整的应用.这些外部系统可能是akka系列系统或者其它类型的系统.所以,akka-stream必须提供一些函数和方法来实现与各种不同类型 ...
- ACM退役记&&回忆录
ACM退役记 2017.9.19星期二,"九一八事变"八十六年后的第二天,永远记住这个日子,刚好是我报名ACM到现在,刚好满一年,而今天正是我注册杭州电子科技大学OJ的时间(就是这 ...
- SpringMVC第七篇【RESTful支持、拦截器】
RESTful支持 我们在学习webservice的时候可能就听过RESTful这么一个名词,当时候与SOAP进行对比的-那么RESTful究竟是什么东东呢??? RESTful(Representa ...
- Python学习笔记006_异常_else_with
>>> # try-except语句 >>> >>> # try : >>> # 检测范围 >>> # exc ...
- TestNG操作详解
运行测试步骤方法有如下两种: 1. 直接在Eclipse运行testNG的测试用例, 在代码编辑区域鼠标右键, 选择Run as ->testNG Test 2. 在工程的根目录下, 建立tes ...
- appium python andiroid自动化文档整理笔记
from appium import webdriver import time,unittest,HTMLTestRunner class Testlogin(unittest.TestCase): ...
- 在linux上安装rz、sz包
在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz/sz命令来上传/下载文件. 对于RHEL5, rz/sz默认没有安装所以需要手工安装.sz: 将选定的文件发送(send) ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...