做人要厚道,转载请注明
就是那种点上下箭头加减数字的东东 , 费话少说,上代码
//itsuki@20110405
function spinner( _target ){
var _this = this;
this.target = {};
this.spin = null;
this.step = 1;
this.bind = function(){
if (!this.target) return false;
this.spin = document.createElement( "label" );
this.spin.style.cssText = "display:inline-block;width:20px;height:24px;overflow:auto;overflow-y:scroll;vertical-align:middle;";
this.spin.innerHTML = "<br/><br/><br/><br/>";
this.spin.onmouseover = function(){
_this.spin.scrollTop = 1;
}
this.spin.onscroll = function(){
if ( _this.spin.scrollTop == _this.spin.getAttribute("orgscrolltop") ) return;
if (_this.spin.scrollTop!=1){
if (!_this.target.value || isNaN(_this.target.value)) _this.target.value=0;
if (_this.spin.scrollTop==0){
_this.target.value = parseFloat(_this.target.value,10)+_this.step;
}else{
_this.target.value = parseFloat(_this.target.value,10)-1;
if (parseFloat(_this.target.value,10)<0) _this.target.value=0;
}
}
_this.spin.setAttribute("orgscrolltop",_this.spin.scrollTop);
_this.spin.scrollTop = 1;
}
if (this.target.nextSibling){
this.target.parentNode.insertBefore( this.spin , this.target.nextSibling );
}else{
this.target.parentNode.appendChild( this.spin );
}
}
if (_target){
this.target = document.getElementById( _target );
this.bind();
}
}
HOW TO USE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<script type="text/javascript" src="/scripts/class.spinner.js"></script>
</head>
<body>
<div >
<input id="input1" />
<input id="input2" />
<script type="text/javascript">
new spinner("input1");
new spinner("input2");
</script>
</div>
</body>
</html>
兼容性:
测试了IE和chrome木有问题,FF下必须要设置高度为34以上才有滚动条,囧...反正FF恶心也不是一天两天了...
分享到:
相关推荐
用javascript实现的微调小程序 可在很多场合灵活使用
纯JS实现的网页取色器代码,或者叫拾色器,颜色选择器选色使用技巧:1.双击颜色 或 单击颜色,微调亮度,点确定2.色彩亮度微调:在右边竖立的颜色条中进行,下载本程序方法:在IE菜单中,点 文件 按钮,点保存即可。或...
这是一个纯Javascript和React-native Button组件,其中嵌入了一个Spinner。 在许多本机项目中,我们要求在应用程序点击该按钮时正在处理某项时禁用该按钮,并在其上或其旁边加载指示符,以便使用户知道应用程序正在...
现在。有许多开发人员已经在使用ASP.NET2.0的Web...a=s&r=WebUIValidation.js&t=631944362841472848″ type=”text/javascript”>[removed]目前我发现webResource.axd的参数跟现在版本有属不同。在早期文章介绍属性:
waitBtn - 带有微调器的按钮 生成分布执行: grunt
烦躁不安的人用Java语言制作的虚拟烦躁微调器。如何使用拖动鼠标使其旋转。 拖动速度越大,旋转器的旋转速度就越大。 演示: : 更新您可以看到坐立不安微调器的当前速度。... 添加了一个按钮,单击以旋转它。
单击该按钮时,它将启动该过程并显示一个微调框,直到达到诺言为止。此时,该按钮将显示瞬时成功状态,然后返回其初始就绪状态。 <PromiseButton xss=removed>Do Something</PromiseButton> 拒绝尚未得到处理,但是...
调整窗格 Tweakpane是一个紧凑的窗格库,受启发,用于微调参数和监视值更改。概念简洁的界面易于使用,行动支援特征编号(文字/滑块/列表) 字符串(文本/列表) 布尔值(复选框/列表) 选色器) Point2D(选择器)...
#Bootstrap 输入微调器 使用向上/向下按钮增强用于输入数值的文本输入 安装 HTML 头: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> [removed]...
如果我觉得react没有顺手的图片预览组件,就自己封装一个,放在项目文件里,自己本地导入使用,需要微调,自己也知道地方,也不用担心组件之间的高耦合度,自己也可以控制。 api全部在代码里,手动微调即可。 功能...
报告一个想法按钮 简单的加载微调器 主意 !!! []基于时间的过滤@Donovan 基于天的过滤@Donovan [/]添加联系人按钮 添加关于页面 改进的样式 单色瓷砖 单色图标 较大的图标 悬停时颜色变化 5个带有小图标的...
Javascript DOM项目来自文本区域的推文这是一个使用本地存储的小项目,其中: 用户可以在列表中创建/删除/查看其推文。 推文将存储在本地存储中。 用户可以添加无限数量的推文。 在加载页面时,必须从本地存储中加载...
2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / ...
-Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
-Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
该项目提供了一个简单的工具来预览和微调不同的Mac OS键重复设置。 关于该项目 这是一个用引导的项目。 入门 首先,运行开发服务器: npm run dev # or yarn dev 用浏览器打开以查看结果。 您可以通过修改pages/...
移动端微信UI界面ydui模板源码是一款按钮,对话框,订单,图标,网格,列表,标记,侧边导航栏,标签,进度条,键盘,滑块,微调,城市选择器等等。
使用了六个类五个模块类演示了atl的调用方法 class CDHtmlSinkHandler; // Events Sink Base class CDHtmlEventSink; // IHTMLDocument2 Events Sink // IDispatch class CDHtmlControlSink; // ActiveX Control ...
概述 表格管理内容作者在Umbraco后台维护大型结构良好的数据集... 将编辑器添加到文档类型后,管理员用户将在右上角看到一个蓝色的设置按钮。 设置按钮将打开设置对话框,其中包含三个选项卡: 添加新列 第一个选项卡允