第二百一十六节，jQuery EasyUI，Spinner(微调)组件

jQuery EasyUI，Spinner(微调)组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.事件列表

　　4.方法列表

本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法，这个组件依赖于 ValidateBox(验证框)组件。

这个组件是其他微调组件的基础组件，所以一般不会直接使用这个组件

一．加载方式

Spinner(微调)组件是其他两款高级微调组件的基础组件，默认情况下无法微调。这个组件不支持 class 加载方式。

html

<input id="box" value="2">

JS 加载调用

spinner()将一个元素执行微调组件

$(function () {$('#box').spinner({required: true,});
});

二．属性列表

width number 组件宽度。默认值 auto。

$(function () {$('#box').spinner({width: 200,height:30});
});

height number 组件高度。默认值22。

$(function () {$('#box').spinner({width: 200,height:30});
});

value string 默认值。

$(function () {$('#box').spinner({width: 200,height:30,value:5});
});

min string 允许的最小值。默认值 null。单独使用没有效果

$(function () {$('#box').spinner({width: 200,height:30,min:5,max:50});
});

max string 允许的最大值。默认值 null。单独使用没有效果

$(function () {$('#box').spinner({width: 200,height:30,min:5,max:50});
});

increment number 在点击微调按钮的时候的增量值。默认值1。单独使用没有效果

$(function () {$('#box').spinner({width: 200,height:30,increment:5     //在点击微调按钮的时候的增量值。默认值1
    });
});

editable boolean 定义用户是否可以直接输入值到字段。默认值 true。

$(function () {$('#box').spinner({width: 200,height:30,editable:false     });
});

disabled boolean 定义是否禁用字段。默认值 false。

$(function () {$('#box').spinner({width: 200,height:30,disabled:true});
});

spin function(down) 在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮。可以判断用户点击微调的上按钮还是下按钮，点击下按钮返回true，点击上按钮返回false

$(function () {$('#box').spinner({width: 200,height:30,spin:function (down) {alert(down);}});
});

三．事件列表

onSpinUp none 在用户点击向上微调按钮的时候触发。

$(function () {$('#box').spinner({width: 200,height: 30,onSpinUp: function () {     //在用户点击向上微调按钮的时候触发//当用户点击上按钮时，获取到输入框的值加1，在赋值给输入框$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) + 1);},onSpinDown: function () {   //在用户点击向下微调按钮的时候触发//当用户点击下按钮时，获取到输入框的值减1，在赋值给输入框$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) - 1);},});
});

onSpinDown none 在用户点击向下微调按钮的时候触发。

$(function () {$('#box').spinner({width: 200,height: 30,onSpinUp: function () {     //在用户点击向上微调按钮的时候触发//当用户点击上按钮时，获取到输入框的值加1，在赋值给输入框$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) + 1);},onSpinDown: function () {   //在用户点击向下微调按钮的时候触发//当用户点击下按钮时，获取到输入框的值减1，在赋值给输入框$('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) - 1);},});
});

四．方法列表

options none 返回属性对象。

$(function () {$('#box').spinner({width: 200,height: 30});alert($('#box').spinner('options'));
});

destroy none 销毁微调组件。

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('destroy');
});

resize width 返回组件宽度。通过'width'参数重写原始宽度。重写或者重置组件

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('resize',100);  //重写宽度
});

enable none 启用组件。

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('disable');$('#box').spinner('enable');
});

disable none 禁用组件。

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('disable');$('#box').spinner('enable');
});

getValue none 获取组件值。

$(function () {$('#box').spinner({width: 200,height: 30});alert($('#box').spinner('getValue'));  //获取组件值
});

setValue value 设置组件值。

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('setValue',500);
});

clear none 清空组件值。

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('clear');
});

reset none 重置组件值。

$(function () {$('#box').spinner({width: 200,height: 30});$('#box').spinner('reset');
});

我们可以使用$.fn.spinner.defaults 重写默认值对象。

第二百一十六节，jQuery EasyUI，Spinner(微调)组件相关推荐

第二百一十三节，jQuery EasyUI，NumberBox(数值输入框)组件
jQuery EasyUI,NumberBox(数值输入框)组件功能:只能输入数值,和各种数值的计算学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI ...
第二百四十六节，Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件学习要点: 1.弹出框 2.警告框本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一．弹出框弹出框即点击一个元素弹出一个包含标题和内容的 ...
第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
大白话5分钟带你走进人工智能-第二十六节决策树系列之Cart回归树及其参数(5)...
第二十六节决策树系列之Cart回归树及其参数(5) 上一节我们讲了不同的决策树对应的计算纯度的计算方法, ...
flash动画设计期末作业_「2019年下学期」第二十五二十六节：期末作品三-吉祥物设计...
初心伟大的艺术品不必追随潮流,他本身就能引领潮流. 课前准备软件安装 [2019(上)]<三维建模与动画设计> [2019年下学期]第一节:选修介绍及选修人数确定 [2019年下学期] ...
第二章第十六节：字典的循环嵌套
Python基础入门(全套保姆级教程) 第二章第十六节:字典的循环嵌套字典的循环直接看图看代码 dic = {"赵四": "特别能歪嘴","刘能 ...
第二十六节 UBL-USB升级
第二十六节 UBL-USB升级 UBL升级是使用USB功能来进行升级的,它的配置也是一样的步骤. 配置UBL. 打开IAR,打开BLE-CC254x-1.4.0下的工程. C:\Texas In ...
Python编程基础：第二十六节 kwargs参数**kwargs
第二十六节 kwargs参数**kwargs 前言实践前言上一节我们尝试传入任意多的参数,我们这一节来学习传入任意多具有参数名称的参数.kwargs参数将用户传入的参数打包为字典传入函数中用于进 ...
Python编程基础：第五十六节 filter函数Filter
第五十六节 filter函数Filter 前言实践前言 filter函数的作用是对可迭代对象内部的元素按照特定条件进行过滤,其书写方式为filter(function, iterable),第一个 ...
第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

第二百一十六节，jQuery EasyUI，Spinner(微调)组件

第二百一十六节，jQuery EasyUI，Spinner(微调)组件相关推荐

最新文章

热门文章