2016-11-10 02:31:39 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<title>layer弹层 - layui</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body{padding: 50px 100px;}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test">测试一</button>
|
|
|
|
|
<button class="layui-btn demo" data-type="test2">测试二</button>
|
2017-02-21 06:48:54 +08:00
|
|
|
|
<button class="layui-btn demo" data-type="test3">捕获页</button>
|
2016-11-10 02:31:39 +08:00
|
|
|
|
|
2017-02-21 06:48:54 +08:00
|
|
|
|
<div id="bbs_update_form" style="display: none;padding: 20px;">
|
|
|
|
|
<form class="layui-form layui-form-pane" id="update_bbs_info_form">
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">论坛封面</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<input type="text" name="bbs_bg" autocomplete="off" placeholder="请输入图片地址(1045px*180px)" class="layui-input" value="http://q.jinsom.cn/wp-content/uploads/2016/12/bbs_bg.jpg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">论坛头像</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<input type="text" name="bbs_avatar" autocomplete="off" placeholder="请输入图片地址(150px*150px)" class="layui-input" value="http://q.jinsom.cn/wp-content/uploads/2016/12/timg.jpg">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">论坛介绍</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<textarea placeholder="50字内" class="layui-textarea" name="bbs_desc" >LightSNS是一款wordpress轻社交主题,这里是关于你这个论坛的描述,随便扯吧。
|
|
|
|
|
</textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">论坛公告</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<textarea placeholder="100字内" class="layui-textarea" name="bbs_notice">公告</textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">付费功能</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<input type="checkbox" name="bbs_fufei" lay-skin="switch" title="开启付费可看功能" checked lay-skin="switch">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item">
|
|
|
|
|
<label class="layui-form-label">验证码</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<input type="checkbox" name="bbs_captcha" lay-skin="switch" title="开启验证码功能" >
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-form-item" style="text-align: right;">
|
|
|
|
|
<div class="layui-btn" id="bbs_update_button">更新</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type='text/javascript' src='http://q.jinsom.cn/wp-content/themes/jinsomQ/js/jquery.min.js?ver=0.3'></script>
|
2016-11-10 02:31:39 +08:00
|
|
|
|
<script src="../src/layui.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
layui.use('layer', function(){
|
|
|
|
|
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
|
|
|
|
|
|
|
|
|
|
//触发事件
|
|
|
|
|
var active = {
|
|
|
|
|
test: function(){
|
|
|
|
|
layer.alert('你好么,体验者');
|
|
|
|
|
}
|
|
|
|
|
,test2: function(){
|
|
|
|
|
layer.open({
|
|
|
|
|
type: 2
|
|
|
|
|
,content: 'http://fly.layui.com/'
|
|
|
|
|
,area: ['375px', '500px']
|
|
|
|
|
,maxmin: true
|
|
|
|
|
})
|
|
|
|
|
}
|
2017-02-21 06:48:54 +08:00
|
|
|
|
,test3: function(){
|
|
|
|
|
layer.open({
|
|
|
|
|
title:'更新论坛信息',
|
|
|
|
|
type: 1,
|
|
|
|
|
skin: 'layui-layer-rim',
|
|
|
|
|
area: ['500px', '580px'],
|
|
|
|
|
content: $('#bbs_update_form')
|
|
|
|
|
});
|
|
|
|
|
}
|
2016-11-10 02:31:39 +08:00
|
|
|
|
};
|
|
|
|
|
$('.demo').on('click', function(){
|
|
|
|
|
var type = $(this).data('type');
|
|
|
|
|
active[type] ? active[type].call(this) : '';
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|