PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้าง jquery number pad plugin ไว้ใช้งาน แบบง่าย

04 March 2014 By


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

ตัวเลขที่ 2

ตัวเลขที่ 3


 
โค้ดและคำอธิบาย 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>

Tags:: number pad jquery jquery plugin





URL สำหรับอ้างอิง