欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

layui01

程序员文章站 2022-05-12 12:30:30
...

雷哥整理

 

 

概述

下载文件说明

layui01

css 样式

font:字体

image:图片

lay:

|--models

layui01

layui.all.js   包含了所有模块的js

layui.js   框架  如果要使用必须使用layui.use(["table","layer","laydate","form"],function(){})

 

学习的内容

  1. 图标
  2. 按钮
  3. 导航菜单
  4. 选项卡
  5. 进度条
  6. 面板+布局
  7. 徽章
  8. 时间线
  9. 动画
  10. 颜色选择器
  11. 滑块
  12. 评分
  13. 轮播
  14. 代码修饰器
  15. 时间和日期选择器
  16. 表单元素
    输入框
    密码框
    下拉列表
  17. 表单对象form
  18. 弹出层【重点】
  19. 数据表格【重点】
  20. 数据表格+弹出层的综合案例【重点】
  21. 文件上传
  22. 树形组件dtree

 

使用方法

创建项目并引入layui

layui01

layui01

 

图标

方法1 使用字符实体

layui01

相关样式

  • layui-icon   代表使用layui的图标处理样式去渲染

方法2 使用样式

layui01

相关图标样式可以去：https://www.layui.com/doc/element/icon.html

 

按钮

相关样式：

必要样式：layui-btn

主题样式

|-- layui-btn-primary   原始按钮
|-- layui-btn-normal  百搭按钮
|-- layui-btn-warm   暖色
|-- layui-btn-danger   警告
|-- layui-btn-disabled  禁用

大小样式

|-- layui-btn-lg  大型 按钮
|-- layui-btn-sm 小型按钮
|-- layui-btn-xs 微型按钮

图标结合

layui01

layui01

圆角样式：layui-btn-radius

layui01

按钮组：layui-btn-group

layui01

事件监听

和jquery的用法一样

layui01

 

导航菜单

相关样式

方向：水平 默认的

垂直：layui-nav-tree

其它样式

|--layui-nav  代表这个是导航菜单
     |-- layui-nav-item  代表这个导航菜单的一样子项
            |-- layui-nav-child  子项目的子项目
     |-- layui-this  当前选中的菜单项

layui01

 

选项卡

风格说明

默认风格 只用加layui-tab

简洁风格  layui-tab-brief

卡片风格   layui-tab-card

layui01

相关样式

|--layui-tab  代表一个选项卡
    |--layui-tab-title代表卡片的头
        |-- layui-this  启动选中
    |-- layui-tab-content  代表卡片的内容包装体
	|-- layui-tab-item  具体的卡片内容
	|-- layui-show  启动显示

相关属性

layui01

lay-allowclose是否启动关闭按钮

layui01

lay-filter="demo"  layui使用的可以找到元素的属性

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选项卡</title>
  <link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
             
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>默认风格的Tab</legend>
</fieldset>
 
<div class="layui-tab" id="demo" lay-filter="demo"  lay-allowclose="true">
  <ul class="layui-tab-title" >
    <li lay-id="1" class="mydemo">网站设置</li>
    <li lay-id="2" class="mydemo">用户管理</li>
    <li lay-id="3" class="layui-this mydemo">权限分配</li>
    <li lay-id="4" class="mydemo">商品管理</li>
    <li lay-id="5" class="mydemo">订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item ">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item layui-show" >内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<div class="layui-btn-group">
    <button type="button" class="layui-btn" id="add">添加一个Tab</button>
    <button type="button" class="layui-btn " id="change">切换用户管理</button>
    <button type="button" class="layui-btn" id="delete">删除商品管理</button>
    <button type="button" class="layui-btn" id="deleteAll">删除所有tab</button>
  </div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>简单风格的Tab</legend>
</fieldset>
 
<div class="layui-tab layui-tab-brief">
  <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">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>卡片风格的Tab</legend>
</fieldset>
 
<div class="layui-tab layui-tab-card">
  <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">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
 	layui.use(['element','jquery'],function(){
		var $=layui.jquery;
		var element=layui.element;
		
		$("#add").click(function(){
			element.tabAdd('demo', {
				  title: '选项卡的标题'
				  ,content: '选项卡的内容' //支持传入html
				});    
		})
		$("#change").click(function(){
			element.tabChange('demo', '2');
		})
		$("#delete").click(function(){
			element.tabDelete("demo", "4");	
		})
		$("#deleteAll").click(function(){
			var lis=$(".mydemo");
			$.each(lis,function(index,item){
				var layid=item.getAttribute("lay-id");
				//alert(layid);
				element.tabDelete("demo", layid);	
			});
		})
	});
