jQuery EasyUI,Slider(滑动条)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于 Draggable(拖动)组件。

一.加载方式

class 加载方式

<input class="easyui-slider" value="12" style="width:300px" data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

slider()将一个输入框执行滑动条方法

JS 加载调用

$(function () {
$('#box').slider({
width: 300,
value: 12,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
});
});

二.属性列表

width   number 滑动条宽度。默认值 auto。

$(function () {
$('#box').slider({
width: 300,
height: 50,
mode:'v'
});
});

height   number 滑动条高度。默认值 auto。

$(function () {
$('#box').slider({
width: 300,
height: 50,
mode:'v'
});
});

mode   string 声明滚动条类型。可用值有:'h'(水平)、'v'(垂直)。默认值'h'。

$(function () {
$('#box').slider({
width: 300,
height: 50,
mode:'v'
});
});

reversed   boolean 设置为 true 时,最小值和最大值将对调他们的位置。默认值 false。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
reversed:true
});
});

showTip   boolean 定义是否显示值信息提示。默认值 false。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true
});
});

disabled   boolean 定义是否禁用滑动条。默认值 false。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
disabled:true
});
});

value   number 默认值。默认值0。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
value:
});
});

min   number 允许的最小值。默认值0。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
min:10, //允许的最小值
max:90, //允许的最大值
});
});

max   number 允许的最大值。默认值100。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
min:10, //允许的最小值
max:90, //允许的最大值
});
});

step   number 增加或减少。默认值1。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
step:10, //增加或减少值。默认值1。
});
});

rule   array显示标签旁边的滑块,'|' — 只显示一行。默认值[]。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
});

tipFormatter   function 该函数用于格式化滑动条。返回的字符串值将显示提示。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
tipFormatter:function (value) {
return value + '%';
}
});
});

三.事件列表

onChange   newValue, oldValue 在字段值更改的时候触发。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
onChange:function (newValue, oldValue) {
alert('接收更改后的值'+newValue);
alert('接收更改前的值'+oldValue);
}
});
});

onSlideStart   value 在开始拖拽滑动条的时候触发。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
onSlideStart:function (value) {
alert(value);
}
});
});

onSlideEnd   value 在结束拖拽滑动条的时候触发。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
onSlideEnd:function (value) {
alert(value);
}
});
});

四.方法列表

options   none 返回滑动条属性。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
alert($('#box').slider('options'));
});

destroy   none 销毁滑动条对象。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('destroy');
});

resize   param设置滑动条大小。'param'参数包含一下属性:width:新滑动条宽度。height:新滑动条高度。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('resize',{
width:500,
height:20
});
});

getValue   none 获取滑动条的值。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
alert($('#box').slider('getValue'));
});

setValue   value 设置滑动条的值。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('setValue',90);
});

clear   none 清除滑动条的值。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('clear');
});

reset   none 重置滑动条的值。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('reset');
});

enable   none 启用滑动条控件。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('enable');
});

disable   none 禁用滑动条控件。

$(function () {
$('#box').slider({
width: 300,
rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],
showTip:true,
});
$('#box').slider('disable');
});

使用$.fn.slider.defaults 重写默认值对象。

第二百二十节,jQuery EasyUI,Slider(滑动条)组件的更多相关文章

  1. 第二百零三节,jQuery EasyUI,Window(窗口)组件

    jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...

  2. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  3. 第三百二十节,Django框架,生成二维码

    第三百二十节,Django框架,生成二维码 用Python来生成二维码,需要qrcode模块,qrcode模块依赖Image 模块,所以首先安装这两个模块 生成二维码保存图片在本地 import qr ...

  4. Slider( 滑动条) 组件

    本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个组件依赖于Draggable(拖动)组件. 一. 加载方式//class 加载方式<input class=" ...

  5. 第二百二十六节,jQuery EasyUI,Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

  6. 第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件

    jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...

  7. 第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件

    jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...

  8. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  9. 第二百二十九节,jQuery EasyUI,后台管理界面---后台登录

    jQuery EasyUI,后台管理界面---后台登录 登录原理图 一,login.php,登录界面 <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 菜单下拉效果demo记录

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jstat的用法

    转载:http://www.51testing.com/html/92/77492-203728.html 用以判断JVM是否存在内存问题呢?如何判断JVM垃圾回收是否正常?一般的top指令基本上满足 ...

  3. SQL语句详细汇总[转]

    经典SQL语句大全 一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql serv ...

  4. PHP变量引用赋值与变量赋值变量的区别

    变量默认总是传值赋值.那也就是说,当将一个表达式的值赋予一个变量时,整个原始表达式的值被赋值到目标变量.这意味着,例如,当一个变量的值赋予另外一个变量时,改变其中一个变量的值,将不会影响到另外一个变量 ...

  5. cookie、localStorage和sessionStorage区别

    三者区别见下表: 说明: cookie的处理过程为: 服务器向客户端发送cookie 浏览器将cookie保存 之后每次http请求浏览器都会将cookie发送给服务器端 对于 cookie,我们还需 ...

  6. Odoo/OpenERP 日志配置、使用及实现

    当应用处于生产环境时,日志提供了有价值的运行时调试及监控信息,并且,也是一个有用的调试工具对于处于开发阶段的应用来说.此文描述在Odoo8.0中日志的配置.使用及实现 日志配置        Odoo ...

  7. MYSQL AND OR的联用

    MYSQL中"AND"和"OR"都是条件控制符."AND"是求交集,而"OR"则是求并集,非常多情况下,须要联用它们两个 ...

  8. bootstrap的两种在input框后面增加一个图标的方式

    第一种: <div class="input-group"> <div class="input-icon-group"> <di ...

  9. Struts2中文件下载

    在struts.xml中配置如下 <action name="download" class="cn.itcast.domain.User" method ...

  10. RecSys Challenge 2015

    [The Task] Given a sequence of click events performed by some user during a typical session in an e- ...