java layer用法_javaWeb中使用layer插件

本文主要介绍javaWeb中使用layer弹出层以及关闭弹出层

(一)准备工作：

在使用layer之前，首先得导入layer插件包，以及jquery插件(注意：jquery版本需大于1.8，否则不生效)

这里给大家这两个插件的下载地址以及layer的官方API 地址：

①layer插件：http://layer.layui.com/

②jquery插件：http://www.jq22.com/jquery/jquery-1.9.1.zip

layer官方API 地址： https://www.layui.com/doc/modules/layer.html

大家自行下载插件之后，需要在页面引入js资源，如：

(二)开始使用：

现在准备工作完成了，我们现在开始使用layer！

(1)layer的父页面(user_list.jsp)

①js代码部分

1

2

3 　// 打开修改页面

4 　function openEdit() {

5 　　　　var index = layer.open({　　// 给当前layer弹出层赋值为index(在关闭弹窗时需要使用)

6 　　　　　　type: 2,　　// 设置弹出层的类型(默认为0)

7 　　　　　　area: ['90%', '90%'],　// 设置弹出层的大小

8 　　　　　　fix: false, // 不固定(默认true，即鼠标滚动时，弹出层是否固定在可视区域。)

9 　　　　　　maxmin : true,　　// 最大最小化(该参数值对type : 1和type : 2有效。默认不显示)

10 　　　　　　 title: '修改用户信息填写',

11 　　　　　　content: 'user_edit.jsp',　// 要跳转的页面地址(跟超链接是一样的形式，也可拼接赋值)

12 　　　　　　end: function() {　　// 弹出层销毁后触发的回调(只要弹出层被销毁了，end都会执行)

13 　　　　　　　　location.reload();　　 // 重新加载当前页面

14 　　　　}

15 　　});

16 }

17

18

②jsp页面部分：

1 修改用户信息

(2)layer的子页面(user_edit.jsp)

①js代码部分：

这里需要注意，function的名称不能为submit(function submit(){})，否则layer关闭会无法生效，因为submit()方法为js定义好的表单提交方法，不能作为function方法名。

1

2

3 　　function closeLayer() {

4 　　　　var index = parent.layer.getFrameIndex(window.name); // 获取父页面layer窗口索引

5 　　　　parent.layer.close(index) 　　　　// 直接关闭layer

6 　　}

7

8

②jsp页面部分：

在修改完成提交表单时，需要执行closeLayer()函数

1

完成上面的操作，就可以轻松实现layer插件的弹出层打开和关闭操作。

标签：function,jquery,插件,javaWeb,layer,弹出,页面

来源： https://www.cnblogs.com/fy0206/p/10661362.html