เมธอด 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 ใช้เมื่อหน้าต่างเบราว์เซอร์เปลี่ยนขนาด

Postby 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 651 times

หลังจากคลิก 2 ครั้ง“ ctrl” และปุ่ม“ +” พร้อมกันในแป้นพิมพ์
2019-04-23_18-20-29.jpg
2019-04-23_18-20-29.jpg (11.68 KiB) Viewed 651 times

จากผลลัพธ์จะเห็นว่า ขนาดหน้าจอจะใหญ่ขึ้น ตัวเลขจะเพิ่มตามจำนวนครั้งที่เรากดปรับขนาดหน้าจอ
เราสามารถนำประยุกต์ใช้เพื่อดูรายละเอียด การปรับหน้าจอได้ครับ

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

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests