jQuery Learninghttp://www.ninenik.comรวมบทความ jQuery th-THFri, 10 Feb 2012 03:14:07 +0700Copyright ninenik.comCMSPro เว็บไซต์สำเร็จรูปhttp://www.ninenik.com/images/logo_ninenik.gifhttp://www.ninenik.comGoogle map API v.3 กับ jQuery ลากจุดหา ชื่อตำแหน่ง และ พิกัด ค่า latitude longitudehttp://www.ninenik.com/Google_map_API_v.3_กับ_jQuery_ลากจุดหา_ชื่อตำแหน่ง_และ_พิกัด_ค่า_latitude_longitude-431.html ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์เพิ่มเติมจากหัวข้อตามลิ้งค์ด้านล่าง

http://www.ninenik.com/content.php?arti_id=326
 
โดยเพิ่มเติมข้อมูลสถานที่แสดงตำแหน่ง จุดที่เราลากตัว marker ไปวาง
 
ตัวอย่าง
 
ข้อมูลสถานที่

Latitude Longitude Zoom

 
ตัวอย่างโค้ดทั้งหมด
 
<!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>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
/*	margin-top:100px;*/
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
  ข้อมูลสถานที่<br />
  <textarea name="place_value" rows="2" id="place_value" style="width:380px;"></textarea>  
    <br />
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  
    
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</div> 
  
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var geocoder; // กำหนดตัวแปร สำหรับใช้งานข้อมูลสถานที่จาก Google Map
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(14.946443417642712,102.3050308227539);
	
	// เรียกใช้งานข้อมูล Geocoder ของ Google Map
	geocoder = new GGM.Geocoder();
	
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 10, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	
	var my_Marker = new GGM.Marker({ // สร้างตัว marker
		position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
		map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
		draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
		title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
	});
	
	// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
	GGM.event.addListener(my_Marker, 'dragend', function() {
		var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
        map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker		
		
		// เรียกขอข้อมูลสถานที่จาก Google Map
		geocoder.geocode({'latLng': my_Point}, function(results, status) {
		  if (status == GGM.GeocoderStatus.OK) {
			if (results[1]) {
				// แสดงข้อมูลสถานที่ใน textarea ที่มี id เท่ากับ place_value
			  $("#place_value").val(results[1].formatted_address); // 
			}
		  } else {
			  // กรณีไม่มีข้อมูล
			alert("Geocoder failed due to: " + status);
		  }
		});		
		
        $("#lat_value").val(my_Point.lat());  // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
        $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value 
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
	});		

	// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
	GGM.event.addListener(map, 'zoom_changed', function() {
		$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value 	
	});

}
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>
 
]]>Wed, 08 Feb 2012 16:49:20 +0700แสดง icons กำหนดรูปเอง ให้จุดเริ่มเต้น และสิ้นสุดของเส้นทาง ใน google map อย่างง่ายhttp://www.ninenik.com/แสดง_icons_กำหนดรูปเอง_ให้จุดเริ่มเต้น_และสิ้นสุดของเส้นทาง_ใน_google_map_อย่างง่าย-430.html ประยุกต์จากเนื้อหา 

DirectionsService DirectionsRenderer ค้นหา และสร้าง เส้นทางใน google map
http://www.ninenik.com/content.php?arti_id=340
 
โดยอยู่ภายใต้เงื่อนไข คือจุดเริ่มต้น และสิ้นสุด จะไม่สามารถลากเพื่อ เปลี่ยนเส้นทางได้
 
ตัวอย่าง
 
 
From:
To:
From:
To:
ระยะทางข้อความ ระยะทางตัวเลข เมตร
ระยะเวลาข้อความ ระยะเวลาตัวเลข วินาที
* ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ

 

 
โค้ดทั้งหมด
<!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>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From: 
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />
To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
  <hr />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From: 
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br />
ระยะทางข้อความ  
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
ระยะทางตัวเลข 
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />
เมตร<br />
ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />
ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />
วินาที
<input type="submit" name="button" id="button" value="บันทึก" />  
  <br />
  * ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
  <p id="myconsole"></p>
</form>  
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
var makeMarker; // 
var icons;
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	
	// Start/Finish icons
	icons = {
		start: new GGM.MarkerImage(
		// URL
		'http://google-maps-icons.googlecode.com/files/walking-tour.png',
		// (width,height)
		new GGM.Size( 44, 32 ),
		// The origin point (x,y)
		new GGM.Point( 0, 0 ),
		// The anchor point (x,y)
		new GGM.Point( 22, 32 )
		),
		end: new GGM.MarkerImage(
		// URL
		'http://google-maps-icons.googlecode.com/files/spring-hot.png',
		// (width,height)
		new GGM.Size( 44, 32 ),
		// The origin point (x,y)
		new GGM.Point( 0, 0 ),
		// The anchor point (x,y)
		new GGM.Point( 22, 32 )
		)
	};
		
	directionShow=new  GGM.DirectionsRenderer({suppressMarkers:true});
//	directionShow=new  GGM.DirectionsRenderer({
//		draggable:true,
//		markerOptions:{
//			  draggable: true,
//			  raiseOnDrag: false,			 
//			  dragCrossMove:true
//		}
//	});	
	
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8129355,100.7316899); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
			
		// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
		var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
		var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
		var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
		var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
		var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
		var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
		// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
		$("#namePlaceGet").val(addressStart);
		$("#toPlaceGet").val(addressEnd);
		$("#distance_text").val(distanceText);
		$("#distance_value").val(distanceVal);
		$("#duration_text").val(durationText);
		$("#duration_value").val(durationVal);		
	});


}
$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์


