使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

Slider

Document
Native
Basic
Slider Rule
Range Slider
Format Tip Information
Vertical Slider
Non Linear Slider
Fluid Slider
Plus
Extend

Spinner Document

扩展自$.fn.validatebox.defaults。使用$.fn.spinner.defaults重写默认值对象。
微调控件结合了一个可编辑文本框和2个小按钮让用户选择一个值的范围。和下拉列表框类似,微调控件允许用户输入值,但是没有下拉列表。微调控件是创建其他高级微调控件的基础控件,比如:numberspinner, timespinner等。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

用法:

只能使用Javascript创建微调控件。标签创建是无效的。

				
<input id="ss" value="2">  
<script type="text/javascript">
$('#ss').spinner({    
    required:true,    
    increment:10    
});  
</script>
				
			

属性:

微调控件的属性扩展自validatebox(验证框),微调控件新增或重写的属性如下:

属性名 属性值类型 描述 默认值
width number 组件宽度。 auto
height number 组件高度。(该属性自1.3.2版开始可用) 22
value string 默认值。
min string 允许的最小值。 null
max string 允许的最大值。 null
increment number 在点击微调按钮的时候的增量值。 1
editable boolean 定义用户是否可以直接输入值到字段。 true
disabled boolean 定义是否禁用字段。 false
readonly boolean 定义控件是否为只读。(该属性自1.3.6版开始可用) false
spinAlign string 定义控件的对齐方式。可用值:'left','right','horizontal','vertical'(该属性自1.5版开始可用) right
spin function(down) 在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮。

事件:

事件名 参数 描述
onSpinUp none 在用户点击向上微调按钮的时候触发。
onSpinDown none 在用户点击向下微调按钮的时候触发。

方法:

微调控件的方法扩展自validatebox(验证框),微调控件新增的方法如下:

方法名 方法属性 描述
options none 返回属性对象。
destroy none 销毁微调组件。
resize width 返回组件宽度。通过'width'参数重写原始宽度。

代码示例:
				
<script type="text/javascript">
$('#ss').spinner('resize');            // 调整到原始宽度
$('#ss').spinner('resize', 200);    // 调整到新宽度
</script>
				
			
enable none 启用组件。
disable none 禁用组件。
getValue none 获取组件值。
setValue value 设置组件值。
readonly mode 启用/禁用只读模式。(该方法自1.3.6版开始可用)

代码示例:
				
<script type="text/javascript">
$('#ss').spinner('readonly');   // 启用只读模式
$('#ss').spinner('readonly', true); // 启用只读模式
$('#ss').spinner('readonly', false);  // 禁用只读模式
</script>
				
			
clear none 清空组件值。
reset none 重置组件值。(该方法自1.3.2版开始可用)