layui弹出层

        layui弹出层

开发工具与关键技术:VisualStudio 与layui 

撰写时间:6月18号  

作者:  曾子千  

之前我有说过layui这个简单好用的前端插件,它适用于除了i6i7IE浏览器以外的所有的浏览器!(本文内容引用于layui)

本篇写layui里的一个功能:弹出层-layui.layer

1.基础参数

我们提到的基础参数主要指调用方法时用到的配置项,如:

layer.open({content:
‘’})layer.msg(’’, {time: 3})等,其中的content和time即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意,从2.3开始,无需通过layer.config来加载拓展模块

2.type - 基本层类型

类型:Number,默认:0

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

3.title - 标题

类型:String/Array/Boolean,默认:‘信息’

title支持三种类型的值,若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false

4.content - 内容

类型:String/DOM/Array,默认:’’

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同

  1. 例子:(1)独立使用:引入好layer.js后,直接用即可
    ript src=“layer.js”>

注意:如果你只是单独想使用 layer,你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js即可!(通过script标签引入layer.js后,直接用即可。)

   (2)Layui里使用: layui.use('layer', function(){
                    var layer = layui.layer;
		    layer.msg('hello');
		    }); 

注意:如果你使用的是 layui,那么你直接在官网下载 layui 框架即可,无需引入 jQuery 和 layer.js,但需要引入layui.css和layui.js即可!(通过layui.use(‘layer’, callback)加载模块)

  1.  样式简单使用例子:layer.open({
    
     	  title: '标题'
    
     	 ,content: '内容'
    
     	});     
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值