layui弹出表单作业

原创 2018-12-28 12:46:06 207
摘要:1、添加页面代码<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>添加明星</title>   <link rel="sty

1、添加页面代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>添加明星</title>
  <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  <style type="text/css">
  .layui-form{margin: 12px;}
  </style>
</head>
<body>
<form action="">
  <div>
    <label>姓名</label>
    <div>
      <input type="text">
    </div>
  </div>
  <div>
    <label>照片</label>
    <button type="button" class="layui-btn layui-btn-sm" id="test1" style="background:#FF5722">
      <i>&#xe67c;</i>上传图片
    </button>
    <img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1528550987,4279669236&fm=170&s=FEB82EC71228491DE29528380300D01A&w=549&h=281&img.JPEG" style="height:35px;">
  </div>

<div class="layui-form-item layui-form-text">
    <label>简介</label>
    <div>
      <textarea name="desc" placeholder="请输入内容"></textarea>
    </div>
  </div>
  </div>
  <div>
    <label>在线状态</label>
    <div>
      <input type="checkbox" name="like[write]" title="在线">
    </div>
  </div>
  <div>
    <div>
      <button style="background:#FF5722;">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</body>
<script>
layui.use('form', function(){
  var form = layui.form;
});

layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
</html>

2、效果图

QQ截图20181228124518.jpg

批改老师:天蓬老师批改时间:2018-12-28 14:04:22
老师总结:这个页面貌似是弹出后的页面,弹出页面使用layui.open方法

发布手记

热门词条