layer的简单的使用

估计写的有点不好，我还是初学的状态

有点粗略。但是我还是贴例子出来总结出来给大家一起学习学习。

今天主要用的是layer去做一个弹出层。蛮简单的。

$(function(){$('#addUser').on('click', function(){// $('#defaultForm').data('bootstrapValidator').resetForm(true)layer.open({type: 1,area: ['1000px', '500px'],content: $('#addPage'),btn: ['save', 'close'],yes: function(index, layero){}});});
})

type参数：

类型：Number，默认：0

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

可以为空

title标题

就是那个弹出层上面的标题，哎呀到时候我做个效果图吧。默认的是：信息

content内容:

就是弹出层的内容可以 html内容或者指定一个dom（id）跟type结合，今天我试了一下，html内容的话首先要不隐藏它，但是弹出的时候会影响你的页面布局

所以最好放到body外面

/!*如果是页面层*/
layer.open({type: 1, content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({type: 1,content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){layer.open({type: 1,content: str //注意，如果str是object，那么需要字符拼接。});
});
/!*如果是iframe层*/
layer.open({type: 2, content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
/!*如果是用layer.open执行tips层*/
layer.open({type: 4,content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

官网的例子

area 宽高：是设定弹出层的高度和宽度（今天遇到的问题是页面太大会出现滚动条，调好应该不会出现了吧）

我那个上面的例子，可以参考一下 累了明天再写吧

layer的简单的使用相关推荐

html引入layer.js,require.js引用jquery、layer的简单实例用法
来源: 未知发布时间: 2017-10-13 次浏览用法: 第一步在html页面上引入JS: 第一个require.js,注意引用的时候加了一个data-main="./index&qu ...
Git快速入门篇—— Windows版本淘宝镜像快速下载安装详细步骤及简单入门教程（附带图文教程）
Git快速入门篇-- Windows版本淘宝镜像快速下载安装详细步骤及简单入门教程(附带图文教程) 前言:我们平时在整理代码的时候,尤其是与别人一起开发项目的时候,常常涉及到代码的更新,因此代码版本问 ...
caffe源码 layer分析
Layer 分析 1 layer 总体介绍 2 data 层 3 neuron 层 4 vision 层 5 common层 6 loss层 7 添加自己layer 一.layer总体介绍 1. la ...
2022 年最受瞩目的新特性 CSS @layer 到底是个啥？
步入 2022,CSS 的新特性层出不穷,而最近在 CSS 圈最受瞩目的新特性,非 CSS @layer 莫属. 本文,将用最简洁的语言,快速让读者们搞懂,到底什么是 CSS @layer 新规范. ...
LDAP服务器的概念和原理简单介绍
仅用于个人学习,侵删. 本文转自:LDAP服务器的概念和原理简单介绍 [http://seanlook.com/2015/01/15/openldap_introduction/] 1. 目录服务目 ...
android教育游戏设计方案,一个简单Android游戏的设计详细设计
一个简单的游戏设计--初步设计让我们对整体有个简单的了解,下一步开始详细设计.详细设计我们就要结合具体的游戏平台,考虑游戏的逻辑关系. 游戏角色的详细设计采用3层结构,详细说明之所以将IGameE ...
HTTP/HTTPS的请求和响应
HTTP和HTTPS HTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法. HTTPS(Hypertext Transfer ...
android ble不配对接收广播数据_蓝牙低功耗（BLE）学习笔记_0
BLE的体系结构主要由三部分组成,分别是控制器(controller),主机(Host)和应用程序(Application),如下图所示: BLE体系结构 Application layer顾名思义主 ...
CALayer（一）
一 CALayer是什么? 摘自官网的一句话-Layers Provide the Basis for Drawing and Animations(Layers是绘图和动画的基础) Layer是在3 ...

layer的简单的使用

layer的简单的使用相关推荐

最新文章

热门文章