<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <title>layui在线调试</title>

  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1512984638002" media="all">

  <style>

    body{margin: 10px;}

    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}

  </style>

</head>

<body>

<table class="layui-hide" id="test" lay-filter="demo"></table>

<script type="text/html" id="barDemo">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>

  <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>

</script>

<div class="layui-tab layui-tab-brief" lay-filter="demo">

  <ul class="layui-tab-title">

    <li class="layui-this">演示说明</li>

    <li>日期</li>

    <li>分页</li>

    <li>上传</li>

  </ul>

  <div class="layui-tab-content">

    <div class="layui-tab-item layui-show">

      <div class="layui-carousel" id="test1">

        <div carousel-item>

          <div><p class="layui-bg-green demo-carousel">在这里，你将以最直观的形式体验 layui！</p></div>

          <div><p class="layui-bg-red demo-carousel">在编辑器中可以执行 layui 相关的一切代码</p></div>

          <div><p class="layui-bg-blue demo-carousel">你也可以点击左侧导航针对性地试验我们提供的示例</p></div>

          <div><p class="layui-bg-orange demo-carousel">如果最左侧的导航的高度超出了你的屏幕</p></div>

          <div><p class="layui-bg-cyan demo-carousel">你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可</p></div>

        </div>

      </div>

    </div>

    <div class="layui-tab-item">

      <div id="laydateDemo"></div>

    </div>

    <div class="layui-tab-item">

      <div id="pageDemo"></div>

    </div>

    <div class="layui-tab-item">

      <div class="layui-upload-drag" id="uploadDemo">

        <i class="layui-icon"></i>

        <p>点击上传，或将文件拖拽到此处</p>

      </div>

    </div>

  </div>

</div>

<blockquote class="layui-elem-quote layui-quote-nm" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>

<script src="//res.layui.com/layui/dist/layui.js?t=1512984638002"></script>

<script>

layui.config({

  version: '1512984638002' //为了更新 js 缓存，可忽略

});

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){

    layer.msg('切换了：'+ this.innerHTML);

    console.log(data);

  });

  //执行一个 table 实例

  table.render({

    elem: '#test'

    ,height: 332

    ,url: '/demo/table/user/' //数据接口

    ,page: true //开启分页

    ,cols: [[ //表头

      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}

      ,{field: 'username', title: '用户名', width:80}

      ,{field: 'sex', title: '性别', width:80, sort: true}

      ,{field: 'city', title: '城市', width:80}

      ,{field: 'sign', title: '签名', width: 170}

      ,{field: 'experience', title: '积分', width: 80, sort: true}

      ,{field: 'score', title: '评分', width: 80, sort: true}

      ,{field: 'classify', title: '职业', width: 80}

      ,{field: 'wealth', title: '财富', width: 135, sort: true}

      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}

    ]]

  });

  //监听工具条

  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

    var data = obj.data //获得当前行数据

    ,layEvent = obj.event; //获得 lay-event 对应的值

    if(layEvent === 'detail'){

      layer.msg('查看操作');

    } else if(layEvent === 'del'){

      layer.confirm('真的删除行么', function(index){

        obj.del(); //删除对应行（tr）的DOM结构

        layer.close(index);

        //向服务端发送删除指令

      });

    } else if(layEvent === 'edit'){

      layer.msg('编辑操作');

    }

  });

  //执行一个轮播实例

  carousel.render({

    elem: '#test1'

    ,width: '100%' //设置容器宽度

    ,height: 200

    ,arrow: 'none' //不显示箭头

    ,anim: 'fade' //切换动画方式

  });

  //将日期直接嵌套在指定容器中

  var dateIns = laydate.render({

    elem: '#laydateDemo'

    ,position: 'static'

    ,calendar: true //是否开启公历重要节日

    ,mark: { //标记重要日子

      '0-10-14': '生日'

      ,'2017-11-11': '剁手'

      ,'2017-11-30': ''

    }

    ,done: function(value, date, endDate){

      if(date.year == 2017 && date.month == 11 && date.date == 30){

        dateIns.hint('一不小心就月底了呢');

      }

    }

    ,change: function(value, date, endDate){

      layer.msg(value)

    }

  });

  //分页

  laypage.render({

    elem: 'pageDemo' //分页容器的id

    ,count: 100 //总页数

    ,skin: '#1E9FFF' //自定义选中色值

    //,skip: true //开启跳页

    ,jump: function(obj, first){

      if(!first){

        layer.msg('第'+ obj.curr +'页');

      }

    }

  });

  //上传

  upload.render({

    elem: '#uploadDemo'

    ,url: '' //上传接口

    ,done: function(res){

      console.log(res)

    }

  });

  //底部信息

  var footerTpl = lay('#footer')[0].innerHTML;

  lay('#footer')[0].innerHTML = layui.laytpl(footerTpl).render({});

});

