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. 提高SqlServer数据库的安全性,禁用掉sa账户

    Sqlsever 数据库有两种登陆身份验证模式,一种是windows身份验证:一种是sqlserver 账户验证模式,在sqlserver 账户验证模式中,sa账户是大家所熟知的,并且sa也是内置的默 ...

  2. Escape HDU - 3605(归类建边)

    Escape Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  3. JeeSite4.x 搭建并部署到服务器

    1.下载地址:https://gitee.com/thinkgem/jeesite4 2.文档地址:http://jeesite4.mydoc.io/?t=267354 2.1一定要看,都很清晰,没废 ...

  4. MT【169】拉格朗日配方

    已知$x^2+y^2+z^2=1$求$3xy-3yz+2z^2$的最大值______ 答案:$3$ 提示:$3(x^2+y^2+z^2)-(3xy-3yz+2z^2)=3\left(y+\dfrac{ ...

  5. NOIp 2018 游记

    Day0 啥都没做,记了一下 vimrc 和配置,然后搞了一下午的颓. 然后头有点晕乎乎的,早点洗澡去睡觉,在床上想了很多,但还是强制自己大脑放空,早点睡着了. Day1 由于去年的教训,今年我决定先 ...

  6. 【THUWC2017】随机二分图(动态规划)

    [THUWC2017]随机二分图(动态规划) 题面 BZOJ 洛谷 题解 如果每天边的限制都是\(0.5\)的概率出现或者不出现的话,可以把边按照二分图左侧的点的编号排序,然后设\(f[i][S]\) ...

  7. Apache虚拟主机+AD压力测试

    <Directory "/usr/local/awstats/wwwroot"> Options NoneAllowOverride None Order allow, ...

  8. hdu 3294 Girls' research(manacher)

    Problem Description One day, sailormoon girls are so delighted that they intend to research about pa ...

  9. Ubuntu常用软件安装(小集合)

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux Linux包系列的知识:https://www.cnblogs.com/dun ...

  10. css 蒙层

    蒙层 利用z-index: .mui-backdrop-other { position: fixed; top: 44px; right:; bottom:; left:; z-index:; ba ...