碼上歡樂
相關內容    簡體    繁體

學習layer和laydate的官方文檔

本文轉載自   查看原文   2018-07-23 19:00   1154    layui/ 后台管理學習

　　layer是一個Web彈窗組件，laydate是一個日期和時間組件。二者都是layui的組件。layer的官方文檔：http://www.layui.com/doc/modules/layer.html/，laydate的官方文檔：http://www.layui.com/doc/modules/laydate.html，layer可以獨立使用，也可以通過layui模塊化使用。具體使用參考layer的官方文檔。

一、學習layer中常用的基礎參數

　　一般在調用layer的open或msg方法時用到的基礎參數（配置項）如：layer.open({content : ' '}),layer.msg({' ' , time : 3})等。

　　layer提供了5中層類型：0（信息框），1（頁面層），2（iframe層），3（加載層），4（tips層）。默認是0，layer.open({type : 2})，這樣的描述方式可以改變層類型。

　　layer的標題：layer.open({title : false})表示沒有標題，layer.open({title : '班級信息'})表示標題，layer.open({title : ['班級信息',font-size:18px;]})表示標題可以添加任意CSS樣式。

　　layer的內容：content可以傳HTML頁面，可以指定DOM，更可以隨着type的不同而不同。官方文檔的示例如下。

  //頁面層

  1. layer.open({
  2. type: 1,
  3. content: '傳入任意的文本或html' //這里content是一個普通的String
  4. });
  1. layer.open({
  2. type: 1,
  3. content: $('#id') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
  4. });

  //Ajax獲取

  1. $.post('url', {}, function(str){
  2. layer.open({
  3. type: 1,
  4. content: str //注意，如果str是object，那么需要字符拼接。
  5. });
  6. });

  //iframe層

  1. layer.open({
  2. type: 2,
  3. content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no']
  4. });

//tips層

  1. layer.open({
  2. type: 4,
  3. content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM
  4. });

　　layer的寬高：默認情況下寬高是自適應的，只定義寬度如area : '500px'，高度依然是自適應的。寬高都定義如area : ['500px','300px']。layer默認的坐標是垂直水平居中。

　　layer的層彈出成功后的回調方法success：當需要在層創建完畢時即執行一些語句，可以通過該回調。success會攜帶兩個參數分別是當前層的DOM和當前層的索引。官方文檔示例如下。

  1. layer.open({
  2. content: '測試回調',
  3. success: function(layero, index){
  4. console.log(layero, index);
  5. }
  6. });

　　layer的原始核心方法open：所有創建層的方式都是layer.open({options})，創建任何類型的層都會返回當前層索引index,index是layer.close()等方法的必傳參數，options是基礎參數.

　　layer的提示框：layer.msg(content,options,end)，一般3s后自動消失。官方文檔示例如下。

  1. //eg1
  2. layer.msg('只想弱弱提示');
  3. //eg2
  4. layer.msg('有表情地提示', {icon: 6});
  5. //eg3
  6. layer.msg('關閉后想做些什么', function(){
  7. //do something
  8. });
  9. //eg
  10. layer.msg('同上', {
  11. icon: 1,
  12. time: 2000 //2秒關閉（如果不配置，默認是3秒）
  13. }, function(){
  14. //do something
  15. });

二、學習laydate中常用的時間控件

　　在layui模塊中使用，官方文檔示例如下。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>layDate快速使用</title>
  6. <link rel="stylesheet" href="/static/build/layui.css" media="all">
  7. </head>
  8. <body>
  10. <div class="layui-inline"> <!-- 注意：這一層元素並不是必須的 -->
  11. <input type="text" class="layui-input" id="test1">
  12. </div>
  14. <script src="/static/build/layui.js"></script>
  15. <script>
  16. layui.use('laydate', function(){
  17. var laydate = layui.laydate;
  19. //執行一個laydate實例
  20. laydate.render({
  21. elem: '#test1' //指定元素
  22. });
  23. });
  24. </script>
  25. </body>
  26. </html>

