你好,游客 登录 注册 搜索
背景:
阅读新闻

html spin数字增减input,纯脚本生成

[日期:2011-07-30] 来源:www.iwms.net  作者:木鸟 [字体: ]

  html没有定义数字增减类型的input也就是windows程序中的spin或up-down控制。spin能够控制用户只能调整数字值,并可限制数值的范围,这样安全性和实用性更高。在iwms的为实现spin功能找了很多脚本但都不是太满意,于是自己写了下边的脚本来模拟spin效果,图片在样式表中定义的,可自己修改。

  实现的功能如下:1、可指定能接受的数值范围;2、可指定数值增减的步长;2、可设置input为只读。具体使用方法请参照以下实例:

 

<html>
<head>
<title>iwms html spin</title>
<style type="text/css">

table.spin {display:inline-table;*display:inline;vertical-align:middle}

button.spinPlus, button.spinMinus {display:block;height:10px;width:20px;font-size:5pt;line-height:10pt;padding:0;border-width:2px;background:buttonface url(style/admin/spin.gif) no-repeat center 0}

button.spinMinus {background-position:center -10px}

</style>
 </head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

// spin功能类

var spin = new Object();

spin.plus=function(obj,max,step){
spin.plusOrMinus(1,obj,max,step);
};

spin.minus=function(obj,min,step){
spin.plusOrMinus(0,obj,min,step);
};

spin.plusOrMinus=function(add,obj,limit,step){

obj=$(obj).parent().parent().find("input:eq(0)").get(0);

spin.add=add;

spin.input=obj;

spin.limit=limit;

spin.step=step==undefined?1:step;

spin.val=parseFloat(obj.value);

if(isNaN(spin.val))spin.val=0;

if(spin.exceed())return;

spin.change();

spin.interval=window.setInterval('spin.change()',120);

};

spin.stop=function(){
window.clearInterval(spin.interval);
};

spin.change=function(){
if(spin.add){
spin.val+=spin.step;
}else{
spin.val-=spin.step;
}

if(!spin.exceed()){
spin.input.value=spin.val;
}

};

spin.exceed=function(){
if((spin.add && spin.val>spin.limit) || (!spin.add && spin.val<spin.limit)){
return true;
}else{
return false;
}

};

spin.add=function(obj){
if($.isArray(obj)){
for(var i=0;i<obj.length;i++){
spin.add(obj[i]);
}
}else{
var step=obj.step==undefined?1:obj.step;
var max=obj.max==undefined?999999:obj.max;
var min=obj.min==undefined?-999999:obj.min;
var $ipt=typeof(obj.input)=='string'?$('#'+obj.input):$(obj.input);
if(obj.readonly)$ipt.attr("readonly","readonly"); 

$ipt.wrap('<table border="0" cellpadding="0" cellspacing="0" class="spin"><tr><td></td><td>'+

'<button onMouseDown="spin.plus(this,'+max+','+step+')" onMouseUp="spin.stop()" onMouseOut="spin.stop()" onClick="return false" class="spinPlus"></button>'+

'<button onMouseDown="spin.minus(this,'+min+','+step+')" onMouseUp="spin.stop()" onMouseOut="spin.stop()" onClick="return false" class="spinMinus"></button>'+

'</td></tr></table>');

 }

};

</script>

<input type="text" id="spinIpt" value="0" size="5"/>

<script type="text/javascript">
$(spin.add([{input:'spinIpt',min:0,max:50,step:5,readonly:1}]));
</script>

</html>

收藏 推荐 打印 | 录入:木鸟 | 阅读:
相关新闻      
本文评论   查看全部评论 (1)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 1 楼
* 匿名 发表于 2016/12/11 22:05:31
www.iwms.net/n2290c17.aspx
热门评论
* 匿名 发表于 2016/12/11 22:05:31
www.iwms.net/n2290c17.aspx