弹出框的应用以及点击事件

Original 2018-12-04 22:43:25 141
abstract:<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type='text/css' href='css/layui.css'> <script type="text/javasc

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type='text/css' href='css/layui.css'>

<script type="text/javascript" src='js/layui.js'></script>

</head>

<body>

      <div style="padding:10px;border-bottom:2px solid blue;line-height:30px">

<span>明星统计表</span>

<button class="layui-btn layui-btn-primary layui-btn-sm" style="float:right;">添加</button>

      </div>

      <table class="layui-table" >

  <thead>

    <tr>

      

      <th >姓名</th>

      <th >民族</th>

      <th >性别</th>

      <th >出生</th>

      <th >籍贯</th>

      <th >城市</th>

    </tr>

  </thead>


  <tbody>

<tr>

<td>刘德华</td>

<td>汉族</td>

<td>男</td>

<td>2018</td>

<td>福建</td>

<td>福州</td>

<td>

  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

<tr>

<td>刘德华</td>

<td>汉族</td>

<td>男</td>

<td>2018</td>

<td>福建</td>

<td>福州</td>

<td>

  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

<tr>

<td>刘德华</td>

<td>汉族</td>

<td>男</td>

<td>2018</td>

<td>福建</td>

<td>福州</td>

<td>

  <spam onclick="add()"><a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a></spam>

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</td>

</tr>

<tr>

  </tbody>

</table>

<script type="text/javascript">

function add(){

layer.open({

  type: 2,

  title:'添加管理员' ,

  area:['480px','500px'],

  content: '弹出内容.html' //这里content是一个普通的String

});

}


Correcting teacher:韦小宝Correction time:2018-12-05 09:26:56
Teacher's summary:写的还可以!课后记得要多练习!掌握layui的弹出事件再去看layui其他的组件就都不会太难了!

Release Notes

Popular Entries