</script>
</body>
</html>

 

进度条

layui01

相关样式

layui-progress   代表一个进度条
	|-- layui-progress-bar    代表进度条里面的进度
layui-progress-big  变粗了

相关属性

layui01

lay-percent  代表进度值
lay-showpercent="true"  是否显示进度值

layui01

 

面板

卡片面板

layui01

相关样式

layui-row  代表一行
layui-col-space15     space0-space30  代表卡片之间的间距
	|-- layui-col-md6  代表一列  md1-md12  代表当前卡片占整行的X/12
		|-- layui-card  代表一个卡片
			|-- layui-card-header 代表卡片头信息
			|-- layui-card-body  代表卡片内容样式

普通折叠面板

layui01

相关样式

layui-collapse  代表一个折叠面板
	|-- layui-colla-item  代表一个折叠项
		|-- layui-colla-title  代表折叠项的显示标题		
		|-- layui-colla-content 代表折叠项展开的内容
		|-- layui-show  是否展开

相关事件：https://www.layui.com/doc/modules/element.html#collapse

layui01

手风琴面板

  • 在普通面板上加lay-accordion=""

 

布局

相关样式

layui-row
	|-- layui-col-xs6  移动设备占比
	|-- layui-col-sm6  平板设备占比
	|-- layui-col-md6  桌面设置占比

layui01

 

徽章

相关样式

layui-badge-dot 小圆点
layui-badge 弧形徽章
layui-badge-rim 边框徽章

layui01

组合使用

layui01

layui01

 

时间线

常规时间线

layui01

相关样式

layui-timeline  代表一个时间线
	|-- layui-timeline-item  代表一个时间节点
	|-- layui-timeline-axis  代表左边的竖线
		|-- layui-timeline-content 时间线的内容
		|-- layui-text  代表文本
			|-- layui-timeline-title  代表标题
				|--可以分为标题和内容
					|--<h2>标题
					|--<p>内容

简约时间线

layui01

  • 就是没有区分标题和内容

 

动画

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<link rel="stylesheet" href="resources/layui/css/global.css">
<style>
.site-doc-icon li{width: 222px;}
.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
</style>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>动画过程演示</legend>
	</fieldset>

	<ul class="site-doc-icon site-doc-anim">
		<li>
			<div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
			<div class="code">layui-anim-up</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
			<div class="code">layui-anim-upbit</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
			<div class="code">layui-anim-scale</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
			<div class="code">layui-anim-scaleSpring</div>
		</li>
	</ul>
	<ul class="site-doc-icon site-doc-anim">
		<li>
			<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
			<div class="code">layui-anim-fadein</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
			<div class="code">layui-anim-fadeout</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
			<div class="code">layui-anim-rotate</div>
		</li>
		<li>
			<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
			<div class="code">追加：layui-anim-loop</div>
		</li>
	</ul>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			
			//演示动画
			  $('.site-doc-icon .layui-anim').on('click', function(){
			    var othis = $(this), anim = othis.data('anim');
			 
			    //停止循环
			    if(othis.hasClass('layui-anim-loop')){
			      return othis.removeClass(anim);
			    }
			    
			    othis.removeClass(anim);
			    
			    setTimeout(function(){
			      othis.addClass(anim);
			    });
			    //恢复渐隐
			    if(anim === 'layui-anim-fadeout'){
			      setTimeout(function(){
			        othis.removeClass(anim);
			      }, 1300);
			    }
			  });
		});
	</script>
</body>
</html>

相关样式

class="layui-anim"

相关属性

data-anim="layui-anim-up"  动画的类型

 

颜色选择器

