`
hugang357
  • 浏览: 181586 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

数字微调输入框

    博客分类：
  • jsp
 
阅读更多

<script>

function createComboxImg(pid,clickHandler){
 if( document.all(pid).children(0) ){
  return;
 }
    var btn = document.createElement("BUTTON");
    btn.appendChild(document.createTextNode(6));
    btn.className = "combo-button";
 btn.onfocus = function () { this.blur(); };
 btn.onclick = clickHandler;
 document.all(pid).appendChild(btn);
 return btn;
}

function init(){
 var dateList = new Array("cutOffDate","sailingDate");
 for(var i=0;i<dateList.length;i++) {
  createComboxImg(dateList[i]+"Div",new Function("getCalendar(\""+dateList[i]+"\")"));
 }
 createNumberClicker("num","up","down");
}

function getCalendar(textId){
 var obj = document.all(textId);
 popUpCalendar(obj, obj, "yyyy-mm-dd");
}

function popUpCalendar(a,b,c){
 alert("Here to pop up the calendar.");
}

function createNumberClicker(source,uper,downer){
 var text = document.all(source);
    var btnUp = document.createElement("BUTTON");
    btnUp.appendChild(document.createTextNode(5));
    btnUp.className = "combo-button-up";
 btnUp.onfocus = function(){ this.blur(); };
 btnUp.onclick = function(){ if(text.value)text.value++;};
 document.all(uper).appendChild(btnUp);
    var btnDown = document.createElement("BUTTON");
    btnDown.appendChild(document.createTextNode(6));
    btnDown.className = "combo-button-down";
 btnDown.onfocus = function(){ this.blur(); };
 btnDown.onclick = function(){ if(text.value)text.value--;};
 document.all(downer).appendChild(btnDown);
}

</script>
<style>
.combo-button {
 cursor:   pointer; 
 height:   22px;
 border:   1px solid #A5ACB2;
 border-left-width: 0px;
 padding:  0;
 background:  buttonface;
 width:   14px;
 vertical-align: baseline;
 font-size:  8pt;
 font-family: Webdings, Marlett;
}
.combo-button-up {
 cursor:   pointer; 
 height:   11px;
 border:   1px solid #A5ACB2;
 border-left-width: 0px;
 padding:  0;
 background:  buttonface;
 width:   14px;
 vertical-align: baseline;
 font-size:  5pt;
 font-family: Webdings, Marlett;
}
.combo-button-down {
 cursor:   pointer; 
 height:   11px;
 border:   1px solid #A5ACB2;
 border-left-width: 0px;
 border-top-width: 0px;
 padding:  0;
 background:  buttonface;
 width:   14px;
 vertical-align: baseline;
 font-size:  5pt;
 font-family: Webdings, Marlett;
}
.combo-text {
 height:   22px;
 border:   1px solid #A5ACB2;
 
}
</style>
<body onload="init();">
<div><input name="cutOffDate" id="cutOffDate" style="width:76px " class="combo-text"><span id="cutOffDateDiv" style="width:14px "></span></div>
<div><input name="sailingDate" id="sailingDate" style="width:76px " class="combo-text"><span id="sailingDateDiv" style="width:14px "></span></div>

<div><table border="0" cellpadding="0" cellspacing="0" ><tr><td><input name="num" id="num" style="width:76px " class="combo-text" value="10"></td><td><table border="0" cellpadding="0" cellspacing="0"><tr><td><span id="up" style="width:14px" valign="top"></span></td></tr><tr><td><span id="down" style="width:14px"></span></td></tr></table></td></tr></table></div>

</body>

分享到：
| struts2.1.8 + spring2.5.6 + hibernate3.3 ...
评论
2 楼 hugang357 2012-06-19  
hslh22 写道
不错的资源，可以使用，只是没有最大最小值的限制，需要自己去加逻辑进去了，
谢了

谢谢您的建议，欢迎交流。
1 楼 hslh22 2012-06-01  
不错的资源，可以使用，只是没有最大最小值的限制，需要自己去加逻辑进去了，
谢了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    经纬度输入控件

    秒字段均可通过微调按钮或者键盘的上下 键进行数字的增减，你可以通过左右键进 行度、分、秒输入域的切换。该控件可以 设置度的输入范围，默认的度范围是0~89 。 The latitude and longitude input control to ...

    javafx2 : 支持使用微调(spinner)控制的数字的文本框(NemberTextField)

    NULL 博文链接：https://c-zhiwu.iteye.com/blog/1407930

    vue实现一个6个输入框的验证码输入组件功能的实例代码

    5，光标选中一个数字，滚轮可以微调数字大小，限制0-9 6，123|456 自动覆盖光标后输入的字符，此时光标在3后，继续输入111，会得到123111，而不用手动删除456 7，封装成vue单文件组件，方便任意调用。 模板代码 ...

    经纬度输入控件V1.1

    纬度中的度、分、秒字段均通过数字键盘直接输入数值，也可通过微调按钮或者键盘的上 下键进行数字的增减，你可以通过左右键进行度、分、秒输入域的切换。该控件可以设置 度的输入范围，默认的度范围是0~89。该1.1...

    名片在线设计制作软件.exe

    序号微调器可向前或向后查询。 3、多种查询功能按钮可以查询： A、直接输入成语词目查询。 B、检索码查询：按拼音字母的首字母查询，如“一帆风顺”的检索码为：“yffs”。 C、灯谜谜面反查成语：如按灯谜谜面...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.6 Ext.form.field.Number数字输入框 4.1.7 Ext.form.field.Checkbox复选框和Ext.form.field.Radio单选框 4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 4.1.9 Ext.form.field.Trigger触发字段 4.1.10 ...

    Excel VBA实用技巧大全 附书源码

    04019通过输入框（InputBox）引用所选择的单元格 04020引用活动单元格 04021引用已选定的单元格 04022引用已使用的单元格区域 04023引用被空白行和列包围的单元格区域 04024利用Offset属性动态引用某个单元格 04025...

    vc++ 应用源码包_1

    独立打包，保证可解压，内含大量源码，网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标...VC然输入框出现气球提示 调用系统自带...

    vc++ 应用源码包_2

    独立打包，保证可解压，内含大量源码，网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、...VC然输入框出现气球提示 调用系统...

    vc++ 应用源码包_6

    一个简单的数字时钟程序，其中的date类派生于MFC CStatic 基类。 CIVStringSet_Demo.zip CIVStringSet_Source.zip 基于MFC和STL平台的字符串类，可以实现在快速字符串搜索。 enum_display_modes_demo.zip enum_...

    vc++ 应用源码包_5

    一个简单的数字时钟程序，其中的date类派生于MFC CStatic 基类。 CIVStringSet_Demo.zip CIVStringSet_Source.zip 基于MFC和STL平台的字符串类，可以实现在快速字符串搜索。 enum_display_modes_demo.zip enum_...

    vc++ 应用源码包_3

    独立打包，保证可解压，内含大量源码，网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、...VC然输入框...

    vc++ 开发实例源码包

    自绘CStatic实现数字效果。 DirectShow开发指南pdf附属代码 如题。 DirectShow开发指南源码 如题。 directUI_D DirectUI界面库 DOM应用---遍历网页中的元素 如题。 dshowplayer 媒体播放器的实现，实现了VMR7、...

    多媒体教室

    学生可以在输入框中输入文字来同教师进行交流，输入文字后敲回车键即可。也可以通过下拉框选择系统提供的默认文字，并敲回车键。  3.5 自动接收 正常条件下，学生机软件只要运行，就会自动登录系统，同时自动检测...

Magicbox
Global site tag (gtag.js) - Google Analytics