layui實作同頁顯示多種時間樣式-Layui教程-PHP中文網

首頁

web前端

Layui教程

layui實作同頁顯示多種時間樣式

尚

Jun 06, 2020 pm 04:54 PM

layui

layui實作同頁顯示多種時間樣式

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知識請關注PHP中文網layui教程欄目

以上是layui實作同頁顯示多種時間樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7557

CakePHP 教程

1384

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法，包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數，以及監聽表單提交事件獲取資料。

layui怎麼傳數據 Apr 26, 2024 am 03:39 AM

使用 layui 傳輸資料的方法如下：使用 Ajax：建立請求對象，設定請求參數（URL、方法、資料），處理回應。使用內建方法：使用 $.post、$.get、$.postJSON 或 $.getJSON 等內建方法簡化資料傳輸。

layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能，可以實現自適應佈局。步驟包括：引用layui框架。定義自適應佈局容器，設定layui-container類別。使用響應式斷點（xs/sm/md/lg）隱藏特定斷點下的元素。利用網格系統（layui-col-）指定元素寬度。透過偏移量（layui-offset-）建立間距。使用響應式實用工具（layui-invisible/show/block/inline）控制元素的可見性和顯示方式。

layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素，提供預製元件簡化頁面建置；而Vue則是全端框架，注重資料綁定、元件化開發和狀態管理，更適合建構複雜應用程式。 layui學習簡單，適合快速建立頁面；Vue學習曲線陡峭，但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平，可以選擇合適的框架。

layui怎麼運行 Apr 04, 2024 am 03:42 AM

若要執行 layui，請執行以下步驟：1. 匯入 layui 腳本；2. 初始化 layui；3. 使用 layui 元件；4. 匯入 layui 樣式（可選）；5. 確保腳本相容並注意其他注意事項。透過這些步驟，您就可以使用 layui 的強大功能來建立 web 應用程式。

layui是什麼意思啊 Apr 04, 2024 am 04:33 AM

layui是一個前端UI框架，它提供了豐富的UI元件、工具和功能，幫助開發人員快速建立現代化、響應式和互動式Web應用程序，特點包括：靈活輕量、模組化設計、豐富的元件、強大的工具和易於自訂。它廣泛應用於各種Web應用程式的開發中，包括管理系統、電商平台、內容管理系統、社交網路和行動裝置應用程式。

layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架，提供了一套易用的UI元件和工具，幫助開發者快速建立響應式網路應用程式。其特點包括：模組化、輕量級、響應式，並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便，缺點是客製化較差、技術更新較慢。

See all articles

layui實作同頁顯示多種時間樣式

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題