<!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. python 四种数值类型(int,long,float,complex)介绍

    Python支持四种不同的数值类型,包括int(整数)long(长整数)float(浮点实际值)complex (复数),本文章向码农介绍python 四种数值类型,需要的朋友可以参考一下. 数字数据 ...

  2. php metaphone()函数解析

    php metaphone() 函数计算字符串的 metaphone 键,本文章向码农们介绍 php metaphone() 函数的基本用法和实例,需要的码农可以参考一下本文章的方法和实例. 定义和用 ...

  3. Python中的LEGB规则

    目标 命名空间和作用域——Python从哪里查找变量名? 我们能否同时定义或使用多个对象的变量名? Python查找变量名时是按照什么顺序搜索不同的命名空间? 命名空间与作用域的介绍 命名空间 大约来 ...

  4. 阻止form提交数据，通过ajax等上传数据

    btn.click(function (event) { event.preventDefault(); // 组织发送 $.ajax({ ...}) })

  5. win10下装的ubuntu14.04双系统，ubuntu系统访问win10磁盘问题

    参考:https://blog.csdn.net/u010426270/article/details/52420231 ubuntu下 解决方法: 1. 在终端输入如下命令,查看分区挂载情况 sud ...

  6. leetcode150

    public class Solution { public int EvalRPN(string[] tokens) { Stack<int> ST_NUM = new Stack< ...

  7. postgresql 的操作

    基本操作: \o /tmp/11.txt ,查询结果输出到文件 \d 查询table结构 \x 切换显示方式 postgresql中可以导出某个sql的执行结果到文件中,方法是在psql中首先执行\o ...

  8. python内存泄漏

    记录: 一个脚本在连续运行后,使用内存越来越大,在循环后手动添加gc.collect()没有作用. 尝试方法: 去除所有函数中当作参数传入的全局变量 使用全局redis对象,不再当作参数传入 循环末尾 ...

  9. Css 特性之 transition和transform

    CSS 有一些新的属性,可以简化代码的书写,用简单的代码就可以实现复杂的变化.不用像 js 那样,需要写很多代码 这里主要介绍三个属性:transition ,transform,以及translat ...

  10. Haskell语言学习笔记（44）Lens（2）

    自定义 Lens 和 Isos -- Some of the examples in this chapter require a few GHC extensions: -- TemplateHas ...