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

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

ไวยากรณ์

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

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

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

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

ไวยากรณ์

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

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

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

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


$( ".selector" ).resizable({ alsoResize: "#identifier" });
$( ".selector" ).resizable({ animate: true });
$( ".selector" ).resizable({ animateDuration: "fast" });
$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
$( ".selector" ).resizable({ aspectRatio: true });
$( ".selector" ).resizable({ autoHide: true });
$( ".selector" ).resizable({ cancel: ".cancel" });
$( ".selector" ).resizable({ containment: "parent" });
$( ".selector" ).resizable({ delay: 150 });
$( ".selector" ).resizable({ disabled: true });
$( ".selector" ).resizable({ distance: 30 });
$( ".selector" ).resizable({ ghost: true });
$( ".selector" ).resizable({ grid: [ 20, 10 ] });
$( ".selector" ).resizable({ handles: "n, e, s, w" });
$( ".selector" ).resizable({ helper: "resizable-helper" });
$( ".selector" ).resizable({ maxHeight: 300 });
$( ".selector" ).resizable({ maxWidth: 300 });
$( ".selector" ).resizable({ minHeight: 150 });
$( ".selector" ).resizable({ minWidth: 150 });

ซีเนียร์	ตัวเลือกและคำอธิบาย
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>

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

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

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก 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>

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

กล่องสี่เหลี่ยมแรกจะปรับขนาดหลังจากความล่าช้า 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>

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

การใช้ 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>

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

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

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

ไวยากรณ์

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

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


$( ".selector" ).resizable("destroy");
$( ".selector" ).resizable("disable");
$( ".selector" ).resizable("enable");
var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
var options = $( ".selector" ).resizable( "option" );
$( ".selector" ).resizable( "option", "disabled", true );
$( ".selector" ).resizable( "option", { disabled: true } );
var widget = $( ".selector" ).resizable( "widget" );

ซีเนียร์	การดำเนินการและคำอธิบาย
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 ควรเห็นผลลัพธ์ต่อไปนี้ -

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