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

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

这次距离上一个组件《[js开源组件开发]table表格组件》时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和数字的千分位和小数点控制的组件,它的作用主要是在输入框时限制输入的内容为数字。也可以用于普通标签的数字格式化,效果如下图:

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

 

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="2212.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:domstring

触发器元素,可为input或标签元素(span/div)

 

parent :domstring

委托对象,由于本插件对事件的绑定都以委托为主,如不传,默认代理到body上

 

decimal: int

小数位数,默认2位

  

minus: bool

是否支持负数,默认为false不支持

 

更多相关文章
  • 在现阶段饮食类的APP发展的非常迅猛,尤其在校园中,学生只需要凭借一个手机就能买到自己想要的食物,真正做到了足不出户.可是如果我们想独立完成一个app就需要有相应的数据支持,这里给大家介绍一个国外的开发API, FatSecret Platform API,这里面包含了许多的食物信息.我们根据这些信 ...
  • 戴尔公司的研究人员在Black Hat上披露,一个名为“熊猫使者”的黑客小组仅用六个小时完成入侵. 这个团队的代号为TG-3390,主要攻击国防和航天项目.他们技术高超,能够在六个小时内入侵多层系统,获取域名凭据和访问环境的权限.这个小组的攻击手段中包括水坑攻击,它经常入侵那些目标公司员工会访问的网 ...
  • 年11月代号为"Normandy"的诺基亚Android手机初次曝光后引发了众多诺基亚粉丝的猜想,而近期不断有该机的谍照曝光,那么是否真的有这款设备哪?就在7个小时前爆料大[email protected],这款设备将于2014年正式登场,在微博中公布了该机的宣传照并是使用了 ...
  • 正常情况下,在AppDelegate中实现下面两个方法,能够监听从后台恢复到前台 [cpp]  - (void)applicationDidEnterBackground:(UIApplication *)application  {      log4info(@"application ...
  • 摘要 : 最近在博客园里面看到有人在讨论 C# String的一些特性. 大部分情况下是从CODING的角度来讨论String. 本人觉得非常好奇, 在运行时态, String是如何与这些特性联系上的. 本文将侧重在通过WinDBG来观察String在进程内的布局, 以此来解释C# String的一 ...
  • 程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片.从性能优化的角度看,图片也绝对 ...
一周排行
  • 易网科技讯 3月22日,2015中国(深圳)IT领袖峰会第二场高端对话中,香港交易及结算所集团行政总裁李小加认为"一带一路"的互联互通当中,最基本的是互联互通,就是把需要钱的人和有钱的人连在一起. ...
  • 了解了Java 8中所有包的作用,对Java 8有了一个整体的了解,另外也是提高了自身的阅读能力.本文列出了Java 8中所有的包,并且对每一个包的功能做了简要的说明,希望对你有所帮助. —————————————— ...
  • 11.硬中断服务程序结束返回断点时,程序末尾要安排一条指令IRET,它的作用是( ) A.构成中断结束命令 B.恢复断点信息并返回 C.转移到IRET的下一条指令 D.返回到断点处 参考答案:B 分析:IRET指令的 ...
  • 歌德巴赫猜想: 任一大于2的偶数,都可表示成两个素数之和. 任一大于5的整数都可写成三个质数之和. 贪心取尽可能大的素数..... C. Prime Swaps time limit per test 2 secon ...
  •   Linux删除文件夹命令      linux删除目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm ...
  • 公司目前在ETL这个环节上基本处于手工开发的原始阶段,领导已经不满意了,估计以后会选择一种工具进行开发,所以先看一下ETL工具的选型.据说同业使用Datastage的比较多,不过看了这篇文章之后,我还是更加倾向于用E ...
  • "要是能让史玉柱指导一下企业营销就太难得了,他是真正的高手."一位投行人士在会场后排小声嘀咕.从他的角度望过去,一眼就可以看到一大群知名风投的身影.红杉资本中国基金创始合伙人沈南鹏可以算是中国投行 ...
  • 题目大意:给出n,k和m,用k个1~m的数组成n,问有几种组成方法.   解题思路:简单dp,cnt[i][j]表示用i个数组成j, cnt[i][j] = ∑(1 ≤ t  ≤min(k, j)) cnt[i - ...
  • [java] public static int getSDKVersionNumber() {            int sdkVersion;          try {              sdkV ...
  • 一.DataChoose 日期选择模块   /** * 日期的选择控件,可以作为普通的组件使用,在构造函数中,必须传入一个该组件的所有者对象. * 并且该对象只能是一个Frame对象或者一个JFrame对象. * 使 ...