layui之分页组件和评分组件

1.分页组件layui.laypage

1)基本使用

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

layPage快速使用

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)基本使用

评分组件

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( '么么哒' )

}

});


如何使用PHP实现图片上传和保存
佳节又重阳,玉枕纱厨,半夜凉初透