弹出层

1. 信息提示弹出层，默认3秒后自动消失

layer.msg('提交数据成功')

2. 信息提示确认框

layer.open({
  title: '温馨提示',
  content: '内容'
}); 

• 如果你想单独设置您的弹出层的样式，可以给弹出层添加自己的class类名(可选项)

layer.open({
  title: '温馨提示',
  content: '内容',
  skin: 'demo-class'  // 可以设置单个弹出层的class类名
}); 

• 也可以设置全局的弹出层的class类

//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({
  skin: 'demo-class'
})

3. 普通信息框alert

layer.alert('只想简单的提示');  

• 关闭弹出层 layer.close(index);

layer.alert('有了回调', function(index) {
    //do something
    layer.close(index); // 关闭弹出层
});

4. 设置多个按钮的弹出层

1. 一般是使用简单的配置，如下：
layer.confirm('确定要保存数据吗？', {
    title:'温馨提示',
    btn: ['保存', '取消'], //可以无限个按钮
    yes: function(index, layero) {
        console.log('保存按钮的回调');
    }
})

2. 也可以如下设置：默认按钮是 确定 取消
layer.confirm('确定要保存数据吗?', {
    title: '温馨提示'
}, function(index) {
    //do something
    layer.close(index);
});



//比较全面的配置如下：
layer.confirm('确定要保存数据吗？', {
    btn: ['保存', '取消'], //可以无限个按钮
    yes: function(index, layero) {
        console.log('保存按钮的回调');
    },
    btn2: function(index, layero) {
        console.log('取消按钮的回调');
        //默认是关闭弹出层
    },
    cancel: function() {
        console.log('右上角关闭回调');
        //默认是关闭弹出层
    }
})

5. tips提示层

//eg1
layer.tips('只想提示地精准些', '#id');

//eg 2
$('#id').on('click', function(){
  var that = this;
  layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
});

//eg 3
layer.tips('在上面', '#id', {
  tips: 1
});

6. layer.prompt(options, yes) - 输入层

//prompt层新定制的成员如下
{
  formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
  value: '', //初始时的值，默认空字符
  maxlength: 140, //可输入文本的最大长度，默认500
}
 
//例子1
layer.prompt(function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});
 
 
//例子2
layer.prompt({
  formType: 2,
  value: '初始值',
  title: '请输入值',
  area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
  alert(value); //得到value
  layer.close(index);
});

7. layer.tab(options) - tab层

layer.tab({
  area: ['600px', '300px'],
  tab: [{
    title: 'TAB1', 
    content: '内容1'
  }, {
    title: 'TAB2', 
    content: '内容2'
  }, {
    title: 'TAB3', 
    content: '内容3'
  }]
}); 

分页

1. html元素设置

<div class="zhuboVideoList">
    <div class="listInfo"></div> 数据列表
    <div id="paging_module" class="paging_module"></div>
    <div class="loadingEnd_module">已加载全部～</div>
</div>

2. 分页js设置

(function ($) {
  $.playBack = {
    pageObj: {
      perPage: 12, //每页显示多少条
      totalPage: 0, // 总页码
    },
    init: function () {
      $.playBack.initZhuboListInfo(0); //初始化数据列表
      $.playBack.pagingSettings();  //分页设置
    },

    //初始化数据列表
    initZhuboListInfo: function (iDisplayStart) {
      var data = {
        url: $.general.http + 'b.memberuploadvideo.uploadvideolist',
        iDisplayStart: iDisplayStart,
        iDisplayLength: $.playBack.pageObj.perPage,
      };
      $.general.AjaxRequest(data, function (res) {
        if (res.success) {
          $.playBack.pageObj.totalPage = res.data.iTotalDisplayRecords;
          var htmls = '';
          if (res.data.aaData.length > 0) {
            $.each(res.data.aaData, function (index, perObj) {
              htmls += ' <a href="" class="perItem">\n' +
                '         </a>'
            });
          } else {
            //无记录、无数据设置
            htmls += '<div class="norecord_module">\n' +
              '     <img src="/template/web/skin/default/images/norecord.svg" alt="暂无记录">\n' +
              '</div>';
          }
          $('.zhuboVideoList').find('.listInfo').append(htmls);
        } else {
          layer.open({
            title: '温馨提示'
            , content: res.reason
          });
        }
      });
    },

    //分页设置---加载更多设置
    pagingSettings: function () {
      layui.use('laypage', function () {
        var laypage = layui.laypage;
        laypage.render({
          elem: $('.zhuboVideoList').find('.paging_module'), //元素
          count: $.playBack.pageObj.totalPage, //总页数
          limit: $.playBack.pageObj.perPage, //每页显示
          next: '点击加载更多',
          layout: ['next'],
          jump: function (obj, first) {
            //首次不执行
            if (!first) {
              var iDisplayStart = $.general.getPageInfo(obj.curr, $.playBack.pageObj.perPage).iDisplayStart;
              $.playBack.initZhuboListInfo(iDisplayStart);
            }
            ////////////
            var $dom_zhuboVideoList = $('.zhuboVideoList');
            if (obj.count == 0) {
              //查询不到数据
              $dom_zhuboVideoList.find('.paging_module').hide();
              $dom_zhuboVideoList.find('.loadingEnd_module').hide();
            } else {
              if (obj.curr == obj.pages) {
                //后面没有数据了
                $dom_zhuboVideoList.find('.paging_module').hide();
                $dom_zhuboVideoList.find('.loadingEnd_module').show();
              } else {
                $dom_zhuboVideoList.find('.paging_module').show();
                $dom_zhuboVideoList.find('.loadingEnd_module').hide();
              }
            }
            //////////
          }
        });
      });
    },

    //分页设置---分页格式：123456....
    pagingSettings: function () {
      layui.use('laypage', function () {
        var laypage = layui.laypage;
        laypage.render({
          elem: $('.zhuboVideoList').find('.paging_module'), //元素
          count: $.playBack.pageObj.totalPage, //总页数
          limit: $.playBack.pageObj.perPage, //每页显示
          prev: '<',
          next: '>',
          jump: function (obj, first) {
            //首次不执行
            if (!first) {
              var iDisplayStart = $.general.getPageInfo(obj.curr, $.playBack.pageObj.perPage).iDisplayStart;
              $.playBack.initZhuboListInfo(iDisplayStart);
            }
            if (obj.count == 0 || obj.pages) {
              //查询不到数据
              $('.user_myMsg').find('.paging_module').hide();
            }
          }
        });
      });
    },


  }
})(jQuery)

