首页 > 网站 > WEB开发 > 正文

[js开源组件开发]数字或金额千分位格式化组件

2024-04-27 15:00:23
字体:
来源:转载
供稿:网友

数字或金额千分位格式化组件

这次距离上一个组件《[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不支持

 


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表