Layer  

 

layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性!

如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,快速认识她吧~~                                                                                                       

 
 
1
初识Layer
 
获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 与 Jquery即可。 
 

  1. // 引入好layer.js后,直接用即可
    <script src="js/jquery-3.1.1.js"></script>
  2. <script src="layer.js"></script>
  3. <script>
  4. layer.msg('hello');
  5. </script>
2
看几个信息框实例
 
  1. 简单弹出一个提示层
  1. $('#test1').on('click', function(){
  2. layer.msg('hello');
  3. });
  1. 信息框-1
  1. layer.alert('见到你真的很高兴', {icon: 6});

  1. 信息框-2
  1. layer.msg('你确定你很帅么?', {
  2. time: 0 //不自动关闭
  3. ,btn: ['必须啊', '丑到爆']
  4. ,yes: function(index){
  5. layer.close(index);
  6. layer.msg('雅蠛蝶 O.o', {
  7. icon: 6
  8. ,btn: ['嗷','嗷','嗷']
  9. });
  10. }
  11. });

④ 页面层-自定义

  1. layer.open({
  2. type: 1,
  3. title: false,
  4. closeBtn: 0,
  5. shadeClose: true,
  6. skin: 'yourclass',
  7. content: '自定义HTML内容'
  8. });

  1. iframe
  1. layer.open({
  2. type: 2,
  3. title: false,
  4. area: ['630px', '360px'],
  5. shade: 0.8,
  6. closeBtn: 0,
  7. shadeClose: true,
  8. content: '//player.youku.com/embed/XMjY3MzgzODg0'
  9. });

 
3
加载层
 
 
① 加载层-默认风格
 
  1. layer.load();

 
② 旋转样式
  1. layer.load(1);

③ 带文字的

  1. layer.msg('加载中', {
  2. icon: 16
  3. ,shade: 0.01
  4. });

 
4
Layer mobile
 
layer mobile是为移动设备(手机、平板等webkit内核浏览器/webview)量身定做的弹层UI。
 
采用原生 JavaScript编写,所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer。
 
OK!看几个实例~
 
① 一个在底部弹出的完整对话框:
 
  1. layer.open({
  2. title: [
  3. '我是标题',
  4. 'background-color:#8DCE16; color:#fff;'
  5. ]
  6. ,anim: 'up'
  7. ,content: '展现的是全部结构'
  8. ,btn: ['确认', '取消']
  9. });

② 可以设置多长时间自动关闭:

  1. layer.open({
  2. content: '通过style设置你想要的样式'
  3. ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
  4. ,time: 3
  5. });

 ③ 自定义一个全屏的页面层:

  1. var pageii = layer.open({
  2. type: 1
  3. ,content: html //新页面
  4. ,anim: 'up'
  5. ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
  6. });
 ④ 底部对话框
  1. layer.open({
  2. content: '这是一个底部弹出的询问提示'
  3. ,btn: ['删除', '取消']
  4. ,skin: 'footer'
  5. ,yes: function(index){
  6. layer.open({content: '执行删除操作'})
  7. }
  8. });
 
 
 

layer 采用 MIT 开源许可证,他们是免费使用的。PC端弹窗解决用Lyaer是个不错的选择,大家可以去下载一个感受一下~~

一个让你想到即可做到的web弹窗/层----Layer的更多相关文章

  1. Layer 一个让你想到即可做到的web弹窗/层 解决方案

    最近工作上面用到的web弹窗组件layer layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. layer官方 ...

  2. layer,一个可以让你想到即可做到的javascript弹窗(层)解决方案

    学习网址:http://layer.layui.com/ 下载地址:http://res.layui.com/download/layer-v2.1.zip 我们提到的基础参数主要指调用方法时用到的配 ...

  3. 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序

    使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...

  4. web 前端常用组件【07】弹出层 Layer

    web 项目中总是需要弹出框,来让用户进行下一步的操作. 大到弹出另外一个页面,小到弹出提示.确认等. 经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感 ...

  5. DDD开发框架ABP之动态Web API层

    建立动态Web API 控制器 ASP.NET Boilerplate 能够自动为您的应用层产生Web API层.比如说我们有如下的一个应用服务: public interface ITaskAppS ...

  6. ABP框架 - 动态Web Api层

    文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...

  7. 动态Web API层

    返回总目录 本篇目录 构建动态Web API控制器 ForAll 方法 重写ForAll 方法 Http动词 动态Javascript代理 Ajax参数 单一服务脚本 Angular支持 Durand ...

  8. Web表现层

    目录 Web表现层调用过程... 2 延迟... 3 什么是延迟... 3 延迟的构成... 3 最基本的优化思路:... 4 Web表现层性能优化... 4 Web性能的基本指标... 4 Web性 ...

  9. layer 1.9.2 发布,国产 Web 弹层不懈的前行者

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

随机推荐

  1. 如何实现Sublime Text3中vue文件高亮显示的最有效的方法

    今天第一次使用Sublime Text3软件,在实现vue文件高亮显示的过程中一直报错,经过了半天时间的不停尝试终于找到了最有效的一种解决方法!错误提示如下: 刚开始尝试了很多方法都不行,只要打开in ...

  2. python generator(生成器)

    a=(x*2 for x in range(1000)) # print(a.next())#python2使用 print(a.__next__()) #python3使用 print(next(a ...

  3. vue webuploader 组件开发

    最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一.封装组件 引入百度提供的 ...

  4. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  5. MVC发布网站

    首先Vs打开解决方案 在Global.asax中加入下列代码,否则会出现CSS JS失效 BundleTable.EnableOptimizations = false; 用户 'NT AUTHORI ...

  6. PyTorch教程之Tensors

    Tensors类似于numpy的ndarrays,但是可以在GPU上使用来加速计算. 一.Tensors的构建 from __future__ import print_function import ...

  7. 【Python练习1】统计一串字符中英文字母、空格、数字和其他字符的个数

    练习思路: 1.输入一串字符 2.筛选出字符中的英文字母并统计 3.筛选出字符中的空格并统计 4.筛选出字符中的数字并统计 5.筛选出字符中的其他字符并统计 代码实现: def msg(s): abc ...

  8. HADOOP源码分析之RPC(1)

    源码位于Hadoop-common ipc包下 abstract class Server 构造Server protected Server(String bindAddress, int port ...

  9. ionic2+Angular2:套接口明细步骤,以登录功能为例

    1.在app.module.ts引用HttpModul,并在imports内引用.截图如下:   2.在src目录下新建http服务.命令行:ionic g provider HttpService ...

  10. Maximum 贪心

    Maximum Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Des ...