1.去官网下载jayer
2.加载jq
注意：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/layer.css" rel="stylesheet">
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/layer.js"></script>
<script>
$(function(){
/**
* layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
* 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
*/
$("#a1").click(function() {
// alert('绑定上事件了');
layer.msg("layer引入进来了", {time:1000 });
// layer.confirm("这里是提示的内容", function () {
// alert("点击确定进入的事件");
// }, function () {
// alert("点击取消后进入的时间");
// });
// alert("layer是异步的执行，不等你点确认或者取消，这里都会执行到，所以后面要执行的代码都要放到layer里面的回调函数中");
});
$("#a2").click(function() {
layer.open({
type:0,
title:['自定义标题', 'font-size:18px;'],
content:'提示的内容'
});
});
// 样式不会搞
$("#a3").click(function() {
layer.open({
skin: 'demo-class',
content: 'haha'
})
});
// 图标
$("#a4").click(function() {
// layer.alert('酷毙了', {icon: 1});
layer.msg('酷毙了', {icon: 1});
// layer.alert('不开心', {icon: 5});
layer.msg('不开心', {icon: 5, time: 3000});
});
// 按钮1
$("#btn1").click(function() {
layer.confirm('这是第一个按钮',function() {
console.log('确认后回调');
},function() {
console.log('取消后回调');
});
});
// 按钮2
$("#btn2").click(function() {
layer.confirm('纳尼？', {
btn: ['按钮一', '按钮二', '按钮三','按钮四'] //可以无限个按钮
,btn4: function(index, layero){
//按钮【按钮三】的回调
console.log('按钮三的回调');
},btn3: function() {
console.log('按钮三的回调');
},btn2: function() {
console.log('按钮二的回调');
},btn1: function() {
console.log('按钮一的回调');
}
});
});
// 按钮3
$("#btn3").click(function() {
layer.open({
content: 'test'
,btn: ['按钮一', '按钮二', '按钮三']
,yes: function(index, layero){
//按钮【按钮一】的回调
console.log('按钮【按钮一】的回调');
console.log(index);
console.log(layero);
// layer.close(index);
},btn2: function(index, layero){
//按钮【按钮二】的回调
console.log('按钮【按钮二】的回调');
},btn3: function(index, layero){
//按钮【按钮三】的回调
console.log('按钮【按钮三】的回调');
},cancel: function(){
//右上角关闭回调
console.log('右上角关闭回调');
}
});
});
// layer.alert 普通信息框
$("#alert1").click(function() {
layer.alert('简单的提示');
});
$("#alert2").click(function() {
layer.alert('加一个表情', {icon: 1});
});
$("#alert3").click(function() {
layer.alert('有回调了 控制台有输出', {icon: 1}, function(index) {
window.console.log('alert的回调函数');
layer.close(index); // 关闭提示框
});
});
// layer.confirm 询问框
$("#confirm1").click(function() {
// layer.confirm('is not? 确认控制台输出', function(index){
// //do something
// console.log('确认的回调');
// layer.close(index);
// });
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
});
$("#confirm2").click(function() {
// layer.confirm('is not? 确认控制台输出', {icon: 3}, function(index){
// //do something
// console.log('确认的回调');
// layer.close(index);
// });
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['90%', '90%'],
content: 'mobile/' //iframe的url
});
});
$("#confirm3").click(function() {
layer.confirm('is not? 确认控制台输出', {icon: 3, title:'仓老师提示：'}, function(index){
//do something
console.log('确认的回调');
layer.close(index);
});
});
// layer.msg
$("#msg1").click(function() {
layer.msg('弱弱的提示');
});
$("#msg2").click(function() {
layer.msg("有表情的提示", {icon: 6});
});
$("#msg3").click(function() {
layer.msg("提示会显示3秒", {icon: 6, time: 2000 });
});
$("#msg4").click(function() {
layer.msg("提示结束后 执行方法 控制台", {icon: 6, time: 2000 }, function() {
console.log("提示结束，我就执行");
});
});
// layer.load
$("#load1").click(function() {
var index = layer.load();
// layer.close(index);
});
$("#load2").click(function() {
var index = layer.load(1);
// layer.close(index);
});
$("#load3").click(function() {
console.log("最长等待3秒");
var index = layer.load(2, {time: 3000});
// layer.close(index);
});
$("#load4").click(function() {
console.log("控制关闭");
var index = layer.load();
layer.close(index);
});
// tips 提示的位置比msg更精准
$("#tips1").click(function() {
layer.tips('只想精准的提示', this); // "tips4"
});
$("#tips2").click(function() {
layer.tips('只想精准的提示', "#tips3"); //可以提示到别人头上去
});
$("#tips3").click(function() {
layer.tips('在上面', "#msg4", {
tips:1 // 提示出现的位置 1 2 3 4 上 右 下 左 当下面没有位置时显示在上面
});
});
});
</script>
</head>
<body>
<a id="a1" href="javascript:;">引入layer</a><br/>
<a id="a2" href="javascript:;">层1</a><br/>
<a id="a3" href="javascript:;">样式</a><br/>
<a id="a4" href="javascript:;">图标</a><br/>
<a id="btn1" href="javascript:;">按钮1</a><a id="btn2" href="javascript:;">按钮2</a><a id="btn3" href="javascript:;">按钮3</a><br/>
<h5>layer.alert 普通信息框</h5>
<button id="alert1">按钮一</button>
<button id="alert2">按钮二</button>
<button id="alert3">按钮二</button>
<h5>layer.confirm 询问框</h5>
<button id="confirm1">按钮一</button>
<button id="confirm2">按钮二</button>
<button id="confirm3">按钮二</button>
<h5>layer.msg(content, options, end) - 提示框</h5>
<button id="msg1">按钮一</button>
<button id="msg2">按钮二</button>
<button id="msg3">按钮三</button>
<button id="msg4">按钮四</button>
<h5>layer.load(icon, options) - 加载层</h5>
<button id="load1">按钮一</button>
<button id="load2">按钮二</button>
<button id="load3">按钮三</button>
<button id="load4">按钮四</button>
<h5>layer.tips(content, follow, options) - tips层</h5>
<button id="tips1">按钮一</button>
<button id="tips2">按钮二</button>
<button id="tips3">按钮三</button>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
