[js開源組件開發]數字或金額千分位格式化組件

數字或金額千分位格式化組件

這次距離上一個組件《[js開源組件開發]table表格組件》時隔了一個月，由於最近的項目比較坑，剛挖完坑，所以來總結性提出來幾個組件彌補這次的空缺，首先是金額和數字的千分位和小數點控制的組件，它的作用主要是在輸入框時限制輸入的內容為數字。也可以用於普通標簽的數字格式化，效果如下圖：

 

demo演示地址請點擊 http://www.lovewebgames.com/jsmodule/format-number.html

源碼github托管地址請點擊https://github.com/tianxiangbing/format-number

演示代碼

<script src="../src/jquery-1.11.2.js"></script>
    <script src="../src/format-number.js"></script>
    <div>整數：<input type="text" data-type="int" data-name="int"/></div>
    <script>
        var n1 = new FormatNumber();
        n1.init({trigger:$('[data-type="int"]'),decimal:0});
    </script>
    <div>整數可為負：<input type="text" data-type="int2" data-name="int"/></div>
    <script>
        var n2 = new FormatNumber();
        n2.init({trigger:$('[data-type="int2"]'),decimal:0,minus:true});
    </script>
    <div>兩位小數(默認)：<input type="text" class="has-minus" value="1112212.221" data-type="number" data-name="as"/></div>
    <script>
        var n3 = new FormatNumber();
        n3.init({trigger:$('[data-type="number"]')});
    </script>
    <div>3位小數並且可為負數：<input type="text" data-name="pc" data-type="pecent"/></div>
    <script>
        var n4 = new FormatNumber();
        n4.init({trigger:$('[data-type="pecent"]'),decimal:3,minus:true});
    </script>
    <div>4位小數並且不可為負數：<input type="text" data-name="pc" data-type="pecent2"/></div>
    <script>
        var n5 = new FormatNumber();
        n5.init({trigger:$('[data-type="pecent2"]'),decimal:4});
    </script>
    <div>標簽：123123123.13211=<span id="sp_number">123123123.13211</span></div>
    <script>
    $('#sp_number').FormatNumber({decimal:4})
    </script>

 

API

屬性

trigger:dom|string

觸發器元素，可為input或標簽元素(span/div)

 

parent :dom|string

委托對象，由於本插件對事件的綁定都以委托為主，如不傳，默認代理到body上

 

decimal: int

小數位數，默認2位

　　

minus: bool

是否支持負數，默認為false不支持