<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>
分享到：
谢谢您的建议，欢迎交流。
相关推荐
"数字微调input兼容IE6"这个主题涉及到的是如何在古老的Internet Explorer 6（简称IE6）浏览器上实现一个数字输入框（通常称为spinner或numeric stepper）的功能。数字微调input允许用户通过加减按钮或键盘上下箭头...
`Spinner`控件允许用户通过点击向上或向下的箭头来增加或减少数值，而`NumberTextField`则提供了输入框，用户可以直接输入数字。这两个组件可以单独使用，但结合在一起，它们能为用户提供一个完整的数值输入解决方案...
NumberSpinner组件基于Numberbox和Spinner组件，提供了更加方便的数值输入和微调功能。以下是关于NumberSpinner组件的详细说明： 一、加载方式 NumberSpinner组件可以通过两种方式进行加载：CSS类加载和JavaScript...
### 微调数字知识点解析 #### 一、概念理解 **微调数字**通常指的是在软件开发或用户界面设计中，允许用户对数值进行精细调整的功能。这种功能常见于各种编辑器、设置面板或者需要精确数值输入的应用场景中。通过...
`mousewheel` 事件处理光标后面的数字微调，当滚轮滚动时，数字会相应地增加或减少。 总的来说，这个 Vue 验证码输入组件实例通过结合 Vue 的响应式系统、指令绑定以及事件监听，提供了一个用户友好的验证码输入...
秒字段均可通过微调按钮或者键盘的上下 键进行数字的增减，你可以通过左右键进 行度、分、秒输入域的切换。该控件可以 设置度的输入范围，默认的度范围是0~89 。 The latitude and longitude input control to ...
其中，Spinner是jQuery UI中的一个功能组件，用于创建数字输入框，允许用户通过点击上下箭头进行数值的增减，非常适合用于表单中的数量输入或者权重调整等场景。 标题"jquery ui spinner微调 粗细"指的是在使用...
微调控件NumericUpDown是Windows应用程序开发中常用的一种控件，主要功能是允许用户通过上下箭头按钮进行数值的增减，常用于输入整数或浮点数。在.NET框架，如WinForms或WPF中，NumericUpDown控件提供了便捷的方式来...
微调器UI通常包含两个部分：一个输入框用于显示数字，以及两个箭头按钮，一个用于增加数值，另一个用于减少数值。用户可以通过点击这些按钮来快速调整数值，而无需直接编辑文本。这种设计对移动设备特别友好，因为...
这些方法涉及到了使用spinner数字微调器，基于Bootstrap风格的数字加减插件，以及jQuery UI提供的数字加减组件。 知识点一：jQuery Spinner数字微调器的实现方法 在实现数字加减的效果时，一个常用的工具是jQuery ...
Spinner微调器是jQuery EasyUI框架提供的一种用于输入或调整数字值的界面控件。它通常由一系列按钮组成，这些按钮允许用户快速增加或减少一个值。例如，在网页中设置日期、选择数量、设定价格等场景，可以使用...
jQuery EasyUI中的组件之一是NumberSpinner数值微调器，它用于在网页中创建允许用户通过点击按钮以固定步长增减数值的输入框。 NumberSpinner数值微调器扩展自spinner和numberbox，继承了它们的相关特性，并添加了...
在网页表单设计中，这样的功能可以提升用户体验，特别是当涉及到需要微调数值的场景时，比如设置百分比、尺寸或时间间隔等。 首先，Numscrubber.js 的核心功能在于它的事件监听和处理机制。库内部会监听鼠标的拖动...
- 创建一个只能输入数字的输入框。 - **特性** - 定义数字框的最小值、最大值等属性。 - **方法** - 用于控制数字框的方法，如设置值、获取当前值等。 **4.8 DateBox日期框** - **依赖** - 依赖于其他 EasyUI ...
纬度中的度、分、秒字段均通过数字键盘直接输入数值，也可通过微调按钮或者键盘的上 下键进行数字的增减，你可以通过左右键进行度、分、秒输入域的切换。该控件可以设置 度的输入范围，默认的度范围是0~89。该1.1...
- `clear`: 无参数，清除组件的值，将输入框内容清空。 在实际应用中，可以通过jQuery选择器和EasyUI提供的API来创建和控制Spinner组件。例如，通过`$(‘#ss’).spinner({...})`创建一个Spinner，然后可以使用`....
14. **1.7.14 numberspinner（数字微调）**：数字微调组件。 15. **1.7.15 timespinner（时间微调）**：用于时间微调的组件。 16. **1.7.16 slider（滑动条）**：滑动条组件，可以用于数值选择。 17. **1.7.17 ...