JqueryUI - ปรับขนาดได้

jQueryUI มีวิธีการปรับขนาด () เพื่อปรับขนาดองค์ประกอบ DOM ใด ๆ วิธีนี้ช่วยลดความยุ่งยากในการปรับขนาดองค์ประกอบซึ่งอาจต้องใช้เวลาและการเข้ารหัสใน HTML เป็นจำนวนมาก วิธีการปรับขนาด () จะแสดงไอคอนที่ด้านล่างขวาของรายการเพื่อปรับขนาด

ไวยากรณ์

resizable() วิธีการสามารถใช้ได้สองรูปแบบ -

  • $ (เลือกบริบท) .resizable (ตัวเลือก)วิธี

  • $ (เลือกบริบท) .resizable ( "การกระทำ" params)วิธี

$ (ตัวเลือกบริบท) วิธีปรับขนาดได้ (ตัวเลือก)

วิธีปรับขนาด (ตัวเลือก)ประกาศว่าองค์ประกอบ HTML สามารถปรับขนาดได้ ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุพฤติกรรมขององค์ประกอบที่เกี่ยวข้องเมื่อปรับขนาด

ไวยากรณ์

$(selector, context).resizable (options);

คุณสามารถระบุหนึ่งตัวเลือกขึ้นไปพร้อมกันโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).resizable({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงรายการตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1 ด้วย

ตัวเลือกนี้จะเป็นประเภทSelector , jQueryหรือใด ๆ DOM ธาตุ แสดงถึงองค์ประกอบที่ปรับขนาดเมื่อปรับขนาดวัตถุดั้งเดิม โดยค่าเริ่มต้นคือfalse.

Option - alsoResize

ตัวเลือกนี้สามารถเป็นชนิดSelector , jQueryหรือใด ๆ DOM ธาตุ แสดงถึงองค์ประกอบที่ปรับขนาดเมื่อปรับขนาดวัตถุดั้งเดิม โดยค่าเริ่มต้นคือfalse.

สิ่งนี้สามารถเป็นประเภท -

  • Selector - ประเภทนี้ระบุองค์ประกอบ DOM ที่จะเลือกจากเอกสาร DOM สำหรับการปรับขนาด

  • jQuery- ฟังก์ชันการโทรกลับจะถูกเรียกใช้สำหรับองค์ประกอบที่ปรับขนาดได้ในแต่ละหน้า ฟังก์ชันนี้ควรคืนค่าเป็นจริงหากมีการปรับขนาดองค์ประกอบ

  • Element - องค์ประกอบใน Document Object Model (DOM)

Syntax

$( ".selector" ).resizable({ alsoResize: "#identifier" });
2 เคลื่อนไหว

ตัวเลือกนี้เมื่อตั้งค่าเป็น trueใช้เพื่อเปิดใช้งานเอฟเฟ็กต์ภาพระหว่างการปรับขนาดเมื่อปล่อยปุ่มเมาส์ ค่าเริ่มต้นคือfalse (ไม่มีผลอะไร).

Option - animate

ตัวเลือกนี้เมื่อตั้งค่าเป็น trueใช้เพื่อเปิดใช้งานเอฟเฟ็กต์ภาพระหว่างการปรับขนาดเมื่อปล่อยปุ่มเมาส์ ค่าเริ่มต้นคือfalse (ไม่มีผลอะไร).

Syntax

$( ".selector" ).resizable({ animate: true });
3 animateDuration

ตัวเลือกนี้ใช้เพื่อกำหนดระยะเวลา (ในหน่วยมิลลิวินาที) ของเอฟเฟกต์การปรับขนาด ตัวเลือกนี้จะใช้เมื่อanimateตัวเลือกที่เป็นจริง โดยค่าเริ่มต้นคือ"slow".

Option - animateDuration

ตัวเลือกนี้ใช้เพื่อกำหนดระยะเวลา (ในหน่วยมิลลิวินาที) ของเอฟเฟกต์การปรับขนาด ตัวเลือกนี้จะใช้เมื่อanimateตัวเลือกที่เป็นจริง โดยค่าเริ่มต้นคือ"slow".

สิ่งนี้สามารถเป็นประเภท -

  • Number - ระบุระยะเวลาเป็นมิลลิวินาที

  • String - สิ่งนี้จะแยกระยะเวลาที่ตั้งชื่อเช่น "ช้า" หรือ "เร็ว"

Syntax

$( ".selector" ).resizable({ animateDuration: "fast" });
4 animateEasing

ตัวเลือกนี้ใช้เพื่อระบุว่าจะใช้การค่อยๆเปลี่ยนใดเมื่อใช้ไฟล์animateตัวเลือก โดยค่าเริ่มต้นคือ"swing".

Option - animateEasing

ตัวเลือกนี้ใช้เพื่อระบุว่าจะใช้การค่อยๆเปลี่ยนใดเมื่อใช้ไฟล์animateตัวเลือก โดยค่าเริ่มต้นคือ"swing".

ฟังก์ชัน Easing ระบุความเร็วที่ภาพเคลื่อนไหวดำเนินไปตามจุดต่างๆภายในภาพเคลื่อนไหว

Syntax

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 อัตราส่วน

ตัวเลือกนี้ใช้เพื่อระบุว่าจะคงอัตราส่วน (ความสูงและความกว้าง) ไว้สำหรับรายการหรือไม่ โดยค่าเริ่มต้นคือfalse.

Option - aspectRatio

ตัวเลือกนี้ใช้เพื่อระบุว่าจะคงอัตราส่วน (ความสูงและความกว้าง) ไว้สำหรับรายการหรือไม่ โดยค่าเริ่มต้นคือfalse.

สิ่งนี้สามารถเป็นประเภท -

  • Boolean- ค่านี้หากตั้งค่าเป็นจริงองค์ประกอบจะคงอัตราส่วนภาพเดิมไว้

  • Number - ระบุองค์ประกอบเพื่อรักษาอัตราส่วนเฉพาะระหว่างการปรับขนาด

Syntax

$( ".selector" ).resizable({ aspectRatio: true });
6 ซ่อนอัตโนมัติ

ตัวเลือกนี้ใช้เพื่อซ่อนไอคอนการขยายหรือที่จับยกเว้นเมื่อเมาส์อยู่เหนือรายการ โดยค่าเริ่มต้นคือfalse.

Option - autoHide

ตัวเลือกนี้ใช้เพื่อซ่อนไอคอนการขยายหรือที่จับยกเว้นเมื่อเมาส์อยู่เหนือรายการ โดยค่าเริ่มต้นคือfalse.

Syntax

$( ".selector" ).resizable({ autoHide: true });
7 ยกเลิก

ตัวเลือกนี้ใช้เพื่อป้องกันการปรับขนาดองค์ประกอบที่ระบุ โดยค่าเริ่มต้นคือinput,textarea,button,select,option.

Option - cancel

ตัวเลือกนี้ใช้เพื่อป้องกันการปรับขนาดองค์ประกอบที่ระบุ โดยค่าเริ่มต้นคือinput,textarea,button,select,option.

Syntax

$( ".selector" ).resizable({ cancel: ".cancel" });
8 การกักกัน

ตัวเลือกนี้ใช้ จำกัด การปรับขนาดขององค์ประกอบภายในองค์ประกอบหรือภูมิภาคที่ระบุ โดยค่าเริ่มต้นคือfalse.

Option - containment

ตัวเลือกนี้ใช้ จำกัด การปรับขนาดขององค์ประกอบภายในองค์ประกอบหรือภูมิภาคที่ระบุ โดยค่าเริ่มต้นคือfalse.

สิ่งนี้สามารถเป็นประเภท -

  • Selector - ประเภทนี้ระบุว่าองค์ประกอบที่ปรับขนาดได้จะถูกบรรจุไว้เฉพาะรายการแรกในรายการที่ตัวเลือกพบ

  • Element- ประเภทนี้ระบุองค์ประกอบ DOM ใด ๆ องค์ประกอบที่ปรับขนาดได้จะบรรจุอยู่ในกล่องขอบเขตขององค์ประกอบนี้

  • String- ค่าที่เป็นไปได้สำหรับประเภทนี้ - ผู้ปกครองและเอกสาร

Syntax

$( ".selector" ).resizable({ containment: "parent" });
9 ล่าช้า

ตัวเลือกนี้ใช้เพื่อตั้งค่าความอดทนหรือความล่าช้าในหน่วยมิลลิวินาที หลังจากนั้นการปรับขนาดหรือการกระจัดจะเริ่มขึ้น โดยค่าเริ่มต้นคือ0.

Option - delay

ตัวเลือกนี้ใช้เพื่อตั้งค่าความอดทนหรือความล่าช้าในหน่วยมิลลิวินาที หลังจากนั้นการปรับขนาดหรือการกระจัดจะเริ่มขึ้น โดยค่าเริ่มต้นคือ0.

Syntax

$( ".selector" ).resizable({ delay: 150 });
10 ปิดการใช้งาน

ตัวเลือกนี้จะปิดการใช้กลไกการปรับขนาดเมื่อกำหนดให้เป็นความจริง เมาส์จะไม่ปรับขนาดองค์ประกอบอีกต่อไปจนกว่าจะเปิดใช้งานกลไกโดยใช้ปุ่มปรับขนาดได้ ("enable") โดยค่าเริ่มต้นคือfalse.

Option - disabled

ตัวเลือกนี้จะปิดการใช้กลไกการปรับขนาดเมื่อกำหนดให้เป็นความจริง เมาส์จะไม่ปรับขนาดองค์ประกอบอีกต่อไปจนกว่าจะเปิดใช้งานกลไกโดยใช้ปุ่มปรับขนาดได้ ("enable") โดยค่าเริ่มต้นคือfalse.

Syntax

$( ".selector" ).resizable({ disabled: true });
11 ระยะทาง

ด้วยตัวเลือกนี้การปรับขนาดจะเริ่มต้นเมื่อเมาส์เลื่อนระยะทาง (พิกเซล) เท่านั้น โดยค่าเริ่มต้นคือ1 pixel. วิธีนี้สามารถช่วยป้องกันการปรับขนาดโดยไม่ตั้งใจเมื่อคลิกที่องค์ประกอบ

Option - distance

ด้วยตัวเลือกนี้การปรับขนาดจะเริ่มต้นเมื่อเมาส์เลื่อนระยะทาง (พิกเซล) เท่านั้น โดยค่าเริ่มต้นคือ1 pixel. วิธีนี้สามารถช่วยป้องกันการปรับขนาดโดยไม่ตั้งใจเมื่อคลิกที่องค์ประกอบ

Syntax

$( ".selector" ).resizable({ distance: 30 });
12 ผี

ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะแสดงองค์ประกอบตัวช่วยแบบกึ่งโปร่งใสสำหรับการปรับขนาด รายการโกสต์นี้จะถูกลบเมื่อปล่อยเมาส์ โดยค่าเริ่มต้นคือfalse.

Option - ghost

ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะแสดงองค์ประกอบตัวช่วยแบบกึ่งโปร่งใสสำหรับการปรับขนาด รายการโกสต์นี้จะถูกลบเมื่อปล่อยเมาส์ โดยค่าเริ่มต้นคือfalse.

Syntax

$( ".selector" ).resizable({ ghost: true });
13 กริด

ตัวเลือกนี้เป็นประเภท Array [x, y] ซึ่งระบุจำนวนพิกเซลที่องค์ประกอบขยายในแนวนอนและแนวตั้งระหว่างการเคลื่อนเมาส์ โดยค่าเริ่มต้นคือfalse.

Option - grid

ตัวเลือกนี้เป็นประเภท Array [x, y] ซึ่งระบุจำนวนพิกเซลที่องค์ประกอบขยายในแนวนอนและแนวตั้งระหว่างการเคลื่อนเมาส์ โดยค่าเริ่มต้นคือfalse.

Syntax

$( ".selector" ).resizable({ grid: [ 20, 10 ] });
14 จัดการ

ตัวเลือกนี้เป็นสตริงอักขระที่ระบุว่าด้านใดหรือมุมใดที่สามารถปรับขนาดได้ โดยค่าเริ่มต้นคือe, s, se.

Option - handles

ตัวเลือกนี้เป็นสตริงอักขระที่ระบุว่าด้านใดหรือมุมใดที่สามารถปรับขนาดได้ ค่าที่เป็นไปได้คือn, e, sและwสำหรับทั้งสี่ด้านและne, se, nwและswสำหรับมุมทั้งสี่ ตัวอักษรn, e, sและwแทนจุดสำคัญทั้งสี่ (เหนือใต้ตะวันออกและตะวันตก)

โดยค่าเริ่มต้นคือ e, s, se.

Syntax

$( ".selector" ).resizable({ handles: "n, e, s, w" });
15 ผู้ช่วย

ตัวเลือกนี้ใช้เพื่อเพิ่มคลาส CSS เพื่อจัดรูปแบบองค์ประกอบที่จะปรับขนาด เมื่อองค์ประกอบถูกปรับขนาดองค์ประกอบ <div> ใหม่จะถูกสร้างขึ้นซึ่งเป็นองค์ประกอบที่ถูกปรับขนาด (คลาส ui-resizable-helper) เมื่อการปรับขนาดเสร็จสมบูรณ์องค์ประกอบดั้งเดิมจะถูกปรับขนาดและองค์ประกอบ <div> จะหายไป โดยค่าเริ่มต้นคือfalse.

Option - helper

ตัวเลือกนี้ใช้เพื่อเพิ่มคลาส CSS เพื่อจัดรูปแบบองค์ประกอบที่จะปรับขนาด เมื่อองค์ประกอบถูกปรับขนาดองค์ประกอบ <div> ใหม่จะถูกสร้างขึ้นซึ่งเป็นองค์ประกอบที่ถูกปรับขนาด (คลาส ui-resizable-helper) เมื่อการปรับขนาดเสร็จสมบูรณ์องค์ประกอบดั้งเดิมจะถูกปรับขนาดและองค์ประกอบ <div> จะหายไป โดยค่าเริ่มต้นคือfalse.

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 สูงสุด

ตัวเลือกนี้ใช้เพื่อตั้งค่าความสูงสูงสุดที่ควรปรับขนาดได้ให้ปรับขนาดได้ โดยค่าเริ่มต้นคือnull.

Option - maxHeight

ตัวเลือกนี้ใช้เพื่อตั้งค่าความสูงสูงสุดที่ควรปรับขนาดได้ให้ปรับขนาดได้ โดยค่าเริ่มต้นคือnull.

Syntax

$( ".selector" ).resizable({ maxHeight: 300 });
17 maxWidth

ตัวเลือกนี้ใช้เพื่อตั้งค่าความกว้างสูงสุดที่สามารถปรับขนาดได้ควรอนุญาตให้ปรับขนาดได้ โดยค่าเริ่มต้นคือnull.

Option - maxWidth

ตัวเลือกนี้ใช้เพื่อตั้งค่าความกว้างสูงสุดที่สามารถปรับขนาดได้ควรอนุญาตให้ปรับขนาดได้ โดยค่าเริ่มต้นคือnull.

Syntax

$( ".selector" ).resizable({ maxWidth: 300 });
18 ขั้นต่ำ

ตัวเลือกนี้ใช้เพื่อกำหนดความสูงขั้นต่ำที่สามารถปรับขนาดได้ควรได้รับอนุญาตให้ปรับขนาดได้ โดยค่าเริ่มต้นคือ10.

Option - minHeight

ตัวเลือกนี้ใช้เพื่อกำหนดความสูงขั้นต่ำที่สามารถปรับขนาดได้ควรได้รับอนุญาตให้ปรับขนาดได้ โดยค่าเริ่มต้นคือ10.

Syntax

$( ".selector" ).resizable({ minHeight: 150 });
19 minWidth

ตัวเลือกนี้ใช้เพื่อกำหนดความกว้างขั้นต่ำที่สามารถปรับขนาดได้ควรได้รับอนุญาตให้ปรับขนาดได้ โดยค่าเริ่มต้นคือ10.

Option - minWidth

ตัวเลือกนี้ใช้เพื่อกำหนดความกว้างขั้นต่ำที่สามารถปรับขนาดได้ควรได้รับอนุญาตให้ปรับขนาดได้ โดยค่าเริ่มต้นคือ10.

สิ่งนี้สามารถเป็นประเภท -

Syntax

$( ".selector" ).resizable({ minWidth: 150 });

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานของฟังก์ชันการปรับขนาด

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงตัวอย่างง่ายๆของฟังก์ชันการทำงานที่ปรับขนาดได้โดยไม่ต้องส่งพารามิเตอร์ไปยังไฟล์ resizable() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
      </div>
  </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลากขอบสี่เหลี่ยมเพื่อปรับขนาด

การใช้ภาพเคลื่อนไหวและผี

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้สองตัวเลือก animate และ ghost ในฟังก์ชั่นปรับขนาดของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-2,#resizable-3 { 
            width: 150px; height: 150px; padding: 0.5em;
            text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-2" ).resizable({
               animate: true
            });
            $( "#resizable-3" ).resizable({
               ghost: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-2" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">
            Pull my edges and Check the animation!!
         </h3>
      </div><br>
      <div id = "resizable-3" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm ghost!!</h3>
      </div> 
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลากขอบสี่เหลี่ยมเพื่อปรับขนาดและดูเอฟเฟกต์ของตัวเลือกภาพเคลื่อนไหวและโกสต์

การใช้การกักกัน minHeight และ minWidth

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก containment, minHeight และ minWidth ในฟังก์ชั่นปรับขนาดของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #container-1 { width: 300px; height: 300px; }
         #resizable-4 {background-position: top left; 
            width: 150px; height: 150px; } 
         #resizable-4, #container { padding: 0.5em; }  
      </style>

      <script>
         $(function() {
            $( "#resizable-4" ).resizable({
               containment: "#container",
               minHeight: 70,
               minWidth: 100
            });
         });
      </script>
   </head>

   <body>
      <div id = "container" class = "ui-widget-content">
         <div id = "resizable-4" class = "ui-state-active">
            <h3 class = "ui-widget-header">
               Resize contained to this container
            </h3>
         </div>
      </div> 
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลากขอบสี่เหลี่ยมเพื่อปรับขนาดคุณไม่สามารถปรับขนาดเกินคอนเทนเนอร์หลักได้

การใช้การหน่วงเวลาระยะทางและซ่อนอัตโนมัติ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก delay, distance และ autoHide ในฟังก์ชั่นปรับขนาดของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            -right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-5" ).resizable({
               delay: 1000
            });

            $( "#resizable-6" ).resizable({
               distance: 40
            });
            $( "#resizable-7" ).resizable({
               autoHide: true
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-5" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts after delay of 1000ms
         </h3>
      </div><br>
      <div id = "resizable-6" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize starts at distance of 40px
         </h3>
      </div><br>
      <div id = "resizable-7" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Hover over me to see the magnification icon!
         </h3>
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลากขอบสี่เหลี่ยมเพื่อปรับขนาดและคุณจะสังเกตได้ว่า -

  • กล่องสี่เหลี่ยมแรกจะปรับขนาดหลังจากความล่าช้า 1,000 มิลลิวินาที

  • กล่องสี่เหลี่ยมที่สองเริ่มปรับขนาดหลังจากที่เมาส์เลื่อนไป 40px

  • วางเมาส์บนกล่องสี่เหลี่ยมที่สามและไอคอนการขยายจะปรากฏขึ้น

การใช้ alsoResize

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก alsoResize ในฟังก์ชั่นปรับขนาดของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-8,#resizable-9{ width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-8" ).resizable({
               alsoResize: "#resizable-9"
            });
            $( "#resizable-9" ).resizable();
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-8" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize!!</h3>
      </div><br>
      <div id = "resizable-9" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I also get resized!!</h3>
      </div> 
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลากเส้นขอบสี่เหลี่ยมเพื่อปรับขนาดและคุณจะสังเกตเห็นว่ากล่องสี่เหลี่ยมที่สองปรับขนาดด้วยกล่องสี่เหลี่ยมแรกด้วย

