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. 轮询、长轮询、websock

    引入 Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的.但是在Web中,由于浏览器的限制, ...

  2. Matplotlib学习---用matplotlib画饼图/面包圈图(pie chart, donut chart)

    我在网上随便找了一组数据,用它来学习画图.大家可以直接把下面的数据复制到excel里,然后用pandas的read_excel命令读取.或者直接在脚本里创建该数据. 饼图: ax.pie(x,labe ...

  3. MT【262】一道常见错题

    若$f(x^2)$的定义域为$[-1,1]$,则函数$f(x)$的定义域为______ 设$a>0$构造$f(x)=\sqrt{x(1-x)(a+x)}$,此时$f(x^2)$的定义域为$[-1 ...

  4. [USACO08DEC]在农场万圣节Trick or Treat on the Farm【Tarja缩点+dfs】

    题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N<=100,000)个牛棚隔间中留下的糖果,以此来庆祝美国秋天的万圣节. 由于牛棚不太大,FJ通过指定奶牛必须遵 ...

  5. CSS居中的几种方式总结

    1.水平居中的 margin:0 auto; 这个是用于子元素上的,前提是不受float影响 <style type="text/css"> .box{ width: ...

  6. hdu 1024 Max Sum Plus Plus(m段最大和)

    Problem Description Now I think you have got an AC in Ignatius.L's "Max Sum" problem. To b ...

  7. Java 帝国之建造者模式

    Java 帝国之建造者模式 原创: 王钦誉 码农翻身 今天 本文来自王钦誉的投稿,老刘做了较大修改. 原文地址: https://xiaoqinyu0000.github.io/2018/06/11/ ...

  8. A1137. Final Grading

    For a student taking the online course "Data Structures" on China University MOOC (http:// ...

  9. bouncing-balls

    效果如下: 代码目录如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charse ...

  10. 5WHY分析法:一个问题分析与解决的工具

    5WHY分析法很多做项目的都知道,但是却很少有人能用到实处,或者是灵活运用,所以今天小编又来翻一遍这个“旧账”,让大家更了解5WHY分析法. 什么是5WHY分析法? 所谓5why分析法,又称“5问法” ...