//				console.log(directionShow);
//				console.log(results.routes[0].legs[0]);
//				directionShow.markerOptions.icon=icons.start;				
//				directionShow.markerOptions.icon=icons.end;		
				var leg = results.routes[0].legs[0];
				makeMarker(leg.start_location, icons.start, "title" );
				makeMarker(leg.end_location, icons.end, 'title' );				
				
				// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
				var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
				var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
				var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
				var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
				var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
				var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข		
				// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
				$("#namePlaceGet").val(addressStart);
				$("#toPlaceGet").val(addressEnd);
				$("#distance_text").val(distanceText);
				$("#distance_value").val(distanceVal);
				$("#duration_text").val(durationText);
				$("#duration_value").val(durationVal);		
				// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	});
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});


	makeMarker=function(position,icon,title){
		 new GGM.Marker({
//			  draggable: true,
//			  raiseOnDrag: false,			 
//			  dragCrossMove:true,
			  position: position,
			  map: map,
			  icon: icon,
			  title: title
		 });
	}

	
});
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize	
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>
 
]]>Thu, 26 Jan 2012 14:18:19 +0700แนวทางการประยุกต์ การซ่อน แสดงเนื้อหาสำหรับล็อกอิน อย่างง่าย ด้วย jQueryhttp://www.ninenik.com/แนวทางการประยุกต์_การซ่อน_แสดงเนื้อหาสำหรับล็อกอิน_อย่างง่าย_ด้วย_jQuery-429.html ตัวอย่างโค้ดสำหรับการซ่อน แสดงเนื้อหา ประยุกต์แสดงส่วนสำหรับล็อกอิน

ไว้ส่วนบนของเว็บไซต์ แสดง หรือซ่อนเมื่อคลิกที่ลิ้งค์ โดยใช้คำสั่ง slideToggle ของ jQuery
สามารถนำไปดัดแปลง css และการจัดวางตำแหน่งต่างๆ ได้ตามต้องการ
 
ตัวอย่าง
 
http://www.ninenik.com/demo/jquery_slide_down_up.php
 
ตัวอย่างโค้ดทั้งหมด
 
<!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>slde down up</title>
<style type="text/css">
body{
	padding:0px;
	margin:0px;	
}
div#login_div{
	position:relative;
	margin:auto;
	display:none;
	width:100%;	
	height:150px;
	background-color:#FFFFCC;
}
div#main_div{
	position:relative;
	display:block;
	margin:auto;
	width:970px;
	height:1000px;	
	background-color:#FFCCCC;	
}
</style>

</head>

<body>
<div id="login_div">
ส่วนของเนื้อหาสำหรับล็อกอิน
</div>
<div id="main_div">
<div id="login_anchor">
<a id="login_anchor_a" href="#">เข้าสู่ระบบ / สมัครสมาชิก</a>
</div>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<script type="text/javascript">    
$(function(){    
	$("#login_anchor_a").click(function(){
		$("#login_div").slideToggle();
	});
});    
</script> 
</body>
</html>
 
]]>Mon, 23 Jan 2012 09:47:58 +0700ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู http://www.ninenik.com/ใช้_jQuery_กับ_CSS_สร้างเมนูย่อย_แนวนอน_รูปแบบคล้ายแท็บเมนู_-427.html ตัวอย่าง และโค้ดต่อไปนี้ เป็นแนวทางสำหรับสร้างเมนู สำหรับเว็บไซต์ โดยจะมีเมนูย่อยแสดง

เมื่อเลื่อนเมาส์ไปที่เมนูหลักของเมนูย่อยนั้น สามารถนำไปประยุกต์ หรือปรับแต่ง css ให้สวยงาม
ได้ตามต้องการ  
 
ตัวอย่าง
 
 
โค้อตัวอย่างทั้งหมด
 
<!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">
body{
	font: Tahoma, Thonburi;	
	font-size:12px;
}
/* CSS ส่วนแถบแนวทั้งหมดของเมนูหลัก */
ul#top_nav_menu{
	position:relative;
	display:block;
	width:900px;
	height:35px;
	padding:0px;
	margin:0px;
	list-style:none;	
	background-color:#99CCCC;
	overflow:visible;
	line-height:35px;
}
/* css ส่วนของเมนูหลัก */
ul#top_nav_menu li{
	background-color:#FFCC33;
	position:relative;
	display:block;
	float:left;
	height:35px;
	padding:0px 15px;
	margin:0px;
	list-style:none;	
}
ul#top_nav_menu li a{
	text-decoration:none;	
	text-transform:uppercase;
}
/* css ส่วนของแถบแนวทั้งหมดของเมนูย่อย */
ul#top_nav_menu li ul{
	background-color:#CC99CC;	
	position:absolute;
	clear:both;
	float:left;
	top:35px;
	left:0px;
	display:none;
	height:35px;
	width:900px;	
	padding:0px;
	margin:0px;
	list-style:none;		
}
/* css ส่วนของเมนูย่อย */
ul#top_nav_menu li ul li{
	position:relative;
	background-color:#CCCC66;	
	float:left;
	display:block;
	height:35px;
	padding:0px 15px;
	margin:0px;
	list-style:none;	
}
</style>
</head>

<body>


<div>

<ul id="top_nav_menu">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Project Info</a>
			<ul>
				<li><a href="#"><span>Concept</span></a></li>
				<li><a href="#"><span>Fact Sheet</span></a></li>
				<li><a href="#"><span>Facilities</span></a></li>
				<li><a href="#"><span>Floor Plan</span></a></li>
				<li><a href="#"><span>Unit Layout</span></a></li>
				<li><a href="#" target="_blank"></a></li>
			</ul>
		</li>
		<li><a href="#">Location</a></li>
		<li><a href="#">Gallery</a></li>
		<li><a href="#">Promotion</a></li>
		<li><a href="#">Buyer's Guide</a></li>
		<li><a href="#">Siri Service</a></li>
		<li>
        <a href="#">Contact us</a>
 			<ul>
				<li><a href="#"><span>Concept</span></a></li>
				<li><a href="#"><span>Fact Sheet</span></a></li>
				<li><a href="#"><span>Facilities</span></a></li>
				<li><a href="#"><span>Floor Plan</span></a></li>
			</ul>       
        </li>
	</ul>
