`

Layer使用

web 
阅读更多
先了解一下在web开发时候使用js要关闭弹出框的几个简单的应用
window.location.href、location.href 是本页面跳转
parent.location.href 是上一层页面跳转,也就是你在弹出时候的页面。
top.location.href是最外层的页面跳转,你懂得,在有iframe的时候你就知道他不会进入你的iframe的窗体
再就是你要从这个页面跳转到别的父级打开的页面window.parent.parent.location.href=“你定义要跳转的页面”

layer使用
本课题只探讨1.9以上的版本
看看基础参数项:调用时候用到的配置项如:layer.open({content: ''})layer.msg('', {time: 3})不需要所有都去配置,大多数都是可选的。其中layer.open、layer.msg是内置方法。
基础参数:
type - 基本层类型
type:Number,默认:0 5种提供层类型,信息框【0】,页面层【1】,iframe层【2】,加载层【3】,ips【4】层,若你采用layer.open({type: 1})方式调用,则type为必填项。
title:
title - 标题
类型:String/Array/Boolean,默认:'信息'
title支持三种类型的值,若你传入的是普通的字符串,如title :'我是标题',那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: ['文本', 'font-size:18px;'],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
content - 内容
类型:String/DOM/Array,默认:''
content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM
});
//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
});        

skin - 样式类名
类型:String,默认:''
skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子



来源http://layer.layui.com/api.html#layer.load
分享到:
评论

相关推荐

    layer使用总结

    ### Layer使用总结 #### 一、Layer简介与安装 Layer是一款轻量级的JavaScript弹窗插件,由layui团队开发并维护。它以其简洁、易用的特点被广泛应用于Web前端项目中,支持提示框、模态框、加载层等多种功能。 - **...

    openlayer使用方位坐标系显示北极地区

    在北极地区,由于地球曲率的影响,使用常规的经纬度坐标系会使得距离和方向的表示不准确,因此需要使用更适合极地的方位坐标系。 方位坐标系(Azimuthal Equidistant projection)是一种等距离投影,其特点是任何...

    jQuery layer 漂亮实用的网页弹出层插件.rar

    jQuery layer 漂亮实用的网页弹出层插件,layer v1.4.1 弹层组件压缩版,这个... 四、jquery必须为1.8或1.8以上版本(原因,更小,性能更好,且新版layer使用了部分jq1.8的特性),下载包里的jquery即为1.8.2下载地址

    layer弹出层插件,带使用说明

    `layer`是一款在Web前端开发中广泛使用的弹出层插件,尤其在页面提示、对话框、加载提示、图片预览等方面有着出色的表现。其设计简洁,功能强大,易用性强,是提高用户体验的重要工具。本篇将详细介绍`layer`的使用...

    layer网页弹出层插件 v1.8.4.rar

    layer网页弹出层插件,反响相当好的一款JS弹出层插件,layer兼容了包括IE6... 三、jquery必须为1.8或1.8以上版本(原因,更小,性能更好,且新版layer使用了部分jq1.8 的特性),下载包里doc文件里有jquery1.9下载地址

    layer.js用法例子

    在本文中,我们将深入探讨`layer.js`的使用方法,帮助开发者更好地理解和应用这个工具。 ### 1. 安装与引入 首先,你需要下载`layer.js`文件,将其放在项目目录中,并通过HTML中的`<script>`标签引入。例如: ```...

    iClient for Openlayer对接MVT矢量瓦片demo.zip

    本示例"iClient for OpenLayer对接MVT矢量瓦片demo"主要展示了如何使用OpenLayers库与超图iClient进行交互,以加载和显示MVT(Map Vector Tiles)格式的矢量瓦片数据。MVT是一种高效、轻量级的地理空间数据存储格式...

    贤心的layer简单化应用

    在介绍完基础的类库和导航技术之后,我们可以发现,“贤心的layer简单化应用”项目不仅仅是一个layer使用教程,它还向我们展示了如何将layer技术与jQuery结合,制作出更加动态和具有互动性的网页设计。在“jquery...

    LayEdit(layer 富文本编辑器使用,包含图片的上传)

    layer是一款知名的JavaScript弹层组件,而LayEdit则是layer扩展出的富文本编辑器插件。本教程将深入探讨LayEdit的使用,包括其与form表单的交互以及图片上传功能。 首先,我们需要了解LayEdit的基本使用方法。...

    lesson52-LSTM-Layer使用.zip

    深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度...

    lesson48-RNN-Layer使用.zip

    深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度...

    layer-v3.1.1组件使用说明

    《layer-v3.1.1组件使用详解》 在网页开发中,弹出层组件扮演着重要的角色,它能够提供信息提示、对话框、加载效果等功能,极大地提升了用户体验。layer-v3.1.1作为一款广泛应用的弹出层组件,其功能强大且易于使用...

    可拖动图片弹出层插件layer.js.zip

    《可拖动图片弹出层插件layer.js详解》 在网页开发中,为了提供更好的用户体验,有时我们需要创建一种能够弹出并展示...在实际使用中,开发者应结合自身项目需求,合理利用layer.js提供的各种特性,以达到最佳的效果。

    layer弹窗:top.layer弹窗到父页面跨域解决办法

    在IT行业中,跨域问题是一个常见的挑战,尤其是在网页开发中,比如当我们在使用layer弹窗插件时,可能会遇到从子页面弹出一个窗口到父页面的情况。标题和描述所提及的是一个关于如何解决layer弹窗在跨域环境下的问题...

    layer模板引擎的使用

    本篇文章将深入探讨layer模板引擎的使用方法和核心特性。 ### 1. 模板语法 layer模板引擎的语法简洁直观,主要由标签和表达式组成。例如,`{{ }}`用于包裹变量,`{% %}`用于控制流程结构,`{# }`用于迭代。下面是...

    layer-v2.4 弹层组件

    一、使用时,请把文件夹layer整个放置在您站点的任何一个目录,只需引入layer.js即可,除jQuery外,其它文件无需再引入。 二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径,您可以通过layer...

    web弹窗插件 layer-v3.1.1

    1. **易用性**:layer 设计简洁,API 易于理解和使用,无论是新手还是经验丰富的开发者都能快速上手。 2. **全面性**:提供了丰富的弹层类型,包括消息提示、对话框、iframe、加载层、提示层、图片层等,满足多样化...

    layer-v3.0.3 弹层组件文档和demo

    首先,我们来了解layer的基本使用。在layer-v3.0.3版本中,主要包含以下核心功能: 1. **提示信息**:layer提供了多种提示信息样式,包括信息提示、成功提示、错误提示等,只需简单调用API即可实现。 ```...

    vue项目中使用vue-layer弹框插件的方法

    在Vue项目中,为了实现各种弹框功能,如提示、确认、信息框等,我们可以使用vue-layer这个弹框插件。vue-layer是一个基于Vue.js的轻量级弹窗组件,它提供了丰富的弹框类型和自定义选项,适用于多种场景。 首先,...

    layer.js下载,需要配合jquery使用

    layer.js下载(配合jquery): layer.msg(弹出的内容) //如下 layer.msg("你好")

Global site tag (gtag.js) - Google Analytics