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.slider 更多 slider 示例

模块加载名称:slider
通过对 slider 模块的使用,你可以在页面构建出可拖动的滑动元素,如下是一个最基本的用法:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>滑块</title>
  <link rel="stylesheet" href="../src/css/wui.css">
</head>
<body>
<div id="slideTest1"></div>
<script src="../src/wui.js"></script>
<script>
wui.use('slider', function(){
  var slider = wui.slider;

  //渲染
  slider.render({
    elem: '#slideTest1'  //绑定元素
  });
});
</script>
</body>
</html>
slider 组件支持以下参数
参数选项 说明 类型 默认值
elem 指向容器选择器 string/object -
type 滑块类型,可选值有:default(水平滑块)、vertical(垂直滑块) string default
min 滑动条最小值,正整数,默认为 0 number 0
max 滑动条最大值 number 100
range 是否开启滑块的范围拖拽,若设为 true,则滑块将出现两个可拖拽的环 boolean false
value 滑块初始值,默认为数字,若开启了滑块为范围拖拽(即 range: true),则需赋值数组,异表示开始和结尾的区间,如:value: [30, 60] number/Array 0
step 拖动的步长 number 1
showstep 是否显示间断点 boolean false
tips 是否显示文字提示 boolean true
input 是否显示输入框(注意:若 range 参数为 true 则强制无效)
点击输入框的上下按钮,以及输入任意数字后回车或失去焦点,均可动态改变滑块
boolean false
height 滑动条高度,需配合 type:"vertical" 参数使用 number 200
disabled 是否将滑块禁用拖拽 boolean false
theme 主题颜色,以便用在不同的主题风格下 string #009688
当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值,你也可以自定义提示内容:
slider.render({
  elem: '#slideTest1'
  ,setTips: function(value){ //自定义提示文本
    return value + '%';
  }
});
在滑块数值被改变时触发。该回调非常重要,可动态获得滑块当前的数值。你可以将得到的数值,赋值给隐藏域,或者进行一些其它操作。
//当滑块为普通模式,回调返回的 value 是一个数值
slider.render({
  elem: '#slideTest1'
  ,change: function(value){
    console.log(value) //动态获取滑块数值
    //do something
  }
});

//当滑块为范围模式,回调返回的 value 是一个数组,包含开始和结尾
slider.render({
  elem: '#slideTest1'
  ,range: true
  ,change: function(value){
    console.log(value[0]) //得到开始值
    console.log(value[1]) //得到结尾值
    //do something
  }
});
执行 slider 实例时,会返回一个当前实例的对象,里面包含针对当前实例的方法和属性。
语法:var ins1 = slider.render(options);
var ins1 = slider.render(options); //获得实例对象

ins1.config //获得当前实例的配置项
ins1.setValue(nums); //动态给滑块赋值
你可以通过外部方法动态改变滑块数值,如:
var ins1 = slider.render({
  elem: '#test1'
  //…
});

//改变指定滑块实例的数值
ins1.setValue(20)

//若滑块开启了范围(range: true)
ins1.setValue(20, 0) //设置开始值
ins1.setValue(60, 1) //设置结尾值
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile