มีรูปแบบ syntax ดังนี้
โค้ด: เลือกทั้งหมด
$(selector).resize(function)
Return Value: เมธอดนี้จะคืนองค์ประกอบที่เลือกพร้อมเพิ่มขนาดของมัน
ตัวอย่างโค้ด HTML และ Javascript ดังนี้
โค้ด: เลือกทั้งหมด
<!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>
ก่อนยังไม่ได้กดอะไร หลังจากคลิก 2 ครั้ง“ ctrl” และปุ่ม“ +” พร้อมกันในแป้นพิมพ์ จากผลลัพธ์จะเห็นว่า ขนาดหน้าจอจะใหญ่ขึ้น ตัวเลขจะเพิ่มตามจำนวนครั้งที่เรากดปรับขนาดหน้าจอ
เราสามารถนำประยุกต์ใช้เพื่อดูรายละเอียด การปรับหน้าจอได้ครับ
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery/Ajax
-แลกเปลี่ยนความรู้ jQuery/Ajax
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP