返回 layui弹出...... 登陆

layui弹出层

至诚网络 2019-06-28 15:57:02 389
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
	<script type="text/javascript" src="static/layui/layui.js"></script>
	<style type="text/css">
		.header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height: 37px;}
		.header button{float: right;}
		.header {border-bottom: 2px #009688 solid;}
	</style>
</head>
<body style="padding:10px;">
<div class="header">
	<span>管理员列表</span>
	<button class="layui-btn layui-btn-sm" onclick="add();">添加</button>
</div>
<table class="layui-table">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city', width:80}">城市</th>
      <th lay-data="{field:'sign', width:160}">签名</th>
      <th lay-data="{field:'experience', width:80, sort: true}">积分</th>
      
      <th lay-data="{field:'classify', width:80}">职业</th>
      <th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
    </tr>
  </thead>
   <tbody>
      <tr>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>
        	<button class="layui-btn layui-btn-xs">默认按钮</button>
        	<button class="layui-btn layui-btn-normal layui-btn-xs" onclick="add();">编辑</button>
		    <button class="layui-btn layui-btn-warm layui-btn-xs">按钮</button>
		    <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">取消</button>
        </td>
      </tr>
      <tr>
        <td>张爱玲</td>
        <td>汉族</td>
        <td>1920-09-30</td>
        <td>于千万人之中</td>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
      <tr>
        <td>Helen Keller</td>
        <td>拉丁美裔</td>
        <td>1880-06-27</td>
        <td> Life is either </td>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
      <tr>
        <td>岳飞</td>
        <td>汉族</td>
        <td>1103-北宋崇宁二年</td>
        <td>也抹不去“民族英雄”的事实</td>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
      <tr>
        <td>孟子</td>
        <td>华夏族(汉族)</td>
        <td>公元前-372年</td>
        <td>猿强,则国强。国强</td>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
    </tbody>
</table>
<script>
		layui.use(['layer'], function(){
		  var element = layui.element;
		  var layer = layui.layer;
		});
		function del(){
			layer.confirm('确定要删除吗?', {
				icon:2,  // 0到6
				btn: ['确定', '取消'] //可以无限个按钮
				}, function(index, layero){
				  //按钮【按钮一】的回调
				}, function(index){
				  //按钮【按钮二】的回调
			});
		}
    function add(){
      layer.open({
        type: 2, 
        title:'添加管理员',
        area:['480px','420px'],
        content: 'add.html'
      });
    }
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
	<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="title" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="title" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">管理</label>
    <div class="layui-input-inline">
      <input type="text" name="title" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-inline">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
  <label class="layui-form-label">状态</label>
  <div class="layui-input-block">
	<input type="checkbox" name="" title="禁用" lay-skin="primary">
  </div>
</div>
<button class="layui-btn">保存</button>
</form>

<script>
layui.use('form', function(){
  var form = layui.form;
});
</script>
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网