jquery.numberpad plugin ที่จะสร้างขึ้นนี้ ใช้เพื่อสำหรับ
ในการกรอกข้อมูลที่เป็นตัวเลข ให้กับ textbox ที่เรากำหด โดยง่าย
แค่เพียงกดเลือกตัวเลขที่ต้องการ ด้วย mouse
เนื้อหานี้ ประยุกต์เพิ่มเติม จากบทความก่อนหน้า
สร้าง number pad แป้นตัวเลข ด้วย css อย่างง่าย
https://www.ninenik.com/content.php?arti_id=475 via @ninenik
การใช้งานไม่ยาก แค่เรียกใช้ไฟล์ plugin (คลิกขวา เลือก save ไฟล์ด้านล่างได้เลย)
การนำไปใช้
1 2 3 4 5 6 7 8 9 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.numpad.js"></script> <script type="text/javascript">$(function(){ // การใช้งาาน $("#data1,#data2,#data3").numpad(); });</script> |
ตัวอย่าง
โค้ดและคำอธิบาย plugin ไฟล์ jquery.numpad.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | // JavaScript Document(function($){ // setbackground คือชื่อของ plugin ที่เราต้องการ ในที่นี้ ใช้ว่า setbackground $.fn.numpad = function( options ) { // กำหนดให้ plugin ของเราสามารถ รับค่าเพิ่มเติมได้ มี options // ส่วนนี้ สำหรับกำหนดค่าเริ่มต้น var defaults={ obj_num_pad:"<ul class=i_num_pad><li>Clr</li><li>,</li><li>.</li><li>_</li><li>Del</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul>" // สร้าง object สำหรับเก็บค่า element ปุ่มกด }; // ส่วนสำหรับ เป็นต้วแปร รับค่า options หากมี หรือใช้ค่าเริ่มต้น ถ้ากำหนด var settings = $.extend( {}, defaults, options ); /// คืนค่ากลับ การทำงานของ plugin return this.each(function(j,k) { var str_text=$(this).val(); // กำหนดตัวแปร รับค่าข้อมูลเริ่มต้นของ textbox นั้นๆ var obj_input=$(this); // กำหนดตัวแปร รับค่า objext ของ textbox นั้น $(this).after(settings.obj_num_pad); // เมื่อเรียกใช้ plugin ให้เพิ่ม element ปุ่ม number pad ต่อจาก textbox นั้นๆ $(this).click(function(){ // เมื่อคลิกที่ textbox นั้นๆ $(".i_num_pad").hide(); // ซ่อนแป้นปุ่มกดตัวเลข ที่แสดง(ถ้ามี) $(this).next(".i_num_pad").slideDown("fast"); // แสดง number pad ในตำแหน่งของ textbox นั้นๆ ที่คลิก event.stopPropagation(); // หยุด event การคลิกไว้เฉพาะ textbox ที่กดคลิก เท่านั้น }); $(".i_num_pad:eq("+j+") li").click(function(){ // เมื่อปุ่ม number pad ถูกคลิกเลือก j คือลำดับที่ ถ้ามีหลายอัน $(this).toggleClass("hilight_press"); // hilight หรือเน้น ให้ปุ่มที่ถูกก เด่น เห็นได้ชัด เช่น เปลี่ยนพื้นหลังเป็นสีแดง $(this).animate({opacity: 1}, 100, function() { $(this).toggleClass("hilight_press"); // ยกเลิกการ hilight ใน 100 วินาที }); var char_input=$(this).text();// ค่าของปุ่ม number pad ที่กด เก็ยไว้ในตัวแปร char_input switch(char_input){ // เช็คเงื่อนไข ค่าที่รับเข้ามา case "Clr": str_text=""; // เคลียร์ข้อมูล ให้ str_text เท่ากับ ว่างเปล่า break; case "_": str_text+=" "; // เคลียร์ข้อมูล ให้ str_text เพิ่มข่องว่างเข้าไป break; case "Del": // ลบตัวด้านหลังสุด var str_len=str_text.length; // ดูว่าค่าเดิม มีขนาดกี่ตัวอักขระ if(str_len>0){ // ถ้าไม่ใช่ค่าว่าง หรือมีความยาวของอักขระข้อมูล มากกว่า 0 var end_str=str_len-1; // หาตำแหน่งตัวอักขระ ก่อนตัวสุดท้าย 1 ตัว โดยเอา ความยาวทั้งหมด - 1 str_text=str_text.substr(0,end_str); // เอาเฉพาะข้อความตั้งแต่ต้นจนุถึงตัวหลังสุด ก่อนตัวสุดท้าย }; break; default: str_text+=$(this).text(); //หากเป็นค่าอื่น ให้ค่าข้อความ เพิ่มต่อท้ายปกติ } obj_input.val(str_text); //ให้ textbox นั้น มีค่าตามค่าที่กำหนดข้างต้น event.stopPropagation(); // หยุด event การคลิกไว้เฉพาะ ปุ่ม li ที่เรากำหนด }); }); }; // เมื่อมีการคลิกในส่วนอื่น ก็ให้ปิด number pad ไป $('html').click(function(){ $(".i_num_pad").slideUp("fast"); }); })(jQuery); |
ตัวอย่างไฟล์ทดสอบทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> </title><style type="text/css">/*ส่วนของ css สามารถ ทำเป็นไฟล์ css แยก ก็ได้*/.i_num_pad{ position: absolute; list-style: none; margin: 0px; padding: 0px; width: 170px; height: 105px; background-color: #4D4646; padding: 5px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #666666; display:none; box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.75); }.i_num_pad li{ position: relative; list-style: none; margin: 2px; padding: 0px; display: block; width: 30px; float: left; text-align: center; height: 30px; line-height: 30px; background-color: #949494; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; border: 0px solid #000000; font-size:15px; font-weight:bold; cursor:pointer; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); }/*ส่วน class สำหรับกำหนดปุ่ม ที่ถูกกด ให้ hilight*/.hilight_press{ background-color: #FF0000 !important; color:#FFFFFF; }</style></head><body><br /><div style="margin:auto;width:40%;margin-top:20px;"><form id="form1" name="form1" method="post" action=""> <input type="text" name="data1" id="data1" /> ตัวเลขที่ 1<br /><br /><br /><br /> <input type="text" name="data2" id="data2" /> ตัวเลขที่ 2<br /><br /><br /><br /> <input type="text" name="data3" id="data3" /> ตัวเลขที่ 3 <br /><br /></form><br /></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.numpad.js"></script> <script type="text/javascript">$(function(){ // การใช้งาาน $("#data1,#data2,#data3").numpad(); });</script></body></html> |
