码迷,mamicode.com
首页 > 其他好文 > 详细

layui 使用

时间:2018-04-28 21:09:33      阅读:975      评论:0      收藏:0      [点我收藏+]

标签:cal   brief   device   ble   end   image   width   ace   财富   

1.下载后解压如图

技术分享图片

 

2.示例

技术分享图片技术分享图片技术分享图片

 

home.thml代码

<!DOCTYPE html>
<html>
<!-- head -->
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>

<body>
              
<!-- 导航栏 -->
<ul class="layui-nav">
  <li class="layui-nav-item">
    <a href="">控制台<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">个人中心<span class="layui-badge-dot"></span></a>
  </li>
  <li class="layui-nav-item" lay-unselect="">
    <a href="javascript:;"><img src="../layui/images/face/63.gif" class="layui-nav-img"></a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">修改信息</a></dd>
      <dd><a href="javascript:;">安全管理</a></dd>
      <dd><a href="javascript:;">退了</a></dd>
    </dl>
  </li>
</ul>


<script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
<!-- 内容 -->

<!-- 表格-->
<table class="layui-hide" id="test"></table>

<!-- -->
<div class="layui-tab layui-tab-brief" lay-filter="demo">
  <ul class="layui-tab-title">
    <li id="idli1" class="layui-this">演示说明</li>
    <li id="idli2">日期</li>
    <li id="idli3">分页</li>
    <li id="idli4">上传</li>
  </ul>
  
</div>

<script>
layui.use([laydate, laypage, layer, table, carousel, upload, element], function(){

  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
  
  //向世界问个好
  //layer.msg(‘Hello World‘);
  
  //监听Tab切换
  element.on(tab(demo), function(data){
    //debugger;
    layer.msg(切换了:+ this.innerHTML);
    //var tt = this.getAttribute("id");
    //layer.msg(tt);
    console.log(data);
  });
  
  table.render({
    elem: #test
    ,url:/demo/table/user/
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    ,cols: [[
      {field:id, width:80, title: ID, sort: true}
      ,{field:username, width:80, title: 用户名}
      ,{field:sex, width:80, title: 性别, sort: true}
      ,{field:city, width:80, title: 城市}
      ,{field:sign, title: 签名, width: 30%, minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
      ,{field:experience, title: 积分, sort: true}
      ,{field:score, title: 评分, sort: true}
      ,{field:classify, title: 职业}
      ,{field:wealth, width:137, title: 财富, sort: true}
    ]]
  });
});
</script>

 


 
 
 
 
<!-- 尾部 -->



</body>
</html>

 

layui 使用

标签:cal   brief   device   ble   end   image   width   ace   财富   

原文地址:https://www.cnblogs.com/youdream/p/8969240.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!