print this page


bagaimana cara menampilkan format angka dengan menggunakan jQuery. Masalah kali ini adalah bagaimana cara menampilkan format angka yang mudah di baca oleh user seperti ini :
3.000.000,00
Ini akan mudah dilakukan jika menggunakan fungsi yang ada di PHP yaitu :
number_format
 
Tapi, client menginginkan angka yang tampil dengan format tersebut saat user mengetikan angka ke dalam text field yang ada di halaman web. Berarti mau tidak mau saya harus menggunakan client side programming untuk melakukan hal ini, dan cara paling mudah adalah dengan menggunakan javascript. Mungkin jika anda berpikir membuat sendiri seluruh syntax untuk melakukan ini pasti akan memakan waktu lama, karena itu untuk mempersingkat waktu saya menggunakan salah satu plugin berbasis jQuery untuk melakukan hal ini. Plugin ini bernama jQuery Price Format Plugin jQuery Price Format yang dibuat oleh cudocos, saat saya mempraktekan hal ini saya menggunakan v1.3 yang dapat dilihat di halaman plugin tersebut.
Untuk memulai menggunakan plugin ini, pertama – tama include file jQuery dan plugin ini di header halaman web :


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.price_format.1.3.js" type="text/javascript"></script>
 
Lalu buatlah input text field di halaman web anda seperti ini :

<input id="price" name="MyPrice" type="text" />
 
Buat script seperti ini di header halaman web atau di footer :

<script type="text/javascript"> 
$('#price').priceFormat({ prefix: 'Rp. ', 
centsSeparator: ',', thousandsSeparator: '.', centsLimit: 2 }); </script>
Pada saat anda mengetik kedalam text field tersebut maka format yang muncul adalah seperti ini : “Rp. 2.323.232,33″.

Penjelasan untuk optionnya adalah sebagai berikut :
  • prefix : adalah text ataupun simbol yang ingin ditampilkan di awal text (contohnya simbol mata uang).
  • centsSeparator : adalah karakter pemisah untuk sen atau koma.
  • thousandsSeparator : adalah karakter pemisah untuk ribuan.
  • centsLimit : adalah jumlah batas angka di belakang koma.

0 komentar:

Posting Komentar

Copyright © 2012 imagination of the mind / Designer by : M.A.T.A XP