layui之分页组件和评分组件

1.分页组件layui.laypage

1）基本使用

layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。模块加载名称：laypage

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layPage快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div id="test1"></div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
});
</script>
</body>
</html>

View Code

2）主要参数

1.elem：指向存放分页的容器，值可以是容器ID、DOM对象。如：1. elem: 'id' 注意：这里不能加 # 号2. elem: document.getElementById('id')

2.count：总条数。一般从数据库获取。

3.limit：每页显示的条数，laypage将会借助 count 和 limit 计算出分页数。

4.limits：每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框

5.curr：起始页，一般用于刷新类型的跳页

//开启location.hash的记录
laypage.render({
  elem: 'test1'
  ,count: 500
  ,curr: location.hash.replace('#!fenye=', '') //获取起始页
  ,hash: 'fenye' //自定义hash值
});

6.groups：连续出现页面的个数

7.prev：自定义“上一页”的内容，支持传入普通文本和HTML

8.next：自定义“下一页”的内容，支持传入普通文本和HTML

9.first：自定义“首页”的内容，支持传入普通文本和HTML

10.last：自定义“尾页”的内容，支持传入普通文本和HTML

11.自定义主题：theme，支持传入：颜色值，或任意普通字符。

12.hash：开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加

3）切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({
  elem: 'test1'
  ,count: 70 //数据总数，从服务端得到
  ,jump: function(obj, first){
    //obj包含了当前分页的所有参数，比如：
    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    
    //首次不执行
    if(!first){
      //do something
    }
  }
});

2.评分组件layui.rate

1）基本使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>评分组件</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<body>
<div id="test1"></div>

<script>
    layui.use('rate', function(){
        var rate = layui.rate;

        //渲染
        var ins1 = rate.render({
            elem: '#test1'  //绑定元素
        });
    });
</script>
</body>
</html>

View Code

2）基础参数

1.elem：指向容器选择器

2.length：评分组件中具体星星的个数

3.value：评分的初始值

4.theme：主题颜色，默认的组件颜色是#FFB800

5.half：设定组件是否可以选择半星

6.text：是否选择评分对应的内容

7.readonly：是否只读，即只用于展示而不可点

3）自定义文本回调

通过 setText 函数，在组件初次渲染和点击后时产生回调。我们默认文本以星级显示，你可以根据自己设定的文字来替换我们的默认文本，如 “讨厌” “喜欢” 。若用户选择分数而没有设定对应文字的情况下，系统会使用我们的默认文本

        var ins1 = rate.render({
            elem: '#test1',  //绑定元素
            length:6,
            half:true,
            text:true,
            setText: function(value){
                var arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                };
                this.span.text(arrs[value] || ( value + "星"));
        }
    });

4）点击产生的回调

通过 choose 实现函数，在组件被点击后触发，回调分数，用户可根据分数来设置效果，比如出现弹出层

rate.render({
  elem: '#test1'
  ,choose: function(value){
    if(value > 4) alert( '么么哒' )
  }
});

一点点学习，一丝丝进步。不懈怠，才不会被时代所淘汰!