　　作為獨立組件使用，官方文檔如下。

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>使用 layDate 獨立版</title>
  6. </head>
  7. <body>
  9. <input type="text" id="test1">
  11. <script src="laydate.js"></script>
  12. <script>
  13. //執行一個laydate實例
  14. laydate.render({
  15. elem: '#test1' //指定元素
  16. });
  17. </script>
  18. </body>
  19. </html>

　　laydate的綁定元素：用於綁定日期渲染的元素，值一般為選擇器或DOM對象，官方文檔示例如下。

  1. laydate.render({
  2. elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
  3. });

　　laydate的時間選擇類型：用於提供不同的選擇器類型。官方文檔示例如下。

  1. //年選擇器，只提供年列表選擇
  2. laydate.render({
  3. elem: '#test'
  4. ,type: 'year'
  5. });
  7. //年月選擇器，只提供年、月選擇
  8. laydate.render({
  9. elem: '#test'
  10. ,type: 'month'
  11. });
  13. //日期選擇器，可選擇：年、月、日。type默認值，一般可不填
  14. laydate.render({
  15. elem: '#test'
  16. //,type: 'date' //默認，可不填
  17. });
  19. //時間選擇器，只提供時分秒
  20. laydate.render({
  21. elem: '#test'
  22. ,type: 'time'
  23. });
  25. //日期時間選擇器，可選擇：年、月、日、時、分、秒
  26. laydate.render({
  27. elem: '#test'
  28. ,type: 'datetime'
  29. });

　　laydate的開啟左右面板范圍選擇：默認是false，改為true則用“-”分割，也可自定義分割字符。五種類型的時間選擇器都支持左右面板，將基礎參數添加range : true或者自定義range : '~'。

　　laydate的日期時間自定義格式：通過不同格式符可以組合成一段日期時間字符串。

yyyy 年份，至少四位數。如果不足四位，則前面補零
y 年份，不限制位數，即不管年份多少位，前面均不補零
MM 月份，至少兩位數。如果不足兩位，則前面補零。
M 月份，允許一位數。
dd 日期，至少兩位數。如果不足兩位，則前面補零。
d 日期，允許一位數。
HH 小時，至少兩位數。如果不足兩位，則前面補零。
H 小時，允許一位數。
mm 分鍾，至少兩位數。如果不足兩位，則前面補零。
m 分鍾，允許一位數。
ss 秒數，至少兩位數。如果不足兩位，則前面補零。
s 秒數，允許一位數。

 

 

 

 

 

 

 

 

 

　　

yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
yyyy年MM月dd日 HH時mm分ss秒 2017年08月18日 20時08分08秒
yyyyMMdd 20170818
dd/MM/yyyy 18/08/2017
yyyy年M月 2017年8月
M月d日 8月18日
北京時間：HH點mm分 北京時間：20點08分
yyyy年的M月某天晚上，大概H點 2017年的8月某天晚上，大概20點

 

 

 

 

 

 

 

 

 

  1. //自定義日期格式
  2. laydate.render({
  3. elem: '#test'
  4. ,format: 'yyyy年MM月dd日' //可任意組合
  5. });

　　laydate的初始值：支持符合format參數設定的日期格式，或New Date()。官方文檔示例如下。

  1. //傳入符合format格式的字符給初始值
  2. laydate.render({
  3. elem: '#test'
  4. ,value: '2018-08-18' //必須遵循format參數設定的格式
  5. });
  7. //傳入Date對象給初始值
  8. laydate.render({
  9. elem: '#test'
  10. ,value: new Date(1534766888000) //參數即為：2018-08-20 20:08:08 的時間戳
  11. });

　　laydate的初始值填充：用於控制是否自動向元素填充初始值。需配合value參數使用，官方文檔示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,value: '2017-09-10'
  4. ,isInitValue: false //是否允許填充初始值，默認為 true
  5. });

　　laydate的最大/最小范圍內的日期時間值：設定有限范圍的日期或者時間值，不再范圍內的將不可選中。官方文檔示例如下。

