JS数量输入控件

很早看到kissy首页 有数量输入控件,就随便看了下功能 感觉也不怎么难 所以也就试着自己也做了一个, 当然基本的功能和他们的一样,只是用了自己的编码思想来解决这么一个问题。特此给大家分享下!kissy demo链接

个人编写的 demo链接

下面来一步步分析下我当初写代码的思路:

1. 首先是HTMl代码如下:

<h3>demo1:步长为0.8,下限为0, 默认是1</h3>
<div id="demo1"></div>
<button id="s40">设为40</button>
<button id="increase">加一步</button>
<button id="decrease">减一步</button>

而我打开控件demo页面时候 在火狐游览器firebug看到如下代码:

也就是说 <div id="demo1"></div> 里面的span input代码是JS自动生成的。

2. 我JS代码做了如下事情:

1.  先判断传进来的容器类型判断. 支持 demo1,#demo1,.demo1,$('#demo1') 这几种容器类型的传参数。如下代码判断:

/*
* 判断传进来的容器参数类型
*/
_type: function(){
var self = this,
_config = self.config,
_cache = self.cache;
if(_config.container != '') { if($.isPlainObject(_config.container)) {
_config.container = _config.container; }else if(/^\./.test(_config.container)){
_config.container = $(_config.container); }else if(/^#/.test(_config.container)) {
_config.container = $(_config.container); }else if($('#' + _config.container)) {
_config.container = $('#' + _config.container); }else {
alert('传参的类型有误!请重新传参!');
} }else {
return;
}
},

2. 渲染相对应容器里面的代码,也就是span input标签那些HTML代码。如下:

/*
* 渲染html
*/
_renderHTML: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var html = '';
html += '<span class="'+_config.elCls+'-amount-wrap">' +
'<input type="text" title="请输入数字" value="'+_config.val+'" class="'+_config.elCls+'-amount-input"/>' +
'<span class="'+_config.elCls+'-amount-increase"></span>' +
'<span class="'+_config.elCls+'-amount-decrease"></span>' +
'</span>';
$(_config.container).append(html);
},

3. 绑定事件(包括点击,↑↓键操作等)。

1. 点击下一页按钮 或者↑ 操作时候 调用 增加方法:increase 代码如下:

/*
* 增加方法 获取input值 然后加个步长 (每次点击时候 判断此值是否大于maxVal)
* @method {increase public}
*/
increase: function() {
var self = this,
_config = self.config,
_cache = self.cache; var inputVal = $.trim($('.' + _config.elCls + "-amount-input",_config.container).attr('value'));
if(inputVal * 1 < _config.maxVal * 1) { var curVal = self._addFun(inputVal * 1,_config.step * 1);
if(curVal >= _config.maxVal * 1) {
curVal = _config.maxVal * 1;
}
$('.' + _config.elCls + "-amount-input",_config.container).val(curVal);
$('.' + _config.elCls + "-amount-input",_config.container).attr('value',curVal); // 回调
_config.nextFunc && $.isFunction(_config.nextFunc) && _config.nextFunc({value:curVal});
} },

2. 点击上一页按钮时候 或者 ↓键操作 时候 调用 decrease(减少方法)。如下代码:

/*
* 减少方法 获取input值 然后减去步长 (每次点击时候 判断此值是否大于minVal)
* @method {decrease public}
*/
decrease: function() {
var self = this,
_config = self.config;
var inputVal = $.trim($('.' + _config.elCls + "-amount-input",_config.container).attr('value'));
if(inputVal * 1 > _config.minVal * 1) {
var curVal = self._subtraction(inputVal * 1, _config.step * 1);
if(curVal <= _config.minVal * 1) {
curVal = _config.minVal * 1;
}
$('.' + _config.elCls + "-amount-input",_config.container).val(curVal);
$('.' + _config.elCls + "-amount-input",_config.container).attr('value',curVal); // 回调
_config.prevFunc && $.isFunction(_config.prevFunc) && _config.prevFunc({value:curVal});
}
},

3. 同样支持在外部设置值 比如 我new一个实例后 我想点击一个按钮后 直接让此到某个值上 可以直接用new出来的实例调用setVal 方法。代码如下:

/*
* 可以供外部直接设置值
* @method {setVal public}
*/
setVal: function(val) {
var self = this,
_config = self.config; // 简单的判断下 此值是否是数字型的
if(/\d/.test(val)) {
$('.' + _config.elCls + "-amount-input",_config.container).val(val);
$('.' + _config.elCls + "-amount-input",_config.container).attr('value',val);
}
},

4. 由于需求不断的变增 所以配置项时候 步长有可能是小数 比如 点击一下 增加0.5步长 那么在计算的时候 会有误差(因为计算机存储的是以2进制存储的),那么处理这样的方法用到了 上一篇文章  关于javascript中对浮点加,减,乘,除的精度分析 .

可配置的参数如下

