집 >웹 프론트엔드 >레이이 튜토리얼 >layui는 동일한 페이지에 여러 시간 스타일 표시를 구현합니다.

layui는 동일한 페이지에 여러 시간 스타일 표시를 구현합니다.

尚앞으로: 2020-06-06 16:54:133024검색

layui는 동일한 페이지에 여러 시간 스타일을 표시하도록 구현합니다. 코드는 다음과 같습니다.

<!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=1591161919722" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>
 
<table class="layui-hide" id="demo" lay-filter="test"></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>
    <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 class="layui-hide" id="uploadDemoView">
          <hr>
          <img src="" alt="上传成功后渲染" style="max-width: 100%">
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div id="sliderDemo" style="margin: 50px 20px;"></div>
    </div>
  </div>
</div>

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

  
<script src="//res.layui.com/layui/dist/layui.js?t=1591161919722"></script>
<script>
layui.config({
  version: &#39;1591161919722&#39; //为了更新 js 缓存，可忽略
});
 
layui.use([&#39;laydate&#39;, &#39;laypage&#39;, &#39;layer&#39;, &#39;table&#39;, &#39;carousel&#39;, &#39;upload&#39;, &#39;element&#39;, &#39;slider&#39;], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  
  //向世界问个好
  layer.msg(&#39;Hello World&#39;);
  
  //监听Tab切换
  element.on(&#39;tab(demo)&#39;, function(data){
    layer.tips(&#39;切换了 &#39;+ data.index +&#39;：&#39;+ this.innerHTML, this, {
      tips: 1
    });
  });
  
  //执行一个 table 实例
  table.render({
    elem: &#39;#demo&#39;
    ,height: 420
    ,url: &#39;/demo/table/user/&#39; //数据接口
    ,title: &#39;用户表&#39;
    ,page: true //开启分页
    ,toolbar: &#39;default&#39; //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    ,totalRow: true //开启合计行
    ,cols: [[ //表头
      {type: &#39;checkbox&#39;, fixed: &#39;left&#39;}
      ,{field: &#39;id&#39;, title: &#39;ID&#39;, width:80, sort: true, fixed: &#39;left&#39;, totalRowText: &#39;合计：&#39;}
      ,{field: &#39;username&#39;, title: &#39;用户名&#39;, width:80}
      ,{field: &#39;experience&#39;, title: &#39;积分&#39;, width: 90, sort: true, totalRow: true}
      ,{field: &#39;sex&#39;, title: &#39;性别&#39;, width:80, sort: true}
      ,{field: &#39;score&#39;, title: &#39;评分&#39;, width: 80, sort: true, totalRow: true}
      ,{field: &#39;city&#39;, title: &#39;城市&#39;, width:150} 
      ,{field: &#39;sign&#39;, title: &#39;签名&#39;, width: 200}
      ,{field: &#39;classify&#39;, title: &#39;职业&#39;, width: 100}
      ,{field: &#39;wealth&#39;, title: &#39;财富&#39;, width: 135, sort: true, totalRow: true}
      ,{fixed: &#39;right&#39;, width: 165, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}
    ]]
  });
  
  //监听头工具栏事件
  table.on(&#39;toolbar(test)&#39;, function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
      case &#39;add&#39;:
        layer.msg(&#39;添加&#39;);
      break;
      case &#39;update&#39;:
        if(data.length === 0){
          layer.msg(&#39;请选择一行&#39;);
        } else if(data.length > 1){
          layer.msg(&#39;只能同时编辑一个&#39;);
        } else {
          layer.alert(&#39;编辑 [id]：&#39;+ checkStatus.data[0].id);
        }
      break;
      case &#39;delete&#39;:
        if(data.length === 0){
          layer.msg(&#39;请选择一行&#39;);
        } else {
          layer.msg(&#39;删除&#39;);
        }
      break;
    };
  });
  
  //监听行工具事件
  table.on(&#39;tool(test)&#39;, function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === &#39;detail&#39;){
      layer.msg(&#39;查看操作&#39;);
    } else if(layEvent === &#39;del&#39;){
      layer.confirm(&#39;真的删除行么&#39;, function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(layEvent === &#39;edit&#39;){
      layer.msg(&#39;编辑操作&#39;);
    }
  });
  
  //执行一个轮播实例
  carousel.render({
    elem: &#39;#test1&#39;
    ,width: &#39;100%&#39; //设置容器宽度
    ,height: 200
    ,arrow: &#39;none&#39; //不显示箭头
    ,anim: &#39;fade&#39; //切换动画方式
  });
  
  //将日期直接嵌套在指定容器中
  var dateIns = laydate.render({
    elem: &#39;#laydateDemo&#39;
    ,position: &#39;static&#39;
    ,calendar: true //是否开启公历重要节日
    ,mark: { //标记重要日子
      &#39;0-10-14&#39;: &#39;生日&#39;
      ,&#39;2020-01-18&#39;: &#39;小年&#39;
      ,&#39;2020-01-24&#39;: &#39;除夕&#39;
      ,&#39;2020-01-25&#39;: &#39;春节&#39;
      ,&#39;2020-02-01&#39;: &#39;上班&#39;
    } 
    ,done: function(value, date, endDate){
      if(date.year == 2017 && date.month == 11 && date.date == 30){
        dateIns.hint(&#39;一不小心就月底了呢&#39;);
      }
    }
    ,change: function(value, date, endDate){
      layer.msg(value)
    }
  });
  
  //分页
  laypage.render({
    elem: &#39;pageDemo&#39; //分页容器的id
    ,count: 100 //总页数
    ,skin: &#39;#1E9FFF&#39; //自定义选中色值
    //,skip: true //开启跳页
    ,jump: function(obj, first){
      if(!first){
        layer.msg(&#39;第&#39;+ obj.curr +&#39;页&#39;, {offset: &#39;b&#39;});
      }
    }
  });
  
  //上传
  upload.render({
    elem: &#39;#uploadDemo&#39;
    ,url: &#39;https://httpbin.org/post&#39; //改成您自己的上传接口
    ,done: function(res){
      layer.msg(&#39;上传成功&#39;);
      layui.$(&#39;#uploadDemoView&#39;).removeClass(&#39;layui-hide&#39;).find(&#39;img&#39;).attr(&#39;src&#39;, res.files.file);
      console.log(res)
    }
  });
  
  //滑块
  var sliderInst = slider.render({
    elem: &#39;#sliderDemo&#39;
    ,input: true //输入框
  });
  
  //底部信息
  var footerTpl = lay(&#39;#footer&#39;)[0].innerHTML;
  lay(&#39;#footer&#39;).html(layui.laytpl(footerTpl).render({}))
  .removeClass(&#39;layui-hide&#39;);
});
</script>
</body>
</html>

효과는 다음과 같습니다.

layui에 대한 자세한 내용은layui를 참조하세요. PHP 중국어 웹사이트의 튜토리얼 칼럼

위 내용은 layui는 동일한 페이지에 여러 시간 스타일 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php layui

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Layui 로그인 후 토큰 문제가 해결되었습니다.다음 기사：Layui 로그인 후 토큰 문제가 해결되었습니다.