</script>

</body>

</html>

接口地址为url。效果图如下：

layui虽然写得不错，但是想要修改却十分困难，适合后端与运维做小项目使用，不适合专业前端

layui学习<一>的更多相关文章

  1. layUI学习第二日：非模块化方法使用layUI

    layUI采用非模块化方式(即所有模块一次性加载),操作示例代码如下(如果问怎么创建项目和工具,参考layUI学习第一日的步骤): 运行的结果如下: 运行的显示不会太持久,过几秒就会消失,具体封装的代 ...

  2. layui学习地址

    --layui学习地址 ,相当之好用,非常感谢为我们工作和学习提供方便的才子们,谢谢~https://www.layui.com/demo/layim.html

  3. 前端UI框架之layUI学习

    用layUI框架来进行我们的页面速写,还是非常不错的,虽然2016年诞生,在我使用的过程中,觉得比bootstrap更轻盈点,总结下用的最多的组件. form表单下拉框: <!DOCTYPE h ...

  4. layui学习

    layui代码生成器 https://9499574.github.io/layui-form-create/ layui界面生成器 http://layuiout.magicalcoder.com/ ...

  5. layUI学习第三日：layUI模块化开发

    layui 定义为「经典模块化」,具备早前 AMD 的影子,又并非受限于 CommonJS 的那些条条框框, BootStrap 的不同在于:layui 糅合了自身对经典模块化的理解. 除了 layu ...

  6. layui 学习笔记一：layui table 查询、新增、编辑、删除

    一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...

  7. layUI学习第一日：myeclipse中使用layUI

    第一步:下载layUI,网址:https://www.layui.com/ 第二步:查看layUI解压后的内容,和官网解释各个文件夹的内容 第三部:在myeclipse中新建一个web project ...

  8. Layui学习笔记（一）—— 关于模块的扩展

    在使用layui的时候,总有官方自带模块不够用想自己扩展的时候,这时候我们就需要扩展模块了. 模块扩展有两种: (一)普通地扩展 layui.define( function (exports) { ...

  9. layUI学习第五日：layUI布局系列二

    6.列偏移 列偏移可针对不同屏幕的标准进行设定,只会在桌面屏幕下有效,当低于桌面屏幕的规定的临界值,就会堆叠排列. <div class="layui-col-md4 layui-co ...

随机推荐

  1. Select算法（最坏复杂度O(n)）

    #include<iostream> #include <stdio.h> #include <stdlib.h> #include <algorithm&g ...

  2. 使用SolrNet访问Solr-5.5.0

    由于今年年初刚发布的Solr-5.5.0,网上所能找到的资料少之又少,所以只能靠自己一点点摸索. 从某Hub上下载了SolrNet源码,按照教程提交文档或者查询均失败,无奈只得跟断点一点点差怎么回事. ...

  3. 在visual code的debugger for chrome中调试webpack构建的项目

    一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...

  4. 知乎日报 API的图片盗链问题

    由最近 基于vue的知乎日报单页应用 引发的问题 以及问题解决历程 通过 知乎日报API 基于vue做一个知乎日报的单页应用,在获取图片时存在一个图片盗链问题,图片无法加载 提示 403 错误, 最终 ...

  5. uva-10112-计算几何

    题意:给你一些点,求这些点组成的三角形面积最大,而且三角形内不能包含其他点 #include <iostream> #include <math.h> #include< ...

  6. rsyslog编译依赖问题解决

    bit-32-centos6.4测试loganalyzer+mysql+rsyslog   web界面中央日志分析系统.1,报json-c错误wget http://cloud.github.com/ ...

  7. 浅谈DNS域名解析

    定义:浏览器通过域名查询URL对应的IP 存储方式:1.浏览器缓存 2.操作系统缓存 3.路由器缓存 4.ISP(Internet Server Provider) 的DNS服务器 5.根服务器 Ti ...

  8. http chunked

    http chunked传输:将信息分段传输 好处: 不用指定content-length字段(总的要传输文件信息的长度),即可以将一整段信息分为若干段分别发送,最后发送chunked长度为0的信息表 ...

  9. java是如何编码解码的

    在上篇博客中LZ阐述了java各个渠道转码的过程,阐述了java在运行过程中那些步骤在进行转码,在这些转码过程中如果一处出现问题就很有可能会产生乱码!下面LZ就讲述java在转码过程中是如何来进行编码 ...

  10. Haskell语言学习笔记（45）Profunctor

    Profunctor class Profunctor p where dimap :: (a -> b) -> (c -> d) -> p b c -> p a d d ...