<!--将Layuigg改导入 的包导入,官网说的很清楚。然后注意将head头文件中的href和src都对应好自己导入的layui的包就行了-->
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用Layui</title>
<link rel="stylesheet" href="layui-v2.1.5/layui/css/layui.css">
<link rel="stylesheet" href="css/user.css">
<script type="text/javascript" src="js/user.js"></script>
<script src="layui-v2.1.5/layui/layui.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#show").click(function() {
$("#p1").toggle();
$("#bt1").toggle();
$("#bt2").toggle();
});
});
</script>
<script>
//Demo
layui.use('form', function() {
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data) {
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</head>
<body>
<form class="layui-form" action="">
<div>
<label class="layui-form-label" style="margin-left: 70px;">拥有角色</label>
<div>
<div class="layui-input-block">
<input id="show" type="text" name="role" lay-verify="required" placeholder="点击我选择 / 关闭角色 " autocomplete="off" class="layui-input" style="width: 200px;">
<img src="img/2017-09-25_171846.png" id="bt1" style="margin-left: 235px;margin-top: -60px;" />
<img src="img/2017-09-25_171907.png" id="bt2" style="margin-left: 235px;margin-top: -60px; display: none;" />
</div>
<div id="p1" style="height:140px;width:200px;background-color:honeydew; margin-left: 180px; margin-top: -15px; display: none; z-index: 2; position: absolute;"><br />
<input name="like1[read]" lay-skin="primary" title="民警" type="checkbox"><br />
<br />
<input name="like1[read]" lay-skin="primary" title="刑警" type="checkbox"><br />
<br />
<input name="like1[read]" lay-skin="primary" title="交警" type="checkbox"><br />
<br />
<input name="like1[read]" lay-skin="primary" title="防爆警" type="checkbox">
</div>
</div>
</div>
</form>
</body>
</html>