การใช้ AspectRatio, Grid

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก aspectRatio และ grid ในฟังก์ชั่นปรับขนาดของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .square {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#resizable-10" ).resizable({
               aspectRatio: 10 / 3
            });

            $( "#resizable-11" ).resizable({
               grid: [50,20]
            });

         });
      </script>
   </head>
   
   <body>
      <div id = "resizable-10" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Resize with aspectRatio of 10/3
         </h3>
      </div>
      <div id = "resizable-11" class = "square ui-widget-content">
         <h3 class = "ui-widget-header">
            Snap me to the grid of [50,20]
         </h3>
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ลากเส้นขอบสี่เหลี่ยมเพื่อปรับขนาดกล่องสี่เหลี่ยมแรกจะปรับขนาดด้วยอัตราส่วนภาพ 10/3 และกรอบที่สองจะปรับขนาดด้วยเส้นตารางเป็น [50,20]

$ (ตัวเลือกบริบท) วิธีการปรับขนาดได้ ("การกระทำ", พารามิเตอร์)

วิธีปรับขนาดได้ ("action", params)สามารถดำเนินการกับองค์ประกอบที่ปรับขนาดได้เช่นอนุญาตหรือป้องกันฟังก์ชันการปรับขนาด การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ปิดการใช้งาน" เพื่อป้องกันการปรับขนาด) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