layui01

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>颜色拾取器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>常规使用</legend>
	</fieldset>

	<div style="margin-left: 30px;">
		<div id="test1"></div>
		<div id="test2" style="margin-left: 30px;"></div>
	</div>

	<fieldset class="layui-elem-field layui-field-title"
		style="margin-top: 30px;">
		<legend>表单赋值</legend>
	</fieldset>

	<div style="margin-left: 30px;">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" value="" placeholder="请选择颜色" class="layui-input"
						id="test-form-input">
				</div>
				<div class="layui-inline" style="left: -11px;">
					<div id="test-form"></div>
				</div>
			</div>
		</form>
	</div>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'colorpicker', 'layer' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var colorpicker = layui.colorpicker;
			var layer = layui.layer;
			//常规使用
			colorpicker.render({
				elem : '#test1' //绑定元素
				,
				change : function(color) { //颜色改变的回调
					layer.tips('选择了：' + color, this.elem, {
						tips : 1
					});
				}
			});
			//初始色值
			colorpicker.render({
				elem : '#test2',
				color : '#2ec770' //设置默认色
				,
				done : function(color) {
					layer.tips('选择了：' + color, this.elem);
				}
			});
			//表单赋值
			  colorpicker.render({
			    elem: '#test-form'
			    ,color: '#1c97f5'
			    ,done: function(color){
			      $('#test-form-input').val(color);
			    }
			  });

		});
	</script>
</body>
</html>

原理，页面声明元素再使用js去渲染

 

滑块

layui01

相关属性

elem ：绑定页面元素
value 设置初始值
min  最小值
max 最大值
step 设置步长
setTips  滑动时是否显示tips文本
change  监听改变事件

 

评分

layui01

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>评分</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<style type="text/css">
	.demo-slider{
		margin-top: 20px;
	}
</style>
</head>
<body style="padding: 20px">
          
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>基础效果</legend>
</fieldset>
 
<div id="test1"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>显示文字</legend>
</fieldset>
 
<div id="test2"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>半星效果</legend>
</fieldset>
 
<div id="test3"></div>
<div><div id="test4"></div></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义内容</legend>
</fieldset>
 
<div id="test5"></div>
<div><div id="test6"></div></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义长度</legend>
</fieldset>
 
<div id="test7"></div>
<div><div id="test8"></div></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>只读</legend>
</fieldset>
  
<div id="test9"></div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>自定义主题色</legend>
</fieldset>
 
<ul>
  <li><div id="test10"></div></li>
  <li><div id="test11"></div></li>
  <li><div id="test12"></div></li>
  <li><div id="test13"></div></li>
  <li><div id="test14"></div></li>
</ul>
           
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'colorpicker', 'layer','slider','rate' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var colorpicker = layui.colorpicker;
			var layer = layui.layer;
			var slider=layui.slider;
			var rate=layui.rate;
			
			 //基础效果
			  rate.render({
			    elem: '#test1'
			  })
			 
			  //显示文字
			  rate.render({
			    elem: '#test2'
			    ,value: 2 //初始值
			    ,text: true //开启文本
			  });
			 
			  //半星效果
			  rate.render({
			    elem: '#test3'
			    ,value: 2.5 //初始值
			    ,half: true //开启半星
			  })
			  rate.render({
			    elem: '#test4'
			    ,value: 3.5
			    ,half: true
			    ,text: true
			  })
			 
			  //自定义文本
			  rate.render({
			    elem: '#test5'
			    ,value: 3
			    ,text: true
			    ,setText: function(value){ //自定义文本的回调
			      var arrs = {
			        '1': '极差'
			        ,'2': '差'
			        ,'3': '中等'
			        ,'4': '好'
			        ,'5': '极好'
			      };
			      this.span.text(arrs[value] || ( value + "星"));
			    }
			  })
			  rate.render({
			    elem: '#test6'
			    ,value: 1.5
			    ,half: true
			    ,text: true
			    ,setText: function(value){
			      this.span.text(value);
			    }
			  })
			 
			  //自定义长度
			  rate.render({
			    elem: '#test7'
			    ,length: 3
			  });
			  rate.render({
			    elem: '#test8'
			    ,length: 10
			    ,value: 8 //初始值
			  });
			 
			  //只读
			  rate.render({
			    elem: '#test9'
			    ,value: 4
			    ,readonly: true
			  });
			 
			  //主题色
			  rate.render({
			    elem: '#test10'
			    ,value: 3
			    ,theme: '#FF8000' //自定义主题色
			  });
			  rate.render({
			    elem: '#test11'
			    ,value: 3
			    ,theme: '#009688'
			  });
			 
			  rate.render({
			    elem: '#test12'
			    ,value: 2.5
			    ,half: true
			    ,theme: '#1E9FFF'
			  })
			  rate.render({
			    elem: '#test13'
			    ,value: 2.5
			    ,half: true
			    ,theme: '#2F4056'
			  });
			  rate.render({
			    elem: '#test14'
			    ,value: 2.5
			    ,half: true
			    ,theme: '#FF0000'  
			  })
			  
			  /**
			  RGB  ===RAD GREEN BLUE
			  	#F00    16*16*16==?
			  	#00FF00   255*255*255
			  	#FFFF0000   前两位代表透明度
			  */
		
		});
	</script>
