layui使用tips_前端框架LayUI使用记录

工作中，需要快速开发，搭建网站。需要各种前端框架，比如说layUI、eChars、element等。之前使用较少，现做一个学习记录。

一、LayUI前端框架

layer 弹出层组件效果

--layui的弹层模块可以单独使用layer，依赖Jquery

layDate 日期选择器组件

--layui的日期组件可单独使用laydate

二、使用引入

// 将文件下载到本地，在文件中引用。

window.onload = function () {

var oBtn = document.getElementById('btn');

oBtn.onclick = function () {

// 调用layer对象的confirm()方法，传入信息，按钮，函数

layer.confirm('明天放假吗？',{

btn:['放假','不放'] //按钮

},function(){

// layer.msg 一个弹层

layer.msg('努力工作，将宝贵的时间，花在重要的地方',{icon:1});

},function(){

layer.msg('继续加油，青春易逝，要在30岁收入更多',{

time: 2000,

btn: ['加油','放弃']

})

})

}

}

1.1 弹层

// layer提供了5种层类型。可传入的值有：0(信息框，默认) 1(页面层) 2(iframe层) 3(加载层) 4(tips层)。 若你采用layer.open({type: 1})方式调用，则type为必填项(信息框除外)

// 1、信息框-弹层

layer.msg('弹层信息');

// 2、信息框-可选弹层

layer.confirm('提示信息',{

btn:['ok','no'] //选择信息

},function(){

// 第一个执行

}, function(){

// 第二个执行

});

// 3、提示信息，一般用于表单

layer.tips('提示信息','#div1',{ // 提示信息 依附于哪个元素

tips:[1,'#3595CC'], // 样式

time:2000 //显示时间

})

// 4、输入弹层

layer.prompt('请输入密钥')

// 5、弹层，如果是iframe层

layui.use('layer', function(){

layerPage = layui.layer;

var = _name = admin;

iframeObjectIndex = layerPage.open({

title: 'newTitle', // 弹框标题

type: 2, // 弹框类型，一般为2

offset: 'auto', // 弹框坐标

area:['1000px', '500px'], // 弹框大小，会默认上下左右居中

content: 'test.html?name='+ _name; // 跳转页 + 参数

})

})

// 6、弹层，如果是页面元素

// 在body外边写一个dom元素，并隐藏

layui.use('layer', function(){

layer.open({

title: 'newTitle', // 弹框标题

type: 1, // 弹框类型

closeBtn: 1, // 关闭按钮，0不显示，1/2显示

btn: ['yes', 'no'], // 按钮

offset: 'auto', // 弹框坐标

area: ['400px', '200px'], // 弹框大小

content: $('#lay1'), // 弹框显示内容

yes: function() {

// 第一个按钮回调

},

btn2: function() {

// 第二个按钮回调

},

cancel: function() {

// 右上角关闭回调

}

})

})

2.1 日期组件

// 日期组件可以在layui中使用，也可以作为组件使用

// layui中使用

layui.use('laydate', function(){

var laydate = layui.laydate;

//执行一个laydate实例

laydate.render({

elem: '#test1' //指定元素

});

});

// 单独作为组件

//执行一个laydate实例

laydate.render({

elem: '#test1' //指定元素

});