js laypage mysql_layUI独立组件layer-laydate-laypage项目实践用法

有以下四个独立组件(可单独使用)：

弹出层组件layer链接：http://layer.layui.com/

日期组件laydate链接：https://www.layui.com/laydate/

轻量的JavaScript模板引擎laytpl链接：https://www.layui.com/laytpl/(暂未使用)

项目中实践用法汇总

项目技术背景：html+jquery+jsp+ SSM+mysql

下载组件：

源码在layer文件夹中。找到layer.js；两外的css和图片，是默认自带的样式文件，只要default默认图片文件。

laydate需要js和默认样式文件；

laypage需要js和默认样式文件；

注意：layer的skin/default/文件和laypage的skin/laypage.css同放在一个skin/目录下

1，layer用法

2，jsp页面引入layer.js;

3，配置layer弹框默认皮肤；

//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高

layer.config({

//anim: 6, //默认动画风格

如果是独立版的layer，则将myskin存放在./skin目录下

//如果是layui中使用layer，则将myskin存放在./css/modules/layer目录下

// extend: 'myskin/style.css'

skin: 'layer-class'

})

写在公用js文件中；

4，使用参考layer手册：http://www.layui.com/doc/modules/layer.html或官网：http://layer.layui.com/

项目中具体layer弹框用法示例

1.1alert弹框

1.1.1提示框

layer.alert("退出失败，请稍后再试");

效果：

1.1.2询问框layer.alert('您确定要退出么？', {

time: 0 //不自动关闭

,btn: ['是的','再逛一会']

,yes: function(index){

layer.close(index);                                         //关闭弹框

$.post(path+"/user/loginout",function(data){

if(data!="success"){

layer.alert("退出失败，请稍后再试");

}else{

window.location.href= "/index.html";

}

});

}

});

效果：

图1-1-1

点击“是的”，执行loginout退出方法；“再逛一会”关闭弹框！

1.1.3回调用法layer.alert("发货成功！",function(){

layer.closeAll();//关闭所有弹框

//回调函数

load();//自定义

});

界面效果：

“确定”执行回调函数!

1.2open弹框

1.2.1自定义弹框内容并上传图片layer.open({

type:1,

title:"上传合同",

fixed:false,

resize:false,

shadeClose:true,

area:['420px', '238px'],

content:$('#uploadContract'),  //页面自定义的div，样式自定义

btn:['确认', '取消']

,yes:function(){

$("#uploadForm").css("display","none");

$("#uploadForm").submit();//提交表单

}

,btn2:function(){

$("#uploadForm").css("display","none");

layer.closeAll();

}

});

页面代码：

/order/uploadContract.html"style="display:none;">

上传合同：

/p_w_picpaths/upload.png) no-repeat left center;padding-left:20px;">

上传截图