layui中提供了rate组件,用法很简单,直接上代码。

<div id="test1"></div>
<script>
layui.use('rate', function () {
var rate = layui.rate;
var ins1 = rate.render({
elem: '#test1' //绑定元素
, length: 5 //星星个数
, value: 3 //初始化值
, theme: '#000099' //颜色
, half: true //支持半颗星
, text: true //显示文本,默认显示 '3.5星'
, readonly: false //只读
//自定义文本,点击后文本显示的内容
, setText: function (value) {
if (value < 2) {
this.span.text("差")
} else if (value <= 4) {
this.span.text("一般")
} else {
this.span.text("好")
}
}
//选定时调用,评分时发送一个ajax,readonly设为true
, choose: function (value) {
if (value > 4) alert('么么哒')
}
});
});
</script>

注:本文只是自己为了查看方便整理的一些内容,并不包含layui中提供的所有内容,查看更多请访问官网http://www.layui.com/doc/modules/upload.html

layui(七)——rate组件常见用法总结的更多相关文章

  1. layui(二)——layer组件常见用法总结

    layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...

  2. layui(三)——laypage组件常见用法总结

    laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染.核心方法: laypage.render(options)  来设置基础参数. 一.laypag ...

  3. layui(六)——upload组件常见用法总结

    layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...

  4. layui(九)——flow组件常见用法总结

    该模块包含 信息流加载 和  图片懒加载  两大核心支持,无论是对服务端.还是前端体验,都有非常大的性能帮助.下边分别给出了这两种技术的使用方法 一.信息流加载 信息流加载的核心方法时  flow.l ...

  5. layui(五)——form组件常见用法总结

    form 是我们非常看重的一块.layui中的form实现全自动的初始渲染,和基于事件驱动的接口书写方式.我整理了layui中form的配置.下边直接给一个栗子,后台采用.net MVC,除了razo ...

  6. layui(四)——table组件常见用法总结

    table是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级 ...

  7. layui(一)——layDate组件常见用法

    和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...

  8. react第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件)

    第七单元(组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件) #受控组件 简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onc ...

  9. php中的curl使用入门教程和常见用法实例

    摘要: [目录] php中的curl使用入门教程和常见用法实例 一.curl的优势 二.curl的简单使用步骤 三.错误处理 四.获取curl请求的具体信息 五.使用curl发送post请求 六.文件 ...

随机推荐

  1. scrapy 登陆知乎

    参考 https://github.com/zkqiang/Zhihu-Login # -*- coding: utf-8 -*- import scrapy import time import r ...

  2. 对Redis的理解

    1.redis使用的场景 热点数据(经常会被查询,但是不经常被修改或者删除的数据)

  3. 【XSY2667】摧毁图状树 贪心 堆 DFS序 线段树

    题目大意 给你一棵有根树,有\(n\)个点.还有一个参数\(k\).你每次要删除一条长度为\(k\)(\(k\)个点)的祖先-后代链,问你最少几次删完.现在有\(q\)个询问,每次给你一个\(k\), ...

  4. 【BZOJ1426】收集邮票 期望DP

    题目大意 有\(n\)种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是\(n\)种邮票中的哪一种是等概率的,概率均为\(\frac{1} ...

  5. Linux mount BSD disk partition

    Linux mount BSD disk partition 来源 https://www.cnblogs.com/jhcelue/p/6858159.html 假设须要从第二块硬盘复制文件.该硬盘格 ...

  6. project 2013 显示标题

    1.分析 右键只能插入任务,不能插入标题,而插入任务会被编号,目前只能在打印设置标题,不能在编辑界面显示标题的,或者使用最高级任务的方式 2.解决 文件,打印,页面设置,页眉,居中,输入标题,这样打印 ...

  7. python构建bp神经网络_鸢尾花分类(一个隐藏层)__2.代码实现

    IDE:jupyter   数据集请查看:鸢尾花数据集 测试效果预览   成功率96.7% 代码已上传到码云

  8. 「2017 Multi-University Training Contest 1」2017多校训练1

    1001 Add More Zero(签到题) 题目链接 HDU6033 Add More Zero 找出最大的k,使得\(2^m-1\ge 10^k\). 直接取log,-1可以忽略不计. #inc ...

  9. C语言学习记录之二

    各种语句及编程笔记记录 1.if & else #include<stdio.h> int main(){     int if (situation) {         //m ...

  10. js jquery 数组的合并 对象的合并

    转载自:http://www.cnblogs.com/xingxiangyi/p/6416468.html 1 数组合并 1.1 concat 方法 1 2 3 4 var a=[1,2,3],b=[ ...