</div>    
    
    
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script type="text/javascript">  
$(function(){  
	$("ul#top_nav_menu li").hover(function(){	
		var offsetLeft=$(this).position().left;
		$(this).find("ul").css("left",-offsetLeft+"px").delay(300).slideDown(100);
	},function(){
		$(this).find("ul").stop(true,true).slideUp(100);
	});
});  
</script>    
</body>
</html>
 
]]>Fri, 16 Dec 2011 16:47:47 +0700แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQueryhttp://www.ninenik.com/แนวทาง_การเลื่อนแล้ว_fixed_ตำแหน่งเนื้อหาที่ต้องการ_ด้วย_jQuery-421.html ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการสร้างส่วนของเนื้อหาให้สามารถ fixed ตำแหน่ง

เมื่อมีการเลื่อน scrollbar ของหน้าเพจนั้น ถึงตำแหน่งที่เรากำหนด และ ส่วนของเนื้อหานั้น
จะกลับมาอยู่ตำแหน่งเดิม เมื่อการเลื่อน scrollbar หน้าเพจนั้น ไม่เข้าเงื่อนไข
 
โค้ดทั้งหมด ดูตัวอย่าง ได้จากล๊งค์ด้านล่าง
 
<!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>fixed position when scroll</title>
<style type="text/css">
html,body{
	background-color:#CCC;
	padding:0px;
	margin:0px;	
}
div.main_test{
	position:relative;
	background-color:#999;
	margin:auto;
	width:800px;	
}
div.top_sector{
	position:relative;
	display:block;
	width:100%;
	height:75px;	
	background-color:#036;
	color:#FFF;
}
/* css ส่วนของเนื้อหาที่ต้องการในตรึง เมื่อเลือน scroll ถึงตำแหน่งที่ต้องการ */
div.my_float_div{
	position:relative;
	display:block;
	width:250px;
	height:160px;
	background-color:#DCDCF5;
	color:#000;	
	padding:5px;
}
</style>
</head>

<body>

<div class="main_test">
<div class="top_sector">Top Sector</div>
<br />
<?php 
// php สร้างบรรทัดใหม่  สำหรับทดสอบ
for($i=1;$i<=10;$i++){ ?>
<?=$i?>.<br />
<?php } ?>
<div class="my_float_div">
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
</div>
<?php
// php สร้างบรรทัดใหม่  สำหรับทดสอบ
for($i=11;$i<=100;$i++){ ?>
<?=$i?>.<br />
<?php } ?>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    // เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ  
     $(window).scroll(function(){  
//		เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่งที่มากกว่าหรือเท่ากับตำแหน่งที่ต้องการ
//		เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่ง ที่ทำให้ div
//		class ชื่อ my_float_div ชิดขอบบนพอดี หาจากคำสั่ง
//		console.log($(document).scrollTop());
         if($(document).scrollTop()>270){ 
			$(".my_float_div").css({ /*  */
				'position':'fixed',
				'top':'0px'
			});
         }else{  // เลื่อนกลับมาอยู่ตำแหน่งเดิม ถ้าไม่อยู่ในเงื่อนไข
			$(".my_float_div").css({
				'position':'relative'
			});
         }  
     });  	 
});
</script>


</body>
</html>
 
 
ตัวอย่าง http://www.ninenik.com/demo/fixed_float_when_scroll.php
 
 
]]>Thu, 22 Sep 2011 10:42:48 +0700นาฬิกาเวลา จาก server อย่างง่าย http://www.ninenik.com/นาฬิกาเวลา_จาก_server_อย่างง่าย_-420.html เป็นลูกเล่นสำหรับเอาไปตกแต่งเว็บ เมื่อก่อนเห็นตามเว็บต่างๆ บ่อย แต่เดี๋ยวนี้ไม่ค่อยนิยม หันไปใช้นาฬิกาสวยๆ จาก flash
เอามาแนะนำเผื่อใครสนใจนำไปใช้งาน รูปแบบการทำงาน คือดึงเวลาจาก server เป็นเวลาตั้งต้น จากนั้นเวลาก็จะเดินไปเรื่อย

ตัวอย่างโค้ดทั้งหมด

<!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>
</head>

<body>


<div id="css_time_run">
<?=date("H:i:s")?>
</div>
<br />


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){


	var nowDateTime=new Date("<?=date("m/d/Y H:i:s")?>");
	var d=nowDateTime.getTime();
	var mkHour,mkMinute,mkSecond;
	 setInterval(function(){
		d=parseInt(d)+1000;
		var nowDateTime=new Date(d);
		mkHour=new String(nowDateTime.getHours());  
		if(mkHour.length==1){  
			mkHour="0"+mkHour;  
		}
		mkMinute=new String(nowDateTime.getMinutes());  
		if(mkMinute.length==1){  
			mkMinute="0"+mkMinute;  
		} 		 
		mkSecond=new String(nowDateTime.getSeconds());  
		if(mkSecond.length==1){  
			mkSecond="0"+mkSecond;  
		} 	
		var runDateTime=mkHour+":"+mkMinute+":"+mkSecond;		 
		$("#css_time_run").html(runDateTime);	 
	 },1000);


});
</script>
</body>
</html>

ตัวอย่าง

 


]]>Wed, 07 Sep 2011 16:38:42 +0700ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่ายhttp://www.ninenik.com/ใช้งาน_google_chart_ตัวใหม่สร้าง_poll_อย่างง่าย-418.html อ่านวิธีการใช้งานอย่างโปรได้ด้วยตัวเองที่ 

 
http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Data_Format
 
โค้ตและตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับรู้จัก และใช้งาน google chart สำหรับสร้าง แผนภูมิ
หรือกราฟ โดยในตัวอย่างจะเป็นการใช้กราฟ ประเภท pie chart หรือวงกลมที่แบ่งสัดส่วนของ
ข้อมูล โดยจะใช้แสดง จำนวนแต่ละประเภทของผลโหวด 
 
  ในตัวอย่าง จะใช้วิธีการบันทึกข้อมูลแบบเขียนไฟล์ทับ ข้อมูลเดิม เมื่อมีการโหวด
ส่วนกรณีสำหรับการใช้งานเชื่อมต่อกับฐานข้อมูล สามารถนำไปประยุกต์เพิ่มเติมเองได้
 
เนื้อหาจะคล้ายๆ กับ บทความเรื่อง 
สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=280
 
แต่ในตัวอย่างใหม่จะเขียนโค้ดให้สั้นกว่า และเป็นการใช้งาน google chart เวอร์ชั่นใหม่
 
ดาวน์โหดลไฟล์ตัวอย่างได้ที่
http://www.ninenik.com/demo/jquery_poll_google_chart/jquery_poll_google_chart.rar
 
ตัวอย่างการทำงาน
http://www.ninenik.com/demo/jquery_poll_google_chart/jquery_poll_google_chart.php
 
คุณใช้ภาษาโปรแกรมใด ในการพัฒนาเว็บไซต์
PHP
ASP.NET
ASP
C#
Perl
Python
อื่นๆ
]]>Wed, 03 Aug 2011 16:47:48 +0700ลูกเล่น เพิ่มช่องรับ input type file อัตโนมัติ ด้วย jQueryhttp://www.ninenik.com/ลูกเล่น_เพิ่มช่องรับ_input_type_file_อัตโนมัติ_ด้วย_jQuery-416.html ตัวอย่างต่อไปนี้ เป็นแนวทางสำหรับนำไปใช้ในการ ให้สามารถอัพโหลดไฟล์ ได้หลายๆ ไฟล์พร้อมกัน

ในที่นี่ ใช้กับการอัพโหลดรูปภาพ โดยจะมีฟังก์ชั่น ในการอัพโหลด มาในตัวอย่างด้วย
หลักการคือ เมื่อเราเลือกไฟล์ หนึ่งแล้ว เราจะสามารถเลือกไฟล์ที่ต้องการอัพโหลด เพิ่มขึ้นมาเรื่อยๆ
รวมทั้งยังสามารถยกเลิก หรือลบไฟล์ที่ได้ทำการเลือกไปแล้วออก ก่อนทำการอัพโหลด
 
โค้ดตัวอย่างเฉพาะในส่วนของ jQuery 
 
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <table width="500" border="0" cellspacing="2" cellpadding="0">
    <tr class="css_row_upload">
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>
      <td bgcolor="#ECECEC">
      <input type="file" name="pic_upload[]" class="css_pic_upload" id="pic_upload[]" 
      onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};" />
        
        </td>
    </tr>
  </table>
  <br />
<br />
    <input type="submit" name="upPic" id="upPic" value="UPLOAD NOW" />

</form>

<hr />

</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	var empty_upload='\
    <tr class="css_row_upload">\
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>\
      <td bgcolor="#ECECEC">\
      <input type="file" name="pic_upload[]" class="css_pic_upload"\
	  id="pic_upload[]" onpropertychange="if(window.event.propertyName==\'value\'){$(this).blur();};" />\
        <a href="#" class="css_remove_fileupload">Remove</a>\
        </td>\
    </tr>\
	';


	$(".css_pic_upload").live("change onpropertychange",function(){
		var file_value=$(this).val();
		console.log(file_value);
		if(file_value!=""){		
			$(this).parents("tr.css_row_upload").after(empty_upload);
		}
	});

	$(".css_remove_fileupload").live("click",function(e){
		e.preventDefault();
		$(this).parents("tr.css_row_upload").remove();		
	});	
});

</script>
ตัวอย่าง
 
Picture::  


 
โค้ดตัวอย่างทั้งหมด
 
<!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>



</head>

<body>


<br />
<br />
<br />

<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <table width="500" border="0" cellspacing="2" cellpadding="0">
    <tr class="css_row_upload">
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>
      <td bgcolor="#ECECEC">
      <input type="file" name="pic_upload[]" class="css_pic_upload" id="pic_upload[]" 
      onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};" />
        
        </td>
    </tr>
  </table>
  <br />
<br />
    <input type="submit" name="upPic" id="upPic" value="UPLOAD NOW" />

</form>

<hr />

</div>

<?php

function multiupload($img,$imglocate,$key){
	$allowed_types=array('jpg','jpeg','gif','png','swf');   
	if($img['name'][$key]!=''){
		$fileupload1=$img['tmp_name'][$key];
		$g_img=explode(".",$img['name'][$key]);
		$ext = strtolower(array_pop($g_img));  
		$file_up=time()."-".$key.".".$ext;
		echo $file_up;
		if($fileupload1!="" && in_array($ext,$allowed_types)){
				copy($fileupload1,$imglocate.$file_up);	
				chmod($imglocate.$file_up,0777);				
		}				
	}
	return $file_up; // ส่งกลับชื่อไฟล์
}

if(isset($_POST['upPic'])){
	$multiupload_pic=$_FILES['pic_upload'];
	$arr_multiupload_pic=$multiupload_pic['name'];
	if(count($arr_multiupload_pic)>0){
		foreach($arr_multiupload_pic as $key=>$value){
			$file_to_up=multiupload($multiupload_pic,"tmp_pic/",$key);
			if($file_to_up!=""){
				echo "$file_to_up<br>";
				//  นำตัวแปรชื่อไฟล์ไปบันทึกลงฐานข้อมูล หรืออื่นๆ
				
			}
		}		
	}
	
}

?>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	var empty_upload='\
    <tr class="css_row_upload">\
      <td width="150" align="right" bgcolor="#ECECEC">Picture:: &nbsp;</td>\
      <td bgcolor="#ECECEC">\
      <input type="file" name="pic_upload[]" class="css_pic_upload"\
	  id="pic_upload[]" onpropertychange="if(window.event.propertyName==\'value\'){$(this).blur();};" />\
        <a href="#" class="css_remove_fileupload">Remove</a>\
        </td>\
    </tr>\
	';


	$(".css_pic_upload").live("change onpropertychange",function(){
		var file_value=$(this).val();
		console.log(file_value);
		if(file_value!=""){		
			$(this).parents("tr.css_row_upload").after(empty_upload);
		}
	});

	$(".css_remove_fileupload").live("click",function(e){
		e.preventDefault();
		$(this).parents("tr.css_row_upload").remove();		
	});	
});

</script>

</body>
</html>
 
]]>Mon, 27 Jun 2011 09:36:23 +0700แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IEhttp://www.ninenik.com/แก้ปัญหา_event_onchange_ของ_input_type_file_ไม่ทำงานทันทีใน_ใน_IE-415.html event onchange ของ input type file ใน IE เมื่อมีการเลือกไฟล์ที่ต้องการอัพโหลด จะไม่ทำงาน

ทันที ต้องคลิกที่ว่างหรือ focus ออกจาก input type file ก่อน คำสั่งใน event onchange จึงจะทำงาน
แต่กับ บราวเซอร์อื่นๆ จะไม่เจอปัญหานี้ 
 
วิธีการในการแก้ไขคือ ให้ แทรก attribute ชื่อ onpropertychange เข้าไปใน input type file ที่ต้องการ
ให้ทำงานทันทีเมื่อคลิกเลือกไฟล์
 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"
 
ตัวอย่าง
 
<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2"  />
 
เมื่อแทรกแล้ว จะได้เป็น
 
<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2" 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"   />
 
ตัวอย่างทดสอบ (ให้ทำการทดสอบรันใน IE จึงจะสามารถเข้าใจผลลัพธ์ได้)
 
ให้ทดสอบโดลการเลือก ไฟล์ใน input type file ตัวที่สองก่อน โดยหลังจากเลือกไฟล์ จะพบว่ามีการ
alert ค่าทันที เนื่องจากเราใช้วิธีการแก้ปัญหาตามคำแนะนำข้างต้น
 
จากนั้น ให้ลองเลือกไฟล์ ใน input type file ตัวแรก โดยหลังเลือกไฟล์ และไม่ได้คลิกที่ว่าง หรือที่อื่นใด
คำสั่ง alert จะไม่ทำงาน จนกระทั้งเรา คลิกที่ว่าง หรือที่อื่นใด คำสั่ง alert จึงจะทำงาน
 


 
 
 
 
ตัวอย่างโค้ดทดสอบทั้งหมด
 
<!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>
</head>

<body>

<!--
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"

-->
<div style="margin:auto;width:800px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">

<input type="file" name="pic_upload" class="css_pic_upload" id="pic_upload"   />

<br />
<br />

<input type="file" name="pic_upload2" class="css_pic_upload2" id="pic_upload2" 
onpropertychange="if(window.event.propertyName=='value'){$(this).blur();};"   />

</form>

<hr />

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	
	$(".css_pic_upload").live("change",function(){
		var file_value=$(this).val();
		alert(file_value);
	});


	$(".css_pic_upload2").live("change",function(){
		var file_value=$(this).val();
		alert(file_value);
	});

});
</script>

</body>
</html>
 
 
 
 
 
 
]]>Fri, 24 Jun 2011 15:52:56 +0700การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่ายhttp://www.ninenik.com/การอ้างอิง_object_ในหน้าหลัก_จากหน้า_popup_ด้วย_jQuery_อย่างง่าย-411.htmlตัวอย่างวิธีการต่อไปนี้ เป็นไปในลักษณะ ให้ข้อมูลจาก ฟอร์มในหน้า popup
เมื่อทำการกดปุ่ม submit ให้ส่งค่ามาที่หน้า ที่ทำการเปิด popup

ตัวอย่าง

 

เปิด popup
แนวทางการทดสอบ ให้คลิกที่ลิ้งค์ว่า เปิด popup
ในหน้าหลัก โดยในหน้าหลักมี textbox ที่มี id เท่ากับ data1 สำหรับทดสอบรับค่าจาก popup
จากนั้นหน้า popup ก็จะแสดง โดยในตัวอย่าง จะแสดงฟอร์มที่มี textbox กับ ปุ่ม submit
เมื่อกรอกข้อมูลในช่อง textbox ของหน้า popup แล้วกดปุ่ม submit ข้อมูลนั้นก็จะมาแสดง
ที่ textbox ที่มี id เท่ากับ data1 ในหน้าหลัก

 

ในตัวอย่างเป็นเพียงแนวทางเท่านั้น สามารถศึกษาและประยุกต์เพิ่มเติมตามต้องการ

ส่วนสำคัญคือ การใช้งาน jQuery ในการอ้างอิงถึง object ในหน้าหลัก ตามตัวอย่างดังนี้

