22 ธันวาคม 2554

Jquery เพิ่ม คอมม่า (,) ให้กับเลข ตามหน่วยต่าง ๆ

 หลักจากได้เพิ่มบทความ  Javascript เพิ่ม คอมม่า (,) ให้กับเลข ตามหน่วยต่าง ๆ   ซึ่งเป็นฟังชั่นก์ ที่มีผู้รู้เขียนไว้เป็นตัวอย่างในเว็บ thaicreate.com ห้อง PHP

แต่บทความนี้จะเป็นการนำ Jquery มาใช้แทน ซึ่งมีรูปแบบในการใช้งาน ง่าย และสะดวก  โดยเข้าไปดาวน์โหลด สคริป จากเว็บ http://www.decorplanit.com/plugin/ และในเว็บเขาก็จะมีคำอธิบายเกี่ยวกับการนำไปใช้งาน ซึ่งผมพอเข้าใจเพื่อนำไปใช้งานคร่าว ๆ ดังนี้


$('selector').autoNumeric({options})  / สำหรับทำให้ textbox ที่เราต้องการให้เพิ่มคอมม่าให้อัตโนมัติตอนเราพิมพ์ลงไปเลย


$('selector').autoNumericGet() / สำหรับตัดตัว คอมม่า ออกจากค่าเพื่อนำไปทำการ บวก ลบ ได้ เช่นค่าที่ได้ เป็น 10,000.00 ก็จะตัดเป็น 10000.00


$('selector').autoNumericSet(value) / สำหรับทำให้ค่าที่ได้จาก ฐานข้อมูล หรือ ค่าที่เกิดขึ้นโดยที่เราไม่ได้กรอกผ่านทาง Textbox มีตัว คอมม่า โดยอัตโนมัติ



โค้ดตัวอย่างการใช้งาน

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.decorplanit.com/plugin/autoNumeric-1.7.4.js"></script>
<script type="text/javascript">
    $(function(){
        $('#text1').autoNumeric();
       
        $('#text1').blur(function(){
            $('#text2').val( $('#text1').autoNumericGet() );
        });
       
        $('#text3').autoNumericSet('1000');
    });
</script>
</head>

<body>
<input type="input" id="text1"> | <input type="input" id="text2"> | <input type="input" id="text3">
</body>
</html>
เขียนโดย ที่
ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)