File: documentation/pages/formatting.php

Recommend this page to a friend!
  Classes of ikhsan   jQuery Calx   documentation/pages/formatting.php   Download  
File: documentation/pages/formatting.php
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: jQuery Calx
Calculate form input values based on formulas
Author: By
Last change: Update of documentation/pages/formatting.php
Date: 2 years ago
Size: 7,672 bytes
 

Contents

Class file image Download
<!-- Formatting --> <a name="format"></a><br><br> <div class="row page-header" style="margin-top:0"> <div class="col-md-12"> <h3> Formatting </h3> </div> </div> <div class="row"> <div class="col-md-12"> <p> jQuery Calx depends on <code>numeral.js</code> for output formatting. In jQuery Calx version 1.x , numeral is integrated into the core, but no longer integrated in jQuery Calx 2.x and listed as dependency, you need to load it before loading jQuery Calx if you need the formatting feature. </p> <pre> &lt;script src="js/numeral.min.js"&gt;&lt/script&gt; &lt;script src="jquery-1.9.1.min.js"&gt;&lt/script&gt; &lt;script src="jquery-calx-2.0.0.min.js"&gt;&lt/script&gt; </pre><br> <h4>Setting up locale</h4> <p> In jQuery Calx 1.x, locale settings are defined inside the jQuery Calx configuration, since jQuery Calx 2 no longer integrated with numeral.js, local settings are defined in numeral config </p> <pre> // load a language numeral.language('fr', { delimiters: { thousands: ' ', decimal: ',' }, abbreviations: { thousand: 'k', million: 'm', billion: 'b', trillion: 't' }, ordinal : function (number) { return number === 1 ? 'er' : 'ème'; }, currency: { symbol: '€' } }); // switch between languages numeral.language('fr'); </pre><br> <h4> Formatting Value </h4> <p> Cell value formatting is defined in the <code>data-format</code> attribute using pre-defined rule, below is example of how to format the cell value and list of available formatting rules. </p> <pre> &lt;input data-cell="A1" data-format="$ 0,0[.]00" /&gt;</pre> <div class="row"> <div class="col-md-6"> <h4>Numbers</h4> <table id="format-numbers" class="table striped bordered"> <thead> <tr> <th>Number</th> <th>Format</th> <th>String</th> </tr> </thead> <tbody><tr><td>10000</td><td>'0,0.0000'</td><td>10,000.0000</td></tr><tr><td>10000.23</td><td>'0,0'</td><td>10,000</td></tr><tr><td>10000.23</td><td>'+0,0'</td><td>+10,000</td></tr><tr><td>-10000</td><td>'0,0.0'</td><td>-10,000.0</td></tr><tr><td>10000.1234</td><td>'0.000'</td><td>10000.123</td></tr><tr><td>10000.1234</td><td>'0[.]00000'</td><td>10000.12340</td></tr><tr><td>-10000</td><td>'(0,0.0000)'</td><td>(10,000.0000)</td></tr><tr><td>-0.23</td><td>'.00'</td><td>-.23</td></tr><tr><td>-0.23</td><td>'(.00)'</td><td>(.23)</td></tr><tr><td>0.23</td><td>'0.00000'</td><td>0.23000</td></tr><tr><td>0.23</td><td>'0.0[0000]'</td><td>0.23</td></tr><tr><td>1230974</td><td>'0.0a'</td><td>1.2m</td></tr><tr><td>1460</td><td>'0 a'</td><td>1 k</td></tr><tr><td>-104000</td><td>'0a'</td><td>-104k</td></tr><tr><td>1</td><td>'0o'</td><td>1st</td></tr><tr><td>52</td><td>'0o'</td><td>52nd</td></tr><tr><td>23</td><td>'0o'</td><td>23rd</td></tr><tr><td>100</td><td>'0o'</td><td>100th</td></tr></tbody> </table> <h4>Percentages</h4> <table id="format-percentage" class="table striped bordered"> <thead> <tr> <th>Number</th> <th>Format</th> <th>String</th> </tr> </thead> <tbody><tr><td>1</td><td>'0%'</td><td>100%</td></tr><tr><td>0.974878234</td><td>'0.000%'</td><td>97.488%</td></tr><tr><td>-0.43</td><td>'0 %'</td><td>-43 %</td></tr><tr><td>0.43</td><td>'(0.000 %)'</td><td>43.000 %</td></tr></tbody> </table> </div> <div class="col-md-6"> <h4>Currency</h4> <table id="format-currency" class="table striped bordered"> <thead> <tr> <th>Number</th> <th>Format</th> <th>String</th> </tr> </thead> <tbody><tr><td>1000.234</td><td>'$0,0.00'</td><td>$1,000.23</td></tr><tr><td>1000.2</td><td>'0,0[.]00 $'</td><td>1,000.20 $</td></tr><tr><td>1001</td><td>'$ 0,0[.]00'</td><td>$ 1,001</td></tr><tr><td>-1000.234</td><td>'($0,0)'</td><td>($1,000)</td></tr><tr><td>-1000.234</td><td>'$0.00'</td><td>-$1000.23</td></tr><tr><td>1230974</td><td>'($ 0.00 a)'</td><td>$ 1.23 m</td></tr></tbody> </table> <h4>Bytes</h4> <table id="format-bytes" class="table striped bordered"> <thead> <tr> <th>Number</th> <th>Format</th> <th>String</th> </tr> </thead> <tbody><tr><td>100</td><td>'0b'</td><td>100B</td></tr><tr><td>2048</td><td>'0 b'</td><td>2 KB</td></tr><tr><td>7884486213</td><td>'0.0b'</td><td>7.3GB</td></tr><tr><td>3467479682787</td><td>'0.000 b'</td><td>3.154 TB</td></tr></tbody> </table> <h4>Time</h4> <table id="format-time" class="table striped bordered"> <thead> <tr> <th>Number</th> <th>Format</th> <th>String</th> </tr> </thead> <tbody><tr><td>25</td><td>'00:00:00'</td><td>0:00:25</td></tr><tr><td>238</td><td>'00:00:00'</td><td>0:03:58</td></tr><tr><td>63846</td><td>'00:00:00'</td><td>17:44:06</td></tr></tbody> </table> </div> </div> </div> </div>