$("#data1",window.opener.document);

 

หมายถึง textbox ที่มี id เท่ากับ data1 ของหน้าหลัก


ตัวอย่างโค้ดทดสอบ หน้าหลัก

<form id="form1" name="form1" method="post" action="">
  <input type="text" name="data1" id="data1" />
</form>
<a href="javascript:popup('main_and_popup2.php','',400,100)" >เปิด popup </a>  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function popup(url,name,windowWidth,windowHeight){    
	myleft=(screen.width)?(screen.width-windowWidth)/2:100;	
	mytop=(screen.height)?(screen.height-windowHeight)/2:100;	
	properties = "width="+windowWidth+",height="+windowHeight;
	properties +=",scrollbars=yes, top="+mytop+",left="+myleft;   
	window.open(url,name,properties);
}


ตัวอย่างโค้ดไฟล์ popup


<!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>main and popup</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
  <input type="text" name="data1_popup" id="data1_popup" />
  <input type="submit" name="button" id="button" value="Submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#form1").submit(function(){
		var opener_obj=$("#data1",window.opener.document);
		opener_obj.val($("#data1_popup").val());
		window.close();
		return false;
	});
	// jQuery code
});
</script>
</body>
</html>

 

 

]]>Sat, 02 Apr 2011 02:08:18 +0700เทคนิค หน่วงเวลา กับ event keyup ด้วย jQueryhttp://www.ninenik.com/เทคนิค_หน่วงเวลา_กับ_event_keyup_ด้วย_jQuery-409.htmlตัวอย่างโค้ดต่อไปนี้ใช้ ในกรณี ให้ส่งค่าข้อมูล หรือทำงานคำสั่งที่ต้องการ
หลังจากการพิมพ์ข้อมูล ตัวสุดท้ายแล้ว 3 วินาที (สามารถกำหนดเวลาตามต้องการ)
เหมือนกับให้โปรแกรมทำงาน หลังจากพิมพ์ข้อมูลตัวสุดท้ายแล้วเท่านั้น ซึ่งโดยปกติ หาก
ไม่ได้กำหนดโค้ดตามนี้ คำสั่งต่างๆ จะทำงานทันทึเมื่อกดพิมพ์ข้อมูล แม้ว่าข้อมูลยังทำการพิมพ์ยังไม่เสร็จ

ตัวอย่างโค้ดที่ทำงานทันทีเมื่อทำการพิมพ์ข้อมูล
 

<form id="form1" name="form1" method="post" action="">
  <input name="sample_input" type="text" id="sample_input" size="40" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#sample_input").keyup(function(event){
		var input_data=$("#sample_input").val();
		alert(input_data);		
	});
});
</script>

ตัวอย่าง

ตัวอย่างโค้ดกรณีหน่วงเวลา ให้ทำงานหลังจากพิมพ์ข้อมูลตัวสุดท้ายแล้ว 3 วินาที
 

<form id="form1" name="form1" method="post" action="">
  <input name="sample_input" type="text" id="sample_input" size="40" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	var delayID=null;
	$("#sample_input").keyup(function(event){
		if(delayID==null){
			delayID=setTimeout(function(){
				var input_data=$("#sample_input").val();
				alert(input_data);
				delayID=null;
			},3000);							
		}else{
			if(delayID){
				clearTimeout(delayID);
				delayID=setTimeout(function(){
					var input_data=$("#sample_input").val();
					alert(input_data);
					delayID=null;
				},3000);						
			}		
		}
	});
});
</script>

ตัวอย่าง

 

]]>Wed, 23 Mar 2011 11:59:49 +0700การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่ายhttp://www.ninenik.com/การกำหนด_แท็ก_html_ในตัวแปร_JavaScript_อย่างง่าย-408.htmlตัวอย่างแนวทางต่อไปนี้ เป็นเทคนิค เล็กน้อยในการใช้งานตัวแปร JavaScript เก็บ html
โดยตัวอย่างประยุกต์จากเนื้อหา

เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=299

โค้ด html ประกอบอธิบาย
 

<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr>
    <td width="119"><select name="data1[]" id="data1[]">
      <option value="1">data1</option>
      <option value="2">data2</option>
    </select></td>
    <td width="519"><input type="text" name="data2[]" id="data2[]" /></td>
    </tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
	&nbsp;
    &nbsp;
    &nbsp;
    <button id="Submit" type="submit">Submit</button>    
    </td>
  </tr>
</table>
</form>

จากโค้ดด้านบน เราต้องการ เอา html บรรทัดที่  3 - 9 มากำหนดในตัวแปร JavaScript
สร้างรูปแบบตัวแปร

var dataClone='\

';

จากนั้นก็อบโค้ดบรรทัดที่ 3 - 9 มาใส่ด้านใน รูปแบบตัวแปรที่เรากำหนด จะได้

var dataClone='\
  <tr>
    <td width="119"><select name="data1[]" id="data1[]">
      <option value="1">data1</option>
      <option value="2">data2</option>
    </select></td>
    <td width="519"><input type="text" name="data2[]" id="data2[]" /></td>
    </tr>
';

สังเกตว่าใน attribute ของ html จะกำหนดค่าใน " (double quote) ทั้งหมด
จากนั้น ให้ต่อท้ายบรรทัด html ทุกบรรทัด ด้วย \ จะได้

var dataClone='\
  <tr>\
    <td width="119"><select name="data1[]" id="data1[]">\
      <option value="1">data1</option>\
      <option value="2">data2</option>\
    </select></td>\
    <td width="519"><input type="text" name="data2[]" id="data2[]" /></td>\
    </tr>\
';

