2、layui补充（弹出层 时间选择器 分页）

▶▶弹出层layer

 

　　独立使用，在离线1.8以上jquery和layer.js文件

 

　　layui模块化使用，引入layui的css和js，在script中使用layui.use()加载模块

 

　　layui.use("layer",function{

   　　 var layer = layui.layer;

   　　 layer.msg("Hi");

　　})

 

基础参数

 

  　  type基本层类型（Number 默认0）

      　　  0（信息框），1（页面层），2（iframe层）content [ url , no不滚动 ]，3（加载层），4（tips层）content [ '内容', ‘#id’] 第二项吸附元素选择器或DOM

 

　　title 标题

      　　三种类型值：普通的字符串；自定义样式数组第二项可以写任意css样式；不使用标题栏可以给false值。

 

 　 content 内容 （String/DOM/Array,默认: ' '）

     　　传值可灵活多变，可以传普通html内容，还可以指定DOM

 

　area 设置宽高（String/Array,默认: auto） ['100px','200px']

  　　   默认情况layer的宽高都是自适应

  　　   当定义宽度 area:'200px',高度自适应 

   　　  宽度高度都设置 area: ['100px','200px']    

 

   icon 图标 （信息框和加载层的私有参数）（Number 默认:-1信息框/0加载层）

 

      信息框不显示图标，显示图标时：默认层0-6，加载层0-2,  layer.load(0-2)  

 

▶▶时间选择器laydate

 

　　layui.use("laydate",function{

   　　 var laydate= layui.laydate;

     　　  laydate.render({

       　　  elem:"#date1"  //绑定id为date1的元素

      　　  })

　　})

 

elem -绑定元素

     选择器或DOM对象

 

type-控件选择器类型  默认date

    year 年，month月，day日，time时间，datetime日期时间选择器，date日期选择器

 

 

format  设置日期格式

    例子：     yyyy年MM月dd日 ；yyyy-MM-dd

 

value设置初始值

   new Date('时间戳') 可以把时间戳转为日期

 

▶▶分页laypage

 

　　layui.use("laypage",function{

    　　varlaypage= layui.laypage;

     　　 laypage.render({

       　　  elem:"page"  //容器的id属性值不需加#号

        　　})

　　})

 

　　count 总数量 （从服务器获取）

　　　　limit 每页显示的条数 

　　　　limits 每页条数的选项

　　　　layou自定义排版 ['prev','page','next','limit','count']

　　　　groups 连续显示的页码数

 

　　jump切换分页的回调

　　　　jump：function(obj,first){

     　　　　  // obj.curr; 得到当前页，以使用向服务端请求对应的页面数据

      　　　　 // obj.limit；得到每页显示的条数

       　　　　 if(!first){  //首次不执行

      　　　　  }

　　　　}