12.弹出层.上
本节课我们来开始了解 Layui 的内置模块：弹出层的方法演示。
一．方法演示
1. layer 模块本身可以作为独立的组件来使用，我们这里探讨基于 layui 下；
// 加载 layer 模块
layui . use ([ 'layer' , 'jquery' ], () => {
const $ = layui . jquery
const layer = layui . layer
// 在这里编写你的 layer
})
2. 在 layer 弹出层模块中，有很多种方法，这里先全部列出来；
< button class ="layui-btn" id ="btn-msg" >msg / 提示 button >
< button class ="layui-btn" id ="btn-open" >open / 核心 button >
< button class ="layui-btn" id ="btn-alert" >alert / 弹窗 button >
< button class ="layui-btn" id ="btn-confirm" >confirm / 询问 button >
< button class ="layui-btn" id ="btn-prompt" >prompt / 输入 button >
< button class ="layui-btn" id ="btn-tab" >tab / 切换 button >
< button class ="layui-btn" id ="btn-photos" >photos / 图片 button >
//msg 提示框
$ ( '#btn-msg' ). click (() => {
// 语法： layer.msg(content, options, end)
layer . msg ( ' 提示框 ' )
})
//open 核心，其它方法基于此
$ ( '#btn-open' ). click (() => {
// 语法： layer.open(option)
layer . open ({
title : ' 标题 ' ,
content : ' 内容 ~'
})
})
//alert 弹窗
$ ( '#btn-alert' ). click (() => {
// 语法： layer.alert(content, options, yes)
layer . alert ( ' 弹窗 ' )
})
//confirm 询问
$ ( '#btn-confirm' ). click (() => {
// 语法： layer.confirm(content, options, yes, cancel)
layer . confirm ( ' 询问 ' )
})
//prompt 输入
$ ( '#btn-prompt' ). click (() => {
// 语法： layer.prompt(options, yes)
layer . prompt ( ' 输入 ' )
})
//tab 切换
$ ( '#btn-tab' ). click (() => {
// 语法： layer.tab(options)
layer . tab ({
area : [ '500px' , '350px' ],
tab : [{
title : 'tab1' ,
content : ' 内容 1~'
},{
title : 'tab2' ,
content : ' 内容 2~'
},{
title : 'tab3' ,
content : ' 内容 3~'
}]
})
})
//photos 输入
$ ( '#btn-photos' ). click (() => {
// 语法： layer.photos(options)
$ . getJSON ( 'photo.json' , ( json ) => {
layer . photos ({
photos : json ,
anim : 5
})
})
})