เมธอด resize() ใน jQuery ใช้เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนขนาด

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

เมธอด resize() ใน jQuery ใช้เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนขนาด

Post by abdkode » 23/04/2019 7:00 pm

เมธอด resize() เป็นเมธอดใน jQuery ซึ่งจะใช้เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนขนาด
มีรูปแบบ syntax ดังนี้

Code: Select all

$(selector).resize(function)
พารามิเตอร์ : เมธอดนี้จะรับ function แค่พารามิเตอร์เดียวซึ่งเป็นตัวเลือกคือมีหรือไม่มีก็ได้ มันจะถูกใช้เพื่อระบุฟังก์ชั่นที่จะทำงานเมื่อมีการเรียกเหตุการณ์การปรับขนาด
Return Value: เมธอดนี้จะคืนองค์ประกอบที่เลือกพร้อมเพิ่มขนาดของมัน

ตัวอย่างโค้ด HTML และ Javascript ดังนี้

Code: Select all

<!DOCTYPE html> 
<html> 
	<head> 
		<title>The resize method</title> 
		<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
		</script> 
		
		<!-- jQuery code to show the working of this method -->
		<script> 
			x = 0; 
			$(document).ready(function() { 
				$(window).resize(function() { 
					$("p").text(x += 1); 
				}); 
			}); 
		</script> 
		<style> 
			div { 
				width: 180px; 
				height: 120px; 
				padding: 20px; 
				border: 2px solid green; 
				font-size: 20px; 
			} 
		</style> 
	</head> 
	
	<body> 
		<div> 
			<!-- press "ctrl" and "+" key together 
			and see the effect -->
			Welcome to Mindphp! 
			<br> 
			<p>0</p> 
			times. 
		</div> 
	</body> 
</html> 
ผลลัพธ์เมื่อเปิดกับเบราเซอร์
ก่อนยังไม่ได้กดอะไร
2019-04-23_18-19-50.jpg
2019-04-23_18-19-50.jpg (7.69 KiB) Viewed 766 times
หลังจากคลิก 2 ครั้ง“ ctrl” และปุ่ม“ +” พร้อมกันในแป้นพิมพ์
2019-04-23_18-20-29.jpg
2019-04-23_18-20-29.jpg (11.68 KiB) Viewed 766 times
จากผลลัพธ์จะเห็นว่า ขนาดหน้าจอจะใหญ่ขึ้น ตัวเลขจะเพิ่มตามจำนวนครั้งที่เรากดปรับขนาดหน้าจอ
เราสามารถนำประยุกต์ใช้เพื่อดูรายละเอียด การปรับหน้าจอได้ครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery/Ajax
-แลกเปลี่ยนความรู้ jQuery/Ajax
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 36 guests