EasyUI 微调器
2016-07-29 18:31
381 查看
一、微调器
微调器（spinner）把可编辑的文本框和两个小按钮结合起来，允许用户从某个范围的值中进行选择。与组合框（combobox）相似，微调器（spinner）允许用户输入一个值，但是它买i有下拉列表。微调器（spinner）是创建其他微调器组件（比如：数值微调器 numberspinner、时间微调器 timespinner，等等）的基础组件。1、用法
微调器（spinner）应该使用 javascript 进行创建。从标记创建是不允许的。<input id="ss" value="2">
$('#ss').spinner({
required:true,
increment:10
});
2、属性
该属性扩展自验证框（validatebox），下面是为微调器（spinner）添加的属性。| 名称 | 类型 | 描述 | 默认值 |
| 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 |
| spin | function(down) | 当用户点击微调按钮时调用的函数。'down' 参数指示用户是否点击了向下微调按钮。 | |
3、事件
| 名称 | 参数 | 描述 |
| onSpinUp | none | 当用户点击向上微调按钮时触发。 |
| onSpinDown | none | 当用户点击向下微调按钮时触发。 |
4、方法
该方法扩展自验证框（validatebox），下面是为微调器（spinner）添加的方法。| 名称 | 参数 | 描述 |
| options | none | 返回选项（options）对象。 |
| destroy | none | 销毁微调器（spinner）组件。 |
| resize | width | 重置组件的宽度。通过传递 'width' 参数来重写初始宽度。 |
| enable | none | 启用组件。 |
| disable | none | 禁用组件。 |
| getValue | none | 获取组件的值。 |
| setValue | value | 设置组件的值。 |
| clear | none | 清除组件的值。 |
| reset | none | 重置组件的值。该方法自版本 1.3.2 起可用。 |
二、数值微调器
数值微调器（numberspinner）是基于微调器（spinner）和数字框（numberbox）创建的。它可以把输入值转换为不同类型（比如：数字 numeric、百分比 percentage、货币 currency，等等）。它允许用户使用向上/向下微调按钮滚动到一个期望值。1、用法
（1）、从标记创建数值微调器（numberspinner）。<input id="ss" class="easyui-numberspinner" style="width:80px;"
required="required" data-options="min:10,max:100,editable:false">
（2）、使用 javascript 创建数值微调器（numberspinner）。
<input id="ss" required="required" style="width:80px;">
$('#ss').numberspinner({
min: 10,
max: 100,
editable: false
});
（3）、创建数值微调器（numberspinner），并把数字格式化为货币字符串。
<input class="easyui-numberspinner" value="1234567890" style="width:150px;"
data-options="required:true,precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'">
2、方法
该方法扩展自微调器（spinner），下面是为数值微调器（numberspinner）重写的方法。| 名称 | 参数 | 描述 |
| options | none | 返回选项（options）对象。 |
| setValue | value | 设置数值微调器（numberspinner）的值。 |
3、实例
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Basic NumberSpinner - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<h2>基础数字调整器</h2>
<input class="easyui-numberspinner" style="width:80px;" data-options="
onChange: function(value){
$('#vv').text(value);
}
"></input>
<div style="margin:10px 0;">
Value: <span id="vv"></span>
</div>
<div style="margin:20px 0;"></div>
<h2>数字增量</h2>
<input class="easyui-numberspinner" value="1000" data-options="increment:100" style="width:120px;"></input>
<div style="margin:20px 0;"></div>
<h2>数字范围</h2>
<input class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80px;"></input>
</body>
</html>
三、时间微调器
时间微调器（timespinner）是基于微调器（spinner）创建的。它与数值微调器（numberspinner）相似，但是它只显示时间值。时间微调器（timespinner）允许用户通过点击组件右侧的小微调按钮来增加或减少时间。1、用法
（1）、从标记创建时间微调器（timespinner）。<input id="ss" class="easyui-timespinner" style="width:80px;"
required="required" data-options="min:'08:30',showSeconds:true">
（2）、使用 javascript 创建时间微调器（timespinner）。
<input id="ss" style="width:80px;">
$('#ss').timespinner({
min: '08:30',
required: true,
showSeconds: true
});
2、属性
该属性扩展自微调器（spinner），下面是为时间微调器（timespinner）添加的属性。| 名称 | 类型 | 描述 | 默认值 |
| separator | string | 时分秒之间的分隔符。 | : |
| showSeconds | boolean | 定义是否显示秒的信息。 | false |
| highlight | number | 初始高亮的域，0 = 时，1 = 分，... | 0 |
3、方法
该方法扩展自微调器（spinner），下面是为时间微调器（timespinner）重写的方法。| 名称 | 参数 | 描述 |
| options | none | 返回选项（options）对象。 |
| setValue | value | 设置时间微调器（timespinner）的值。 |
| getHours | none | 获取当前的时钟的值。 |
| getMinutes | none | 获取当前的分钟的值。 |
| getSeconds | none | 获取当前的秒钟的值。 |
4、实例
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Basic DateTimeSpinner - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<h2>基础日期时间调节器</h2>
<input class="easyui-datetimespinner" value="6/24/2014 17:23" style="width:180px;">
<div style="margin:20px 0;"></div>
<h2>带清除图标的日期时间调节器</h2>
<input class="easyui-datetimespinner" style="width:180px;" data-options="
value: '6/24/2014 17:23:56',
showSeconds: true,
prompt: 'Input date time here!',
icons:[{
iconCls:'icon-clear',
handler: function(e){
$(e.data.target).datetimespinner('clear');
}
}]
">
<div style="margin:20px 0;"></div>
<h2>日期时间调节器格式</h2>
<p>mm/dd/yyyy hh:mm</p>
<input class="easyui-datetimespinner" value="6/24/2014 17:23" style="width:180px;">
<p>mm/dd/yyyy</p>
<input class="easyui-datetimespinner" value="6/24/2014" data-options="formatter:formatter1,parser:parser1" style="width:180px;">
<p>yyyy-mm</p>
<input class="easyui-datetimespinner" value="6/24/2014" data-options="formatter:formatter2,parser:parser2,selections:[[0,4],[5,7]]" style="width:180px;">
<script type="text/javascript">
function formatter1(date){
if (!date){return '';}
return $.fn.datebox.defaults.formatter.call(this, date);
}
function parser1(s){
if (!s){return null;}
return $.fn.datebox.defaults.parser.call(this, s);
}
function formatter2(date){
if (!date){return '';}
var y = date.getFullYear();
var m = date.getMonth() + 1;
return y + '-' + (m<10?('0'+m):m);
}
function parser2(s){
if (!s){return null;}
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
if (!isNaN(y) && !isNaN(m)){
return new Date(y,m-1,1);
} else {
return new Date();
}
}
</script>
<div style="margin:20px 0;"></div>
<h2>基础时间调整器</h2>
<input class="easyui-timespinner" style="width:80px;">
<div style="margin:20px 0;"></div>
<h2>时间范围</h2>
<div style="margin:20px 0;">
<span>From 08:30 to 18:00</span>
</div>
<input class="easyui-timespinner" data-options="min:'08:30',max:'18:00'" style="width:80px;"></input>
<div style="margin:20px 0;"></div>
<h2>时间调整器控制</h2>
<div style="margin:20px 0;">
<a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a>
<a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a>
<a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>
<a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>
</div>
<input id="dt" class="easyui-timespinner" style="width:80px;">
<script>
function getValue(){
var val = $('#dt').timespinner('getValue');
alert(val);
}
function setValue(){
$('#dt').timespinner('setValue', '09:45');
}
function disable(){
$('#dt').timespinner('disable');
}
function enable(){
$('#dt').timespinner('enable');
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- EasyUI 日历
- EasyUI 日期时间框
- EasyUI 日期框
- Leetcode 62. Unique Paths (Medium) (cpp)
- EasyUI 数字框
- Rescue
- EasyUI 组合网格
- 给手势UITapGestureRecognizer绑定tag
- EasyUI 组合框
- java设计模式——建造者模式(Builder Pattern)
- EasyUI 组合树
- EasyUI 组合
- Android 5.1 SystemUI 状态栏修改
- EasyUI 文本框、文件框和开关按钮
- ueditor 文本编辑器
- 98.Which two statements are true regarding the usage of the SQL*Loader utility? (Choose two.)
- Rescue hd 1242
- POJ 2031 Building a Space Station （最小生成树）
- EasyUI 验证框
- EasyUI 表单