1. 如果值為字符類型，則：年月日必須用 -（中划線）分割、時分秒必須用 :（半角冒號）號分割。這里並非遵循 format 設定的格式
2. 如果值為整數類型，且數字＜86400000，則數字代表天數，如：min: -7，即代表最小日期在7天前，正數代表若干天后
3. 如果值為整數類型，且數字 ≥ 86400000，則數字代表時間戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

 

 

 

  1. //日期有效范圍只限定在：2017年
  2. laydate.render({
  3. elem: '#test'
  4. ,min: '2017-1-1'
  5. ,max: '2017-12-31'
  6. });
  8. //日期有效范圍限定在：過去一周到未來一周
  9. laydate.render({
  10. elem: '#test'
  11. ,min: -7 //7天前
  12. ,max: 7 //7天后
  13. });
  15. //日期時間有效范圍的設定:
  16. laydate.render({
  17. elem: '#test'
  18. ,type: 'datetime'
  19. ,min: '2017-8-11 12:30:00'
  20. ,max: '2017-8-18 12:30:00'
  21. });
  23. //時間有效范圍設定在: 上午九點半到下午五點半
  24. laydate.render({
  25. elem: '#test'
  26. ,type: 'time'
  27. ,min: '09:30:00'
  28. ,max: '17:30:00'
  29. });

　　laydate自定義彈出控件事件：如果綁定事件非輸入框，默認事件為click。官方文檔示例如下。

  1. //自定義事件
  2. laydate.render({
  3. elem: '#test'
  4. ,trigger: 'click' //采用click彈出
  5. });

　　laydate定位方式：定位方式有三種。

position 可選值 說明
abolute 絕對定位，始終吸附在綁定元素周圍。默認值
fixed 固定定位，初始吸附在綁定元素周圍，不隨瀏覽器滾動條所左右。一般用於在固定定位的彈層中使用。
static 靜態定位，控件將直接嵌套在指定容器中。 
注意：請勿與 show 參數的概念搞混淆。show為 true 時，控件仍然是采用絕對或固定定位。而這里是直接嵌套顯示

 

 

 

 

　　laydate顯示底部欄：默認顯示底部欄。設置為false則不顯示。官方文檔示例如下。

  1. //不顯示底部欄
  2. laydate.render({
  3. elem: '#test'
  4. ,showBottom: false
  5. });

　　laydate初始打開的回調：初始的日期時間對象。官方文檔示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,ready: function(date){
  4. console.log(date); //得到初始的日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  5. }
  6. });

　　laydate日期時間被切換后的回調：毀掉返回三個參數，分別是生成的值，日期時間對象，結束的日期時間對象。官方文檔示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,change: function(value, date, endDate){
  4. console.log(value); //得到日期生成的值，如：2017-08-18
  5. console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  6. console.log(endDate); //得結束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。
  7. }
  8. });

　　laydate控件選擇完畢后的回調：點擊日期，清空，現在，確定均會觸發。返回三個參數，生成的值，日期時間對象，結束的日期時間對象。官方文檔示例如下。

  1. laydate.render({
  2. elem: '#test'
  3. ,done: function(value, date, endDate){
  4. console.log(value); //得到日期生成的值，如：2017-08-18
  5. console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  6. console.log(endDate); //得結束的日期時間對象，開啟范圍選擇（range: true）才會返回。對象成員同上。
  7. }
  8. });

三、結束語

　　layer和laydate作為前端組件，使用時在項目中引用對應的js或css文件，就可以作為獨立組件使用，這樣能滿足管理系統中對彈出層和時間展示和操作。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue基礎（學習官方文檔） 從官方文檔去學習之FreeMarker vue2官方文檔學習 vue基礎（學習官方文檔） pm2 官方文檔 學習筆記 MySQL8.0官方文檔學習 Spring 4 官方文檔學習（十四）WebSocket支持 神器AutoHotkey學習（官方文檔翻譯） Spring Boot 官方文檔學習（一）入門及使用 前言——springCloud——官方文檔學習步驟
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM