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. jenkins运行脚本生成HTML报告时遇到的问题

    1.jenkins生成HTML报告 1)安装插件:HTML Publisher plugin 2)系统管理->插件管理->安装HTMLHTML Publisher plugin 2.job ...

  2. robotframework编写用例

    ** Test Cases *** Test With Settings [Documentation] Another dummy test # 用于指定测试用例文档 [Tags] dummy ow ...

  3. word 2013 粘贴的图片自适应大小

    1.先切换到页面视图 2.粘贴图片进去,成功自适应,像素不变,可右键图片另存为图片,查看原始图片,或者ctrl+滚轮上放大. 3.在其他视图就会出现超出范围的情况,还要自己调整

  4. flask简单登录注册

    效果图 发布问答页面需要登录才能访问,没有登录会跳转到登录页面 模板继承,正则验证,数据库迁移,md5加密 mysql 5.7 登录页面 登录后的发布问答页面,右上角会显示用户名和注销 项目代码:码云

  5. 自学Aruba集锦

    自学Aruba集锦 01 自学Aruba之功率单位和相对单位 02 自学Aruba之无线频段---ISM频段及UNII频段 03 自学Aruba之2.4GHz及5GHz无线信道 04 自学Aruba之 ...

  6. attr prop jquery关于获取DOM属性值的两个函数

    $('#domid').attr('acitve') $('#domid').prop('checked') // 在使用JQUERY获取DOM元素的属性时,有两个函数,attr 和 prop < ...

  7. CSS圆角进化论

     CSS圆角发展过程 大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现 ...

  8. [2017-8-02]Android Learning Day8

    自定义动画效果 新建一个customAnim类 package com.liwenchi.myapplication; import android.view.animation.Animation; ...

  9. ELK部署详解--elasticsearch

    #Elasticsearch 是一个实时的分布式搜索和分析引擎,它可以用于全文搜索,结构化搜索以及分析.它是一个建立在全文搜索引擎 Apache Lucene 基础上的搜索引擎,使用 Java 语言编 ...

  10. 队列模式&主题模式

    # RabbitMQ 消息中间件 **Advanced Message Queuing Protocol (高级消息队列协议** The Advanced Message Queuing Protoc ...