【蓝桥软件学院】数字和时间微调.docx

数字和时间微调课程目标 了解NumberSpinner和TimeSpinner的基本属性、方法和事件SpinnerSpinner简介微调控件结合了一个可编辑文本框和2个小按钮让用户选择一个值的范围。和下拉列表框类似，微调控件允许用户输入值，但是没有下拉列表。微调控件是创建其他高级微调控件的基础控件，比如：numberspinner, timespinner等。Spinner并不是学习的重点，只是为后续的NumberSpinner、TimeSpinner及DateTimeSpinner打基础。大家简单了解即可。效果如下图：开发Spinner程序复制1. 参考代码:27/spinner01.html效果如上图。Spinner常用属性属性名属性值类型描述默认值widthnumber组件的宽度。autoheightnumber组件的高度。22valuestring默认值。minnumber允许的最小值。maxnumber允许的最大值。incrementnumber在点击微调按钮的时候的增量值。1editableboolean定义用户是否可以直接输入值到字段。truedisabledboolean定义是否禁用字段。falsereadonlyboolean定义控件是否为只读。falsespinAlignstring定义控件的对齐方式。可用值：left,right,horizontal,verticalrightspinfunction(down)在用户点击微调按钮的时候调用的函数。down参数对应用户点击的向下按钮。Spinner常用方法方法名方法参数描述optionsnone返回属性对象。destroynone销毁微调组件。resizewidth返回组件宽度。通过width参数重写原始宽度。enablenone启用组件。disablenone禁用组件。getValuenone获取组件值。setValuevalue设置组件值。readonlymode启用/禁用只读模式。clearnone清空组件值。resetnone重置组件值。Spinner常用事件事件名事件参数描述onSpinUpnone在用户点击向上微调按钮的时候触发。onSpinDownnone在用户点击向下微调按钮的时候触发。NumberSpinnerNumberSpinner简介数字微调控件的创建是基于微调控件和数值输入框控件的，允许用户使用上/下微调按钮调整到用户的期望值。效果如下图：开发NumberSpinner程序复制1. 参考代码:27/numberspinner01.html该数值输入框不允许输入，只能通过上/下微调按钮调整数值。效果如下图：NumberSpinner常用属性本组件的属性完整继承自spinner(微调)和numberbox(数值输入框)。NumberSpinner常用方法本组件的方法完整扩展自spinner(微调)。NumberSpinner常用事件本组件的事件完整继承自spinner(微调)。案例一：复制1. 价格： 2.3. $(#input1).numberspinner(4. min:0,5. max:100000000,6. precision:1,7. value:0,8. groupSeparator:,9. prefix:$,10. prompt: 请输入数值,11. /带有清除图标12. icons:13. iconCls:icon-clear,14. handler: function(e)15. $(e.data.target).numberspinner(clear);16. 17. 18. );19.20. 禁用字段21. 启用字段22. 设置值 23. 获取值 24. 清除值 25. 重置值 26. 27. function set()28. $.mpt(提示信息, 请输入要设置的数值：, function(value)29. if (value)30. $(#input1).numberspinner(setValue,value);31. 32. );33. 34. 参考代码:27/numberspinner01.htmlTimeSpinnerTimeSpinner简介时间微调组件的创建基于微调组件。它和数字微调类似，但是显示的时间值。时间微调组件允许用户点击组件右侧的小按钮来增加或减少时间。效果如下图：开发TimeSpinner程序复制1. 参考代码:27/timespinner01.html效果如上图。TimeSpinner常用属性属性名属性值类型描述默认值separatorstring定义在小时、分钟和秒之间的分隔符。:showSecondsboolean定义是否显示秒钟信息。falsehighlightnumber初始选中的字段 0=小时,1=分钟.0formatterfunction(date)格式化日期函数，该函数接受date对象型参数并返回一个字符串值。parserfunction(s)解析日期/时间字符串的函数，该函数接受date字符串类型的参数并返回一个date对象值。selectionsarray高亮选择部分的值，突出显示每一部分。例如：将字符从0点到2则高亮小时部分。0,2,3,5,6,8TimeSpinner常用方法方法名方法参数描述optionsnone返回属性对象。setValuevalue设置时间微调组件的值。getHoursnone获取当前的小时数。getMinutesnone获取当前的分钟数。getSecondsnone获取当前的秒数。TimeSpinner常用事件该组件事件完全继承自spinner(微调)。案例一：复制1. $(#input1).timespinner(2. editable:false,3. showSeconds: true,4. prompt: Input time here!,5. icons:6. iconCls:icon-clear,7. handler: function(e)8. $(e.data.target).timespinner(clear);9. 10. 11. );参考代码:27/timespinner01.htmlDateTimeSpinnerDateTimeSpinner简介时间微调组件的创建基于微调组件。它和数字微调类似，但是显示的时间值。时间微调组件允许用户点击组件右侧的小按钮来增加或减少时间。效果如下图：开发DateTimeSpinner程序复制1. 参考代码:27/datetimespinner01.html效果如上图。DateTimeSpinner常用属性属性名属性值类型描述默认值selectionsarray选择高亮部分的值0,2,3,5,6,10,11,13,14,16,17,19DateTimeSpinner常用方法方法扩展自 timespinner。DateTimeSpinner常用事件事件扩展自 timespinner。案例一：复制1. $(#input1).datetimespinner(2. editable:false,3. showSeconds: true,4. prompt: Input time here!,5. icons:6