นำไปประยุกต์กับเนื้อหา เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย
http://www.ninenik.com/content.php?arti_id=299

ผลลัพธ์ที่ได้ คือบรรทัดที่มีการเพิ่มมา จะไม่เอาข้อมูลที่ทำการพิมพ์ไปแล้วมาแสดง

ตัวอย่าง


       

โค้ดตัวอย่างทั้งหมด
 

<!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>jquery clone no data</title>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
  <tr>
    <td width="119"><select name="data1[]" id="data1[]">
      <option value="1">data1</option>
      <option value="2">data2</option>
    </select></td>
    <td width="519"><input type="text" name="data2[]" id="data2[]" /></td>
    </tr>
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button>  
    &nbsp;
    <button id="removeRow" type="button">-</button>
	&nbsp;
    &nbsp;
    &nbsp;
    <button id="Submit" type="submit">Submit</button>    
    </td>
  </tr>
</table>
</form>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	var dataClone='\
  <tr> \
    <td width="119"><select name="data1[]" id="data1[]"> \
      <option value="1">data1</option> \
      <option value="2">data2</option> \
    </select></td> \
    <td width="519"><input type="text" name="data2[]" id="data2[]" /></td> \
    </tr> \
	';
	$("#addRow").click(function(){
		$("#myTbl").append(dataClone);
	});
	$("#removeRow").click(function(){
		if($("#myTbl tr").size()>1){
			$("#myTbl tr:last").remove();
		}else{
			alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
		}
	});			
});
</script>
</body>
</html>

 

]]>Tue, 22 Mar 2011 01:19:16 +0700การสร้างปุ่ม facebook ล็อกอิน เว็บไซต์ แบบแสดงรูป และกำหนดเพิ่มเติมhttp://www.ninenik.com/การสร้างปุ่ม_facebook_ล็อกอิน_เว็บไซต์_แบบแสดงรูป_และกำหนดเพิ่มเติม-407.htmlปุ่มล็อกอิน จาก facebook สามารถแสดงรูปของเพื่อนๆ ของคนที่ล็อกอินเข้าเว็บไซต์ผ่าน facebook
login button

สามารถกำหนดจำนวนแถวของรายการที่ต้องการแสดง ด้วย attribute ชื่อ max-rows เช่นถ้าต้องการแสดง
2 แถว ก็กำหนดเป็น max-rows="2"

attribute กำหนดเพิ่มเติม สำหรับใช้งาน  <fb:login-button>

show-faces
สำหรับแสดงรูปของเพื่อนๆ ของคนที่ล็อกอินเข้าเว็บไซต์ผ่าน facebook login button
 

<fb:login-button show-faces="yes"></fb:login-button>


ตัวอย่าง

width
กำหนดความกว้างของพื้นที่การแสดง ถ้าไม่ได้กำหนด ค่าเริ่มต้นจะเท่ากับ 200px
 

<fb:login-button show-faces="yes" width="400px"></fb:login-button>


ตัวอย่าง

max-rows
กำหนดจำนวนแถวที่ต้องการแสดงรูปภาพ ถ้าไม่กำหนด ค่าเริ่มต้นจะเท่ากับ 1
 

<fb:login-button show-faces="yes" max-rows="2"></fb:login-button>


ตัวอย่าง

perms
การกำหนด permission อ่านเพิ่มเติมหัวข้อ
http://www.ninenik.com/กำหนด_รายละเอียด_การใช้งาน_facebook_login_button_เพิ่มเติม-406.html

]]>Mon, 21 Mar 2011 08:00:00 +0700กำหนด รายละเอียด การใช้งาน facebook login button เพิ่มเติมhttp://www.ninenik.com/กำหนด_รายละเอียด_การใช้งาน_facebook_login_button_เพิ่มเติม-406.htmlการกำหนด permission
เมื่อเราต้องการกำหนด permission เพิ่มเพื่อร้องขอไปยังผู้ใช้ facebook ที่กำลังล็อกอิน ว่า
จะอนุญาต ให้ app id นี้สามารถเข้าไปใช้งานข้อมูลใดๆ บ้างของผู้ที่กำลังล็อกอิน ทำได้โดยการกำหนด
attribute ชื่อ perms เข้าไปใน แท้ก fb:login-button ตัวอย่าง

<fb:login-button perms="email,publish_stream" 
onlogin="window.location='index.php'">
</fb:login-button>

 

จากตัวอย่าง perms="email,publish_stream" คือ ร้องขอไปยังผู้ใช้ facebook ที่กำลังล็อกอิน ว่าต้องการ
ได้รับอนุญาตจากผู้ใช้ ในการเข้าถึงข้อมูลอีเมลล์ และสามารถโพสข้อความไปที่หน้า profile ของผู้ใช้

ข้อมูลอ้างอิง สำหรับการกำหนด permission เพิ่มเติม สามารถเข้าไปดูได้ที่
http://developers.facebook.com/docs/authentication/permissions/

การแสดงรูป และชื่อผู้ล็อกอิน
การแสดงรูป และชื่อผู้ล็อกอิน สามารถกำหนด attribute ชื่อ show-faces
เข้าไปใน แท้ก fb:login-button ตัวอย่าง

<fb:login-button perms="email,publish_stream" 
show-faces="yes"
onlogin="window.location='index.php'">
</fb:login-button>

 

การแสดงปุ่ม ล็อกอิน โดยขณะที่ล็อกอินอยู่ ให้แสดงเป็น ปุ่มสำหรับ ล็อกเอาท์ อัตโนมัติ
เราสามารถใช้รูปแบบปุ่ม ล็อกอิน ได้ดังนี้

<fb:login-button perms="email,publish_stream" 
autologoutlink="true" 
onlogin="window.location='index.php'">
</fb:login-button>

