JS數量輸入控制元件

龍恩0707發表於2014-01-09

   很早看到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程式碼:

.data-amount-wrap{position:relative;height:28px;display:block}
    .data-amount-input{
        color: #666;
        font-size: 12px;
        margin:0;
        padding:3px 2px 0 3px;
        height:26px;
        border:1px solid;
        border-color:#848484 #E0E0E0 #E0E0E0 #848484;
        width:60px;
        line-height:26px;
        margin-left:16px;
    }
    .data-amount-increase,.data-amount-decrease{
        position: absolute;
        /*width:16px;height: 14px;*/cursor: pointer;
        width:0;height:0;overflow:hidden;
        border-style:solid;
    }
    .data-amount-increase{left:85px;top:1px;border-width: 14px 0 14px 14px;border-color:transparent  transparent  transparent green;}
    .data-amount-decrease{left:0;top:1px;border-width: 14px 14px 14px 0;border-color:transparent red transparent  transparent ;}
    button{margin:15px 0 0;}
View Code

JS程式碼如下:

/**
 * 數量輸入控制元件
 */

 function Amount(options) {
    
    this.config = {
        container : '',      // 必須,控制元件插入的容器 預設為空
        val       : 1,       // 初始值 預設為1
        step      : 1,       // 一次改變的變化值 預設為1
        minVal    : 0,       // 限下值 預設為0
        maxVal    : 100,     // 限上值 預設為100
        elCls     : 'data',  // 自定義的字首的類名 預設為data
        prevFunc  : null,    // 點選上一頁回撥函式
        nextFunc  : null     // 點選下一頁回撥函式
    };

    this.cache = {
        decimalLen : 1  // 預設為1
    };

    this.init(options);
 }
 
 Amount.prototype = {
    
    constructor: Amount,

    init:function(options){
        
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;
        
        // 先判斷傳進來的容器型別
        self._type();
        
        // 渲染HTML程式碼
        self._renderHTML();
        
        // 點選事件
        self._bindEnv();
    },
    /*
     * 判斷傳進來的容器引數型別
     */
    _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;
        }
    },
    /*
     * 渲染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);
    },
    /*
     * 點選事件
     */
    _bindEnv: function() {
        var self = this,
            _config = self.config,
            _cache = self.cache;

        // 點選事件 事件代理
        $(_config.container).unbind('click');
        $(_config.container).bind('click',function(e){
            var target = e.target;
            if($(target).hasClass(_config.elCls+"-amount-increase")) {
                // 執行increase method
                self.increase();

            }else if($(target).hasClass(_config.elCls+"-amount-decrease")) {
                // 執行 decrease method
                self.decrease();
            }
        });
        
        // 鍵盤事件 鍵盤向上 鍵碼是38 向下是 40
        $('.' + _config.elCls+"-amount-input",_config.container).keyup(function(e){
            
            var keyCode = e.keyCode;
            if(keyCode == 40) {
                self.decrease();
            }else if(keyCode == 38) {
                self.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});
        }
            
    },
    /*
     * 減少方法 獲取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});
        }
    },
    /*
     * 可以供外部直接設定值
     * @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);
        }
    },
    /*
     * JS加法 解決精度問題
     * @method {_addFun private}
     * @param {arg1,arg2} int或者float,double
     */ 
    _addFun: function(arg1,arg2) {
         var firstArg,
             lastArg,
             differ,
             m;
        try{
            firstArg = arg1.toString().split('.')[1].length;
        }
        catch (e){
            firstArg = 0;
        }
        try{
            lastArg = arg2.toString().split('.')[1].length;
        }
        catch (e){
            lastArg = 0;
        }
        differ = Math.abs(firstArg - lastArg);
        m = Math.pow(10,Math.max(firstArg,lastArg));
        if(differ > 0) {
            var dm = Math.pow(10,differ);
            if(firstArg > lastArg) {
                arg1 = Number(arg1.toString().replace(".", ""));
                arg2 = Number(arg2.toString().replace(".", "")) * dm;

            }else {
                arg1 = Number(arg1.toString().replace(".", "")) * dm;
                arg2 = Number(arg2.toString().replace(".", ""));
            }
        }else {
            arg1 = Number(arg1.toString().replace(".", ""));
            arg2 = Number(arg2.toString().replace(".", ""));
        }
        return (arg1 + arg2) / m;
    },
    /*
     * JS減法 解決精度問題
     * @method {_subtraction private}
     * @param {arg1,arg2} int或者float,double
     */
    _subtraction: function(arg1,arg2) {
        var firstArg,
         lastArg,
         differ,
         m;
         try{
            firstArg = arg1.toString().split('.')[1].length;
         }catch (e){
            firstArg = 0;
         }

         try{
            lastArg = arg2.toString().split('.')[1].length;
         }
         catch (e){
            lastArg = 0;
         }
         differ = Math.pow(10, Math.max(firstArg, lastArg));
         m = (firstArg > lastArg) ? firstArg : lastArg;
         return ((arg1 * differ - arg2 * differ) / differ).toFixed(m);
    }
 };
View Code

初始化程式碼如下:

 // 初始化
     $(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下載

相關文章