$(selector, context).resizable ("action", params);;

ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -

ซีเนียร์ การดำเนินการและคำอธิบาย
1 ทำลาย

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

Action - destroy

การกระทำนี้ทำลาย fubctionality ที่ปรับขนาดได้ขององค์ประกอบโดยสิ้นเชิง สิ่งนี้จะทำให้องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

$( ".selector" ).resizable("destroy");
2 ปิดการใช้งาน

การดำเนินการนี้ปิดใช้งานฟังก์ชันการปรับขนาดขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - disable

การดำเนินการนี้ปิดใช้งานฟังก์ชันการปรับขนาดขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

$( ".selector" ).resizable("disable");
3 เปิดใช้งาน

การดำเนินการนี้เปิดใช้งานฟังก์ชันการปรับขนาดขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - enable

การดำเนินการนี้เปิดใช้งานฟังก์ชันการปรับขนาดขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

$( ".selector" ).resizable("enable");
4 ตัวเลือก (optionName)

การดำเนินการนี้จะดึงค่าของที่ระบุOptionName ตัวเลือกนี้สอดคล้องกับหนึ่งในตัวเลือกที่ปรับขนาดได้ (ตัวเลือก)

Action - option( optionName )

การดำเนินการนี้จะดึงค่าของที่ระบุOptionName ตัวเลือกนี้สอดคล้องกับหนึ่งในตัวเลือกที่ปรับขนาดได้ (ตัวเลือก)

Syntax

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 ตัวเลือก ()

รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกที่ปรับขนาดได้ในปัจจุบัน สิ่งนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - option()

รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกที่ปรับขนาดได้ในปัจจุบัน สิ่งนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

var options = $( ".selector" ).resizable( "option" );
6 ตัวเลือก (optionName ค่า)

การกระทำนี้จะตั้งค่าของตัวเลือกที่ปรับขนาดได้ที่มีการระบุOptionName ตัวเลือกนี้สอดคล้องกับหนึ่งในตัวเลือกที่ปรับขนาดได้ (ตัวเลือก)

Action - option( optionName, value )

การกระทำนี้จะตั้งค่าของตัวเลือกที่ปรับขนาดได้ที่มีการระบุOptionName ตัวเลือกนี้สอดคล้องกับหนึ่งในตัวเลือกที่ปรับขนาดได้ (ตัวเลือก)

Syntax

$( ".selector" ).resizable( "option", "disabled", true );
7 option (ตัวเลือก)

การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับการปรับขนาด

Action - option( options )

การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับการปรับขนาด

Syntax

$( ".selector" ).resizable( "option", { disabled: true } );
8 วิดเจ็ต ()

การดำเนินการนี้ส่งคืนวัตถุjQueryที่มีองค์ประกอบที่ปรับขนาดได้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - widget()

การดำเนินการนี้ส่งคืนวัตถุjQueryที่มีองค์ประกอบที่ปรับขนาดได้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

var widget = $( ".selector" ).resizable( "widget" );

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เมธอดdestroy ()และdisable ()

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-12,#resizable-13 { width: 150px; height: 150px; 
            padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-12" ).resizable();
            $( "#resizable-12" ).resizable('disable');
            $( "#resizable-13" ).resizable();
            $( "#resizable-13" ).resizable('destroy');	
         });
      </script>
   </head>

   <body>
      <!-- HTML --> 
      <div id = "resizable-12" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm disable!!</h3>
      </div><br>
      <div id = "resizable-13" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">I'm Destroyed!!</h3>
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ -

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

การจัดการเหตุการณ์ในองค์ประกอบที่ปรับขนาดได้

นอกเหนือจากวิธีการ (ตัวเลือก) ที่ปรับขนาดได้ซึ่งเราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีการเหตุการณ์ที่จะเรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -

ซีเนียร์ วิธีการและคำอธิบายเหตุการณ์
1 สร้าง (เหตุการณ์, UI)

เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างองค์ประกอบที่ปรับขนาดได้

Event - create(event, ui)

เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสร้างองค์ประกอบที่ปรับขนาดได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 ปรับขนาด (เหตุการณ์, UI)

