WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
评分组件 - wui.rate 更多 rate 示例

模块加载名称:rate
rate 组件可以用来进行展示或评价,你只需要通过更改参数设定来开启你想要的功能,如下是一个最基本的例子:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>评分组件</title>
  <link rel="stylesheet" href="../src/css/wui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/wui.js"></script>
  <script>
  wui.use('rate', function(){
    var rate = wui.rate;

    //渲染
    var ins1 = rate.render({
      elem: '#test1'  //绑定元素
    });
  });
  </script>
</body>
</html>
这真的就是个小例子,所以下文对组件的参数进行了说明,请仔细阅读奥 目前 rate 组件提供了以下基础参数,你可根据实际场景进行相应的设置
参数选项 说明 类型 默认值
elem 指向容器选择器 string/object -
length 评分组件中具体星星的个数。个数当然是整数啦,残缺的星星很可怜的,所以设置了小数点的组件我们会默认向下取整 number 5
value 评分的初始值 number 0
theme 主题颜色。我们默认的组件颜色是#FFB800,你可以根据自身喜好来更改组件的颜色,以适用不同场景 string #FFB800
half 设定组件是否可以选择半星 boolean false
text 是否显示评分对应的内容 boolean false
readonly 是否只读,即只用于展示而不可点 boolean false
如若你设置分数,我们会根据你是否开启半星功能,来做一个具体的规范:
关闭半星功能:
小数值大于 0.5 :分数向上取整,如 3.6 分,则系统自动更改为 4 分
小数值小于等于 0.5 :分数向下取整,如 3.2 分,则系统自动更改为 3 分
如果在关闭半星功能的情况下开启了文本,你会发现你的分数也相应的变成了整数
开启半星功能:
不论你的小数值是 0.1 还是 0.9,都统一规划为 0.5,在文本开启的情况下,你可以看见你的分数并没有发生变化
通过 setText 函数,在组件初次渲染和点击后时产生回调。我们默认文本以星级显示,你可以根据自己设定的文字来替换我们的默认文本,如 “讨厌” “喜欢” 。若用户选择分数而没有设定对应文字的情况下,系统会使用我们的默认文本
rate.render({
  elem: '#test1'
  ,setText: function(value){
    var arrs = {
      '1': '极差'
      ,'2': '差'
      ,'3': '中等'
      ,'4': '好'
    };
    this.span.text(arrs[value] || ( value + "星"));
  }
});
当你点击 3 星时,文本内容是中等,点击 5 星时,由于没有设定对应文字,所以文本会显示 5 星 通过 choose 实现函数,在组件被点击后触发,回调分数,用户可根据分数来设置效果,比如出现弹出层
rate.render({
  elem: '#test1'
  ,choose: function(value){
    if(value > 4) alert( '么么哒' )
  }
});
那么当你点击 5 星或更高星级时,页面就会弹出“么么哒”啦,你可根据相应需求在 choose 里完善你的代码
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile