Layui弹层组件，日期控件，分页组件

Layui弹层组件，日期控件，分页组件

Layui 出蛋于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。 —— [ Layui ]

代码块语法遵循标准markdown代码，例如：

弹出层 —— [ layer弹层组件]

代码块

特别说明：事件需自己绑定，以下只展现调用代码。//初体验layer.alert('内容')//第三方扩展皮肤layer.alert('内容', {  icon: 1,  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅})//询问框layer.confirm('您是如何看待前端开发？', {  btn: ['重要','奇葩'] //按钮}, function(){  layer.msg('的确很重要', {icon: 1});}, function(){  layer.msg('也可以这样', {    time: 20000, //20s后自动关闭    btn: ['明白了', '知道了']  });});//提示层layer.msg('玩命提示中');//墨绿深蓝风layer.alert('墨绿风格，点击确认看深蓝', {  skin: 'layui-layer-molv' //样式类名  ,closeBtn: 0}, function(){  layer.alert('偶吧深蓝style', {    skin: 'layui-layer-lan'    ,closeBtn: 0    ,anim: 4 //动画类型  });});//捕获页layer.open({  type: 1,  shade: false,  title: false, //不显示标题  content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  cancel: function(){    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});  }});//页面层layer.open({  type: 1,  skin: 'layui-layer-rim', //加上边框  area: ['420px', '240px'], //宽高  content: 'html内容'});//自定页layer.open({  type: 1,  skin: 'layui-layer-demo', //样式类名  closeBtn: 0, //不显示关闭按钮  anim: 2,  shadeClose: true, //开启遮罩关闭  content: '内容'});//tips层layer.tips('Hi，我是tips', '吸附元素选择器，如#id');//iframe层layer.open({  type: 2,  title: 'layer mobile页',  shadeClose: true,  shade: 0.8,  area: ['380px', '90%'],  content: 'http://layer.layui.com/mobile/' //iframe的url}); //iframe窗layer.open({  type: 2,  title: false,  closeBtn: 0, //不显示关闭按钮  shade: [0],  area: ['340px', '215px'],  offset: 'rb', //右下角弹出  time: 2000, //2秒后自动关闭  anim: 2,  content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条  end: function(){ //此处用于演示    layer.open({      type: 2,      title: '很多时候，我们想最大化看，比如像这个页面。',      shadeClose: true,      shade: false,      maxmin: true, //开启最大化最小化按钮      area: ['893px', '600px'],      content: 'http://fly.layui.com/'    });  }});//加载层var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2//loading层var index = layer.load(1, {  shade: [0.1,'#fff'] //0.1透明度的白色背景});//小tipslayer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {  tips: [1, '#3595CC'],  time: 4000});//prompt层layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){  layer.close(index);  layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){    layer.close(index);    layer.msg('演示完毕！您的口令：'+ pass +'您最后写下了：'+text);  });});//tab层layer.tab({  area: ['600px', '300px'],  tab: [{    title: 'TAB1',     content: '内容1'  }, {    title: 'TAB2',     content: '内容2'  }, {    title: 'TAB3',     content: '内容3'  }]});//相册层$.getJSON('test/photos.json?v='+new Date, function(json){  layer.photos({    photos: json //格式见API文档手册页    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机  });});

日期 —— [ layDate日期控件]

代码块

<input onclick="laydate()">这是是一个最简单的调用方式，它会把自身作为目标元素。除此之外，您还可以按照需求传入一些其它key，比如：<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">那么对于输入框，如果用户乱填怎么办？没关系，laydate会智能纠错，你可以尝试在上述表单输入任意值，然后点击页面其它处测试一下。当然，您其实还可以设定任何html元素作为目标对象，又比如：<div onclick="laydate()"></div>

分页 —— [ layPage分页组件]

代码块

//以下将以jquery.ajax为例，演示一个异步分页function demo(curr){  $.getJSON('test/demo1.json', {    page: curr || 1 //向服务端传的参数，此处只是演示  }, function(res){    //此处仅仅是为了演示变化的内容    var demoContent = (new Date().getTime()/Math.random()/1000)|0;    document.getElementById('view1').innerHTML = res.content + demoContent;    //显示分页    laypage({      cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>      pages: res.pages, //通过后台拿到的总页数      curr: curr || 1, //当前页      jump: function(obj, first){ //触发分页后的回调        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr          demo(obj.curr);        }      }    });  });};//运行demo();

模版引擎 —— [ layTpl模版引擎]

代码块

//假设你得到了这么一段数据var data = {  title: '前端圈',  intro: '一群码js的骚年，幻想改变世界，却被世界改变。',  list: [{name: '贤心', city: '杭州'},  {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]};

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。