一套开源的 Web UI 组件库。采用自身极简的模块化规范,并遵循原生 HTML/CSS/JS 的开发模式,极易上手,开箱即用。非常适合网页界面的快速构建。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

75 lines
1.9 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>合并版使用 - layui</title>
<link rel="stylesheet" href="../build/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<div id="demo1"></div>
<button class="layui-btn demo" data-type="test">测试弹出式Form</button>
<script src="../dist/layui.all.js"></script>
<script>
;!function(){
var $ = layui.jquery
,layer = layui.layer
,form = layui.form
,laypage = layui.laypage;
layer.ready(function(){
layer.msg('hello');
});
laypage.render({
elem: 'demo1'
,count: 100 //总页数
});
//触发事件
var active = {
test: function(){
layer.open({
type: 1
,resize: false
,content: ['<ul class="layui-form" style="margin: 10px;">'
,'<li class="layui-form-item">'
,'<label class="layui-form-label">邮箱激活</label>'
,'<div class="layui-input-block">'
,'<select name="activate">'
,'<option value="0">未激活</option>'
,'<option value="1">已激活</option>'
,'<select>'
,'</div>'
,'</li>'
,'<li class="layui-form-item" style="text-align:center;">'
,'<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>'
,'</li>'
,'</ul>'].join('')
,success: function(layero){
layero.find('.layui-layer-content').css('overflow', 'visible');
form.render().on('submit(*)', function(data){
layer.msg(JSON.stringify(data.field));
});
}
});
}
};
$('.demo').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
}();
</script>
</body>
</html>