最近在做一个后台项目,正好碰上了要使用layer.open,就顺手记录一下,方便以后遇到了有个参考 - 2016/11/7


  layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM...


  layer.open主要是用来弹出来一个iframe弹窗,然后用来展示数据也行,用来修改也行,这次记录的主要是展示,展示我想要展示的数据,我需要的页面...

layer.open({
type: 1,
title: '账户信息详情',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: xxxxxxxxx
});

其他的不看,单看content,因为content的内容就是需要展示的内容

第一种方法,很简单,我想要看一个已经存在的页面,比如说百度,或者项目中某个页面 直接写地址

layer.open({
type: 2,
title: '很多时候,我们想最大化看,比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: 'http://fly.layui.com/'
}); ----------------------------------------------------------------------- layer.open({
type: 2,
title: '用户信息。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: '/test/user/info' + uid
});

后面的uid可能是你需要传递的某些参数之类的...具体的根据你controller来定

第二种方法,将需要的内容写到页面上,然后在使用的时候调用

jsp页面:

<div id='info' style = "display : none">
我是内容
</div>

然后在js里面调用

layer.open({
type: 1,
title: '账户信息详情',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: $("#info").html()
});

第三种方法,直接在js里面拼接...好凶残...

var html = "<div class='wrapper' id='detailsinfo'>" +
"<div class='detailsdiv'>" +
"<p><label>帐号:</label>" + '测试帐号' +"</p>" +
"</div></div>" layer.open({
type: 1,
title: '账户信息详情',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: html
});

我现在使用的就是这三种方法,也许还有更好的方法,以后发现了再记录

对于方法一:因为是使用已经存在的controller和页面,所以传值什么都比较方便,需要什么值就获取什么值传递什么值...但是有些页面可能我不想让别人通过url直接就访问到...那就可以用第二种和第三种...所需的数据直接通过ajax从后台获取到,然后再放到具体的位置,然后再展示~~

使用layer.open时content属性传值记录的更多相关文章

  1. #学习记录#——CSS content 属性

    CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </ ...

  2. CSS魔法堂:一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  3. 四大传值详解:属性传值,单例传值,代理传值,block传值

    一:属性传值 传值情景:从前一个页面向后一个页面传值 a.在后一个页面,根据传值类型和个数,写属性 b.在前一个页面, 为属性赋值 c.在后一个页面, 使用值 例如: 第一个视图: #import & ...

  4. 属性传值,协议传值,block传值,单例传值四种界面传值方式

    一.属性传值 对于属性传值而言,相对于其它的三种 方法来说,是最基础,最简单的一种 方法,但,属性传值 有很大的局限性,因为是适用于第一个界面向第二个界面传 值,第二个向第三个界面传值等等.N界面向N ...

  5. Easyui tabs的herf和content属性

    在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...

  6. 在使用cognos时遇到的问题记录帖

    在使用cognos时遇到的问题记录帖 1.开一个project 报无法访问位于 URL 的服务: http://localhost:80/ibmcognos/cgi-bin/cognos.cgi?b_ ...

  7. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  8. 浅析requests库响应对象的text和content属性

    在做爬虫时请求网页的requests库是必不可少的,我们常常会用到 res = resquests.get(url) 方法,在获取网页的html代码时常常使用res的text属性: html = re ...

  9. MyBatis 插入时返回刚插入记录的主键值

    MyBatis 插入时返回刚插入记录的主键值 一.要求: 1.数据库表中的主键是自增长的,如:id: 2.获取刚刚插入的记录的id值: 二.源代码: 1.User.java package cn.co ...

随机推荐

  1. FTF登入tiny210开发板

    配置环境一: 第一步:安装虚拟机             1)安装虚拟机+Linux12.04             2)安装FTP软件 第二步:配置超级终端(串口)             1)开 ...

  2. ubuntu16.04.1下的mysql修改默认编码

    在Ubuntu 下配置 Mysql 的字符编码.安装完 Mysql 后,系统默认的字符编码是 latin1 ,输入的是中文,可是输出却是一堆乱码.现在要做的就是把 Mysql的默认字符编码设置为支持中 ...

  3. 在Visual Studio 中开发自定义脚手架 Scaffolder

    1.官方简单教程 http://blogs.msdn.com/b/webdev/archive/2014/04/03/creating-a-custom-scaffolder-for-visual-s ...

  4. 3.Git的诞生和其分布式的优点

    Git的诞生 省略了,喜欢的可以看百度. 分布式的优点 先说集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完 ...

  5. 08-FPGA状态机设计实例——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线--普利斯队长精心奉献   实验目的:1.学习状态机的相关概念 2.理解一段式.两段式以及三段式状态机的区别以及优缺点 实验平台:芯航线FPGA核心板 实验原理: 状态机全称是有限状态机(fin ...

  6. js错误

    1ajax提交 从数据库里取文件typeerror: 'stepup' called on an object that does not implement interface HTMLInputE ...

  7. wps使用技巧

    1.和word一样的文档结构图: 视图->文档结构图 (不是导航窗格) 2.粘贴时,出现乱码: WPS->选项->默认粘贴方式:无格式文本. 3.浏览当前文档所在目录: 在WPS的标 ...

  8. JavaScript:this是什么?

    JavaScript:this是什么?定义:this是包含它的函数作为方法被调用时所属的对象.说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它! 1.包含它的函数.2 ...

  9. Java 基础接口练习题

    编写2个接口:InterfaceA和InterfaceB:在接口InterfaceA中有个方法void printCapitalLetter():在接口InterfaceB中有个方法void prin ...

  10. 关于HandlerThread的分析

    Android中的Thread没有对java中的Thread做任何封装,而Android提供了一个遍历方法HandlerThread,他继承于Thread,实现了对遍历系统的一些封装,下面研究一下Ha ...