เหตุการณ์นี้จะเกิดขึ้นเมื่อลากตัวจัดการขององค์ประกอบที่ปรับขนาดได้

Event - resize(event, ui)

เหตุการณ์นี้จะเกิดขึ้นเมื่อลากตัวจัดการขององค์ประกอบที่ปรับขนาดได้ ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ -

  • element - วัตถุ jQuery ที่แสดงถึงองค์ประกอบที่ปรับขนาดได้

  • helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่กำลังปรับขนาด

  • originalElement - วัตถุ jQuery ที่แสดงถึงองค์ประกอบดั้งเดิมก่อนที่จะห่อ

  • originalPosition - ตำแหน่งที่แสดงเป็น {left, top} ก่อนการปรับขนาดจะถูกปรับขนาด

  • originalSize - ขนาดที่แสดงเป็น {width, height} ก่อนการปรับขนาดจะถูกปรับขนาด

  • position - ตำแหน่งปัจจุบันแสดงเป็น {left, top}

  • size - ขนาดปัจจุบันแสดงเป็น {width, height}

Syntax

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 เริ่มต้น (เหตุการณ์, UI)

เหตุการณ์นี้ถูกทริกเกอร์เมื่อเริ่มการดำเนินการปรับขนาด

Event - start(event, ui)

