layui学习

引用layui中个各个模块功能的使用：layui.use
对应模板引用的关键字：表单（form）,弹窗（layer），即使通讯 （layim），时间控件（laydate），分页（laypage），模板（laytpl），富文本编辑（layedit），文件上传（upload），常用元素（element），树形菜单（tree），工具块（util），加载流（flow），代码修饰器（code），
因此要像使用模块就应该
layui.user(["form","element","laytpl","layer","laypage","laydate"],function(){
//这样就相当于引用了表单，元素，模板，弹窗，分页，时间控件，还有使用其他模块添加对应的关键字
//下面的是定义
	var form=layui.form(),
	laytpl=layui.laytpl,
	layer=layui.layer,
	laypage=layui.laypage,
	laydate=layui.date,
	$=layui.jquery;
//方法定义要在use中
    
    
    function goPre(){
    	if(index < 1){
    		layer.msg("当前已经是第一题！");
    		return;
    	}
    	index--;
    	render(dataCache[index]);
    }
    
    function goNext(){
    	if(isLastPage && index >= dataCache.length - 1){
    		index++;
    		render();
    		return;
    	}
    	
    	index++; //
    	if(index < dataCache.length){
    		render(dataCache[index]);
    	}else{
    		load(function(){
    			render(dataCache[index]);
    		});
    	}
    	}
    }
    function load(){
   	$.post(url,param,function(){//这行请求方法url获取数据，param是请求的参数
			if(true!==result.success){
				layer.alert(result.message || "加载失败",{icon:2,title:"错误"});
				return;
			}
			var page=result.data;
			if(page.pages==page.pageNum){//我的分页查询方法结果是一定会有数据的，就算超出页面数也一定会返回最后的数据，所以在这里做控制判断是不是最后一页
				isLastPage=true;
			}
			pageNum=page.pageNum+1;//每次查询回来页码加1
			dataCache=dataCache.concat(page.list);//将获取的数据添加到缓存数据集中
			render(dataCache);//渲染模版方法
			
			//显示分页
    	    		laypage({
    	      		cont: 'user_manager_pager', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
    	      		pages: result.data.pages, //通过后台拿到的总页数
    	      		curr: curr || 1, //当前页
    	      		skin: '#009688', //自定义选中色值
    	      		jump: function(obj, first){ //触发分页后的回调
    	        		if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
    	        		load(obj.curr);
    	        	}
    	      	}
    	    		});
			}).error(function(){
    			layer.alert("证书发放记录加载失败", {icon: 2,title:'错误'});
    	});
	}) 
    }
	//渲染方法
	function render(data){
    	var tpl = $("#stpl").html();//模板的id这个在jsp页面中
    	var html = laytpl(tpl).render(data);
    	$("#questionModel").html(html);
    }

})
//绑定方法上一页，下一页，根据div的class来弄的
 
    function init(){
    	$(".panel-footer").delegate(".previous", "click", function(){
    		goPre();
    		return false;
    	}).delegate(".next", "click", function(){
    		goNext();
    		return false;
    	});
    	
    }
//初始化方法表示一开始就执行
   goNext();
    init();
jsp文件中的模板
<script type="text/html" id="stpl">
<p class="question-title">{{d.question}}</p>
{{#  layui.each(d.list, function(index, item){ }}
<div class="form-group">
<label class="checkbox inline">
{{# if (d.answer.indexOf(item.tag) != -1) { }}
<input type="checkbox" checked>
<span class="checked-tick">√</span>
{{# } }}
{{# if (d.answer.indexOf(item.tag) == -1) { }}
<input type="checkbox">
<span class="checked-tick">√</span>
{{# } }}
<span>{{item.content }}</span>
</label>
</div>
{{#  }); }}
</script>
模板添加div
<div class="panel-body" id="questionModel">

</div>
上一页下一页的div
<ul class="pager clr">
	<li class="previous fl pre" id="pre" ><a >← 上一页</a></li>
	<li class="next fr next" id="next" ><a >下一页 →</a></li>
</ul>

如果要使用时间控件只要在jsp写<input class="layui-inline" name="beginTime" id="beginTime" placeholder="请选开始时间" οnclick="laydate({elem: this, festival: true})">就可以用