3. 信息流方式的分页

1. html元素设置
<div class="user_myMsg">
  <!--消息列表-->
  <div id="msgList" class="msgList"></div>
</div>

2. 不显示加载更多设置css
.layui-flow-more {
  a {
    display: none !important;
  }
}

3. js设置
(function ($) {
  $.myMsg2 = {
    pageObj: {
      curPage: 1,
      perPage: 10, //每页显示多少条
      totalPage: 0, // 总页码
    },

    init: function () {
      $.myMsg2.msgFlowList();
    },

    //信息流 加载数据
    msgFlowList: function () {
      layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
          elem: '#msgList', //指定列表容器
          end: '<div style="display: block;" class="loadingEnd_module">已加载全部～</div>',
          mb: 10,
          done: function (page, next) { //到达临界点 mb的值（默认滚动触发），触发下一页
             $.myMsg2.getMsgInfo(page,function (dataArrayHtmls) {
                next(dataArrayHtmls.join(''), $.myMsg2.pageObj.curPage < $.myMsg2.pageObj.totalPage);
             });
          }
        });
      });
    },

    getMsgInfo:function (curPage,callback) {
      $.myMsg2.pageObj.curPage = curPage;
      var listHtmlsArray = [];
      var data = {
        url: $.general.http + 'b.notice.querysyssendmsg',
        sSorts: 'read_time,asc;send_time,desc',
        iDisplayStart: ($.myMsg2.pageObj.perPage) * ($.myMsg2.pageObj.curPage - 1),
        iDisplayLength: $.myMsg2.pageObj.perPage,
      };
      $.general.AjaxRequest(data, function (res) {
        if (res.success) {
          //设置总页数
          $.myMsg2.pageObj.totalPage = Math.ceil(res.data.iTotalDisplayRecords / $.myMsg2.pageObj.perPage);
          if (res.data.iTotalDisplayRecords > 0) {
            $('.layui-flow-more').show();
            $.each(res.data.aaData, function (index, perObj) {
              var htmls = '<div data-id=' + perObj.id + ' class="perItemMsg">\n' +
                '        <div class="title">' + perObj.msg_title + '===' + (perObj.id) + '</div>\n' +
                '        <div class="time">' + perObj.send_time + '</div>\n' +
                '</div>';
              listHtmlsArray.push(htmls);
            });
          } else {
            $('.layui-flow-more').hide();
            //无记录、无数据设置
           var  htmls = '<div class="norecord_module">' +
              '     <img style="width: 350px;" src="/template/web/skin/default/images/norecord.svg" alt="暂无记录">\n' +
              '</div>';
            listHtmlsArray.push(htmls);
          }
          callback(listHtmlsArray);
        } else {
          layer.open({
            title: '温馨提示'
            , content: res.reason
          });
        }
      }, true, null, true);
    }

  }
})(jQuery)

轮播

1. html设置

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div>条目1</div>
        <div>条目2</div>
        <div>条目3</div>
    </div>
</div>

2. js配置项

layui.use('carousel', function() {
    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#test1',
        width: '100%', //设置容器宽度
        arrow: 'always' //始终显示箭头
        //,anim: 'updown' //切换动画方式
    });
});

3. 常用参数

4. 切换事件

• 轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;
 
//监听轮播切换事件
//test1来源于对应HTML容器的 lay-filter="test1" 属性值
carousel.on('change(test1)', function(obj){ 
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});     

5. 重置轮播

• 在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);

面包屑

• 默认设置

<span class="layui-breadcrumb">
    <a href="">首页</a>
    <a href="">我的回音壁</a>
    <a><cite>标题内容</cite></a>
</span>

• 通过lay-separator="-" 来自定义分隔符

<span class="layui-breadcrumb" lay-separator=">">
    <a href="">首页</a>
    <a href="">我的回音壁</a>
    <a><cite>标题内容</cite></a>
</span>