</body>
</html>

 

轮播

layui01

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轮播</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">

</head>
<body style="padding: 20px">
   <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>填充轮播元素 - 以图片为例</legend>
</fieldset>    
 
<div class="layui-carousel" id="test10">
  <div carousel-item="">
    <div><img src="resources/images/img1.jpg"></div>
    <div><img src="resources/images/img3.jpg"></div>
    <div><img src="resources/images/img4.jpg"></div>
    <div><img src="resources/images/img5.jpg"></div>
    <div><img src="resources/images/img6.jpg"></div>
    <div><img src="resources/images/img7.jpg"></div>
  </div>
</div>
           
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'carousel' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var carousel=layui.carousel;
			//图片轮播
			  carousel.render({
			    elem: '#test10'
			    ,width: '200px'
			    ,height: '440px'
			    ,interval: 5000
			  });
		});
	</script>
</body>
</html>

 

代码修饰器

layui01

使用方法

使用<pre class="layui-code">放代码</pre>

引入code模块
调用layui.code({属性名:属性值})

相关属性

layui01

 

时间和日期选择器

相关属性

elem:绑定的页面input标签的id

type:指定选择器的类型 
     |--年year   
	 |--年月month   
	 |--年月日date  默认的
	 |--时间  time
     |--年月日时间 datetime

value  :设置初始值   
		value:'2019-11-11'指定死的
		value:new Date() 指定当前时间

trigger  触发弹出事件类型
	默认为得到焦点 tirgger: 'focus'
	可以设置成点击事件 tirgger:'click'


show:设置是否在页面加载时选择器就弹出来 默认为false

showBottom  是否显示底部栏

btns - 工具按钮
    类型：Array，默认值：['clear', 'now', 'confirm']
	右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

lang - 语言
	默认为cn   可以以设置en 英文

theme - 主题
default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

calendar - 是否显示公历节日
		Boolean，默认值：false

format  格式化时间

layui01

min/max  设置最大时间和最小时间

layui01

mark - 标注重要日子

layui01

控件初始打开的回调

layui01

日期时间被切换后的回调

layui01

控件选择完毕后的回调

layui01

相关代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时间和日期选择器</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">

</head>
<body style="padding: 20px">
	<div class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">中文版</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test1"
						placeholder="yyyy-MM-dd">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">国际版</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test2"
						placeholder="yyyy年MM月dd日HH时mm分ss秒">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">初始值</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test3"
						placeholder="yyyy-MM-dd">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">其它</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="test4"
						placeholder="yyyy-MM-dd">
				</div>
			</div>
		</div>
	</div>
	<script src="resources/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use([ 'element', 'jquery','laydate' ], function() {
			var $ = layui.jquery;
			var element = layui.element;
			var laydate=layui.laydate;
			laydate.render({
			    elem: '#test1' //指定元素
			    ,type:'date'
			    ,range:"~"
			  });
			
			laydate.render({
			    elem: '#test2' //指定元素
			    ,type:'datetime'
			    ,format:'yyyy年MM月dd日 HH时mm分ss秒'
			  });
			
			laydate.render({
			    elem: '#test3' //指定元素
			    //,value:'2019-11-11'  指定具体的时间
			    ,value:new Date()   //指定当前系统时间
			    /* ,min:'2019-01-01'
			    ,max:'2025-12-31' */
			   /*  ,min: -7
			    ,max: 7 */
			    ,type: 'time'
				  ,min: '09:30:00'
				  ,max: '17:30:00'
				  ,trigger:'click'
			  });
			
			laydate.render({
			    elem: '#test4' //指定元素
			    ,show:true
			    ,btns :['confirm']
				,lang: 'cn'
				,calendar :true,
				mark :{
					'0-0-15':'工资',
					'0-9-1':'开学'
				}
			  });
			
		});
	</script>
</body>
</html>

 

相关标签： 前端框架

上一篇： UNIX 环境高级编程笔记之线程

下一篇： C#--神奇的静态变量

推荐阅读