ประยุกต์ การสร้างปุ่มล็อกอิน ที่เปลี่ยนเป็นปุ่ม ล็อกเอาท์ อัตโนมัติ เมื่อ ล็อกอิน อยู่
พร้อมแสดงรูปภาพ และชื่อผู้ใช้
 

<div style="width:200px;text-align:center;">
<?php 
if(isset($_COOKIE['fbs_xxxxxxxx'])){  ///   xxxxxxxx  คือ app id เช่น app id  = 123456789 ก็จะได้เป็น fbs_123456789  
?>
<fb:login-button show-faces="yes"></fb:login-button>
<br />
<br />
<?php } ?>
<fb:login-button 
perms="email,read_stream,user_checkins" 
autologoutlink="true" onlogin="window.location='facebook_js_sdk_02.php'">
</fb:login-button>
</div>

ตัวอย่างโค้ดทดสอบ ใช้งานร่วม JavaScript SDK

<!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"
 xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

<div style="width:200px;text-align:center;">
<?php 
if(isset($_COOKIE['fbs_xxxxxxxx'])){  ///   xxxxxxxx  คือ app id เช่น app id  = 123456789 ก็จะได้เป็น fbs_123456789  
?>
<fb:login-button show-faces="yes"></fb:login-button>
<br />
<br />
<?php } ?>
<fb:login-button 
perms="email,read_stream,user_checkins" 
autologoutlink="true" onlogin="window.location='facebook_js_sdk_02.php'">
</fb:login-button>
</div>




<div id="fb-root"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  window.fbAsyncInit = function() {
	  FB.init({
		appId  : 'YOUR APP ID', // ใส่ APP ID
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true  // parse XFBML
	  });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());  
</script>
<script type="text/javascript">
$(function(){
	// jQuery code
});
</script>
</body>
</html>

 

 

]]>Sun, 20 Mar 2011 08:00:00 +0700การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebookhttp://www.ninenik.com/การสร้างปุ่ม_ล็อกอิน_เว็บไซต์_แบบไม่แสดงรูป_ด้วย_facebook-405.htmlตัวอย่างการใช้งานปุ่ม ล็อกอินของ facebook แบบไม่แสดงรูป มีรูปแบบต่างๆให้เลือกใช้งาน
ดังต่อไปนี้

รูปแบบมาตรฐาน
 

<fb:login-button onlogin="window.location='index.php'">
</fb:login-button>

ตัวอย่าง

รูปแบบเปลี่ยนเป็นปุ่ม ล็อกเอาท์ อัตโนมัติ มีล็อกอินอยู่
 

<fb:login-button autologoutlink="true" onlogin="window.location='index.php'">
</fb:login-button>

ตัวอย่าง

ปุ่ม ล็อกอิน ด้วย facebook ขนาดเล็ก พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="small" onlogin="window.location='index.php'">
Connect
</fb:login-button>

ตัวอย่าง
Connect

ปุ่ม ล็อกอิน ด้วย facebook ขนาดกลาง พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="medium" onlogin="window.location='index.php'">
Connect with Facebook
</fb:login-button>

ตัวอย่าง
Connect with Facebook

ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="large" onlogin="window.location='index.php'">
Login with Facebook
</fb:login-button>

ตัวอย่าง
Login with Facebook

ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ที่สุด พร้อมกำหนดข้อความที่ต้องการแสดงเอง
 

<fb:login-button size="xlarge" onlogin="window.location='index.php'">               
Find Friends
</fb:login-button>

ตัวอยาง
Find Friends

onlogin คือ เหตุการณ์กำหนด เมื่อได้ทำการล็อกอินแล้ว ให้ทำงานคำสั่ง JavaScript ที่ต้องการ ในตัวอย่างคือ
ให้ลิ้งค์ไปที่ไฟล์ index.php
onlogin="window.location='index.php'"

ตัวอย่างการเรียกใช้งาน ไฟล์ทดสอบ

<!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"
 xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>

รูปแบบมาตรฐาน<br />
ตัวอยาง<br />
<fb:login-button onlogin="window.location='index.php'">
</fb:login-button>
<br />
<br />
<br />
รูปแบบเปลี่ยนเป็นปุ่ม ล็อกเอาท์ อัตโนมัติ มีล็อกอินอยู่<br />
ตัวอยาง<br />
<fb:login-button autologoutlink="true" onlogin="window.location='index.php'">
</fb:login-button>
<br />
<br />
<br />

ปุ่ม ล็อกอิน ด้วย facebook ขนาดเล็ก พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="small" onlogin="window.location='index.php'">
Connect
</fb:login-button>
<br />
<br />
<br />
ปุ่ม ล็อกอิน ด้วย facebook ขนาดกลาง พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="medium" onlogin="window.location='index.php'">
Connect with Facebook
</fb:login-button>
<br />
<br />
<br />
ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="large" onlogin="window.location='index.php'">
Login with Facebook
</fb:login-button>
<br />
<br />
<br />
ปุ่ม ล็อกอิน ด้วย facebook ขนาดใหญ่ที่สุด พร้อมกำหนดข้อความที่ต้องการแสดงเอง<br />
ตัวอยาง<br />
<fb:login-button size="xlarge" onlogin="window.location='index.php'">               
Find Friends
</fb:login-button>




<div id="fb-root"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  window.fbAsyncInit = function() {
	  FB.init({
		appId  : 'YOUR APP ID', // ใส่ APP ID
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true  // parse XFBML
	  });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());  
</script>
<script type="text/javascript">
$(function(){
	// jQuery code
});
</script>
</body>
</html>

 

]]>Sat, 19 Mar 2011 17:55:22 +0700