เหตุการณ์นี้ถูกทริกเกอร์เมื่อเริ่มการดำเนินการปรับขนาด ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ -

  • element - วัตถุ jQuery ที่แสดงถึงองค์ประกอบที่ปรับขนาดได้

  • helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่กำลังปรับขนาด

  • originalElement - วัตถุ jQuery ที่แสดงถึงองค์ประกอบดั้งเดิมก่อนที่จะห่อ

  • originalPosition - ตำแหน่งที่แสดงเป็น {left, top} ก่อนการปรับขนาดจะถูกปรับขนาด

  • originalSize - ขนาดที่แสดงเป็น {width, height} ก่อนการปรับขนาดจะถูกปรับขนาด

  • position - ตำแหน่งปัจจุบันแสดงเป็น {left, top}

  • size - ขนาดปัจจุบันแสดงเป็น {width, height}

Syntax

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 หยุด (เหตุการณ์, UI)

เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสิ้นสุดการดำเนินการปรับขนาด

Event - stop(event, ui)

เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสิ้นสุดการดำเนินการปรับขนาด ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ -

  • element - วัตถุ jQuery ที่แสดงถึงองค์ประกอบที่ปรับขนาดได้

  • helper - วัตถุ jQuery ที่เป็นตัวแทนของตัวช่วยที่กำลังปรับขนาด

  • originalElement - วัตถุ jQuery ที่แสดงถึงองค์ประกอบดั้งเดิมก่อนที่จะห่อ

  • originalPosition - ตำแหน่งที่แสดงเป็น {left, top} ก่อนการปรับขนาดจะถูกปรับขนาด

  • originalSize - ขนาดที่แสดงเป็น {width, height} ก่อนการปรับขนาดจะถูกปรับขนาด

  • position - ตำแหน่งปัจจุบันแสดงเป็น {left, top}

  • size - ขนาดปัจจุบันแสดงเป็น {width, height}

Syntax

$( ".selector" ).resizable({
stop: function( event, ui ) {}
});

ตัวอย่าง

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Resizable functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable-14{ width: 150px; height: 150px; 
         padding: 0.5em;text-align: center; margin: 0; }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#resizable-14" ).resizable({
               create: function( event, ui ) {
                  $("#resizable-15").text ("I'm Created!!");
               },
               resize: function (event, ui) {
                  $("#resizable-16").text ("top = " + ui.position.top +
                     ", left = " + ui.position.left +
                     ", width = " + ui.size.width +
                     ", height = " + ui.size.height);
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "resizable-14" class = "ui-widget-content"> 
         <h3 class = "ui-widget-header">Resize !!</h3>
      </div><br>
      <span id = "resizable-15"></span><br>
      <span id = "resizable-16"></span>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML resizeexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับ javascript ควรเห็นผลลัพธ์ต่อไปนี้ -

ลากกล่องสี่เหลี่ยมและคุณจะเห็นผลลัพธ์ปรากฏขึ้นในเหตุการณ์ปรับขนาด