container  必须,控件插入的容器 默认为空
 val  1          // input初始值 默认为1 可以根据自己配置
 step  1,        // 步长 一次改变的变化值 默认为 1
 minVal  0,       // 限下值 默认为0
 maxVal  100,   // 限上值 默认为100
 elCls  'data', // 自定义的前缀的类名 默认为data
 prevFunc   点击上一页按钮 的回调函数
 nextFunc   点击下一页按钮的 回调函数

下面贴下HTML代码如下:

<h3>demo1:步长为0.8,下限为0, 默认是1</h3>
<div id="demo1"></div>
<button id="s40">设为40</button>
<button id="increase">加一步</button>
<button id="decrease">减一步</button>

CSS代码:

 

JS代码如下:

 

初始化代码如下:

 // 初始化
$(function(){
var a = new Amount({
container : '#demo1',
step : '0.8',
maxVal : '100'
})
$('#s40').click(function(){
a.setVal(40);
});
$("#increase").click(function(){
a.increase();
}); $("#decrease").click(function(){
a.decrease();
});
});

demo下载

 
 
分类: javascript

JS数量输入控件的更多相关文章

  1. Android 高仿微信支付密码输入控件

    像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思 ...

  2. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  3. 2.23 js处理日历控件(修改readonly属性)

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  4. ADF控件ID变化引发JS无法定位控件的解决方法

    原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...

  5. 基于MFC的网页ActiveX控件开发全程实录2(js向ActiveX控件传递参数)

    原文转自 https://blog.csdn.net/qianbin3200896/article/details/81452822 1.ActiveX控件部分(JS到ActiveX控件)继续上一篇博 ...

  6. UI输入控件

    --UI输入控件 -- 输入控件 cc.uii.UIInput.new(table) --[[ 参数 table{ image 输入框图像,可以为图片名或者display.newScale9Sprit ...

  7. 深入浅出ExtJS 第四章 表单与输入控件

    4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

  8. 用js给html控件赋值

      用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...

  9. Kettle文本文件输出和输入控件使用中,换行符导致的问题处理

    1.如下图通过输入控件从数据库读取数据然后生成TXT文本文件,TXT文件生成原则是每一条数据生成一行数据,第二条数据换行保存 2.如下图所示,使用文本文件输入控件读入上图生成的文件,文件读入原则是按行 ...

随机推荐

  1. YUV422蓝色屏幕输出的调试援助

    YUV422蓝色屏幕输出的调试援助 YUV422有YUYV,YVYU,UYVY,VYUY四种,以下笔者就就以UYVY为例介绍一下数据构成.因为常常要跟视频输入打交道,所以YUV422这种常见的视频信号 ...

  2. C++ 之 exception

    本文讲关于C++的异常的全部东西: 绝对不让异常逃离析构函数 阻止exception逃离析构函数,主要是两个原因: 1 防止在异常处理过程中的栈展开行为时,将调用terminate函数.程序将会结束, ...

  3. Echarts Jqplot嵌extjs4 windows 装配方法

    js组件绘图终于是画在一个指定id的div或dom元素中. 在项目中有可能须要画在 Extjs容器中,研究了一下,能够通过下面的思路实现,方法跟大家共享下: 1.首先做一个容器,把此内容加入到wind ...

  4. Android - 警告:it is always overridden by the value specified in the Gradle build script

    警告:it is always overridden by the value specified in the Gradle build script 本文地址: http://blog.csdn. ...

  5. mysql_navicat-permium 在Mac下破解方法

    首先下载符合当前系统支持的navicat-permium版本,我自己下载的是11.0.16 然后我们开始破解旅程,先要安装上navicat-permium,记住千万不要打开(如果你打开了不好意思,卸了 ...

  6. Android &quot;QR二维码扫描&quot;

    支持灯 扫描结果 支持 抄.分享.浏览打开(超链接) 自己主动保存扫描记录 划删除 和源代码 git: http://git.oschina.net/892642257/QRCode csdn(0分) ...

  7. webkit 子资源加载过程

    从主控文档和子资源表单的页面.描述框架记叙文页主文档,布局.子元素.包含图片.CSS.JS等.为了显示网页,先要把资源载入到内存. 载入就是指把须要的资源载入到内存这一过程. Webkit用到非常多缓 ...

  8. Redis源代码分析(二十七)--- rio制I/O包裹

    I/O每个操作系统,它的一个组成部分.和I/O业务质量,在一定程度上也影响了系统的效率. 今天,我在了解了Redis中间I/O的,相同的,Redis在他自己的系统中.也封装了一个I/O层.简称RIO. ...

  9. my97 日期控件

    官网:http://www.my97.net/   好多广告啊! 文档地址: http://www.mysuc.com/test/My97DatePicker/

  10. Redis 优化查询性能

    一次使用 Redis 优化查询性能的实践   应用背景 有一个应用需要上传一组ID到服务器来查询这些ID所对应的数据,数据库中存储的数据量是7千万,每次上传的ID数量一般都是几百至上千数量级别. 以前 ...