jquery.numberpad plugin ที่จะสร้างขึ้นนี้ ใช้เพื่อสำหรับ
ในการกรอกข้อมูลที่เป็นตัวเลข ให้กับ textbox ที่เรากำหด โดยง่าย
แค่เพียงกดเลือกตัวเลขที่ต้องการ ด้วย mouse
เนื้อหานี้ ประยุกต์เพิ่มเติม จากบทความก่อนหน้า
สร้าง number pad แป้นตัวเลข ด้วย css อย่างง่าย
https://www.ninenik.com/content.php?arti_id=475 via @ninenik
การใช้งานไม่ยาก แค่เรียกใช้ไฟล์ plugin (คลิกขวา เลือก save ไฟล์ด้านล่างได้เลย)
การนำไปใช้
<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
// 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);
ตัวอย่างไฟล์ทดสอบทั้งหมด
<!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> </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>
