เช่น jQuery UI - ซูม (ปรับขนาดได้)

ก่อนหน้านี้: ตัวอย่างเช่น jQuery UI - สถานที่ (droppable)

ถัดไป: jQuery UI เช่น - เลือก (เลือกได้)

ใช้เมาส์เพื่อเปลี่ยนขนาดขององค์ประกอบ

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการทำงานร่วมกันปรับขนาดได้ดูเอกสาร API เครื่องมือปรับขนาดได้ (คน Widget ที่ปรับขนาดได้)

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

เปิดใช้งานฟังก์ชั่นปรับขนาดได้ในองค์ประกอบ DOM ใด ๆ ลากเมาส์ไปที่ขอบด้านขวาหรือด้านล่างความกว้างที่ต้องการหรือความสูง

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - ฟังก์ชั่นเริ่มต้น </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ();
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ซูม (ปรับขนาดได้) </ h3>
</ div>
 
 
</ body>
</ html>

นิเมชั่น

ใช้ animate ตัวเลือก (บูลีน) ช่วยให้การปรับพฤติกรรมของการเคลื่อนไหว เมื่อตัวเลือกนี้จะถูกตั้งค่าเป็นจริงลากร่างไปยังตำแหน่งที่ต้องการหยุดลากเมื่อองค์ประกอบที่มีการเคลื่อนไหวในการปรับขนาด

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - อะนิเมะ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  .ui-ปรับขนาดได้ผู้ช่วย {ชายแดน: 1px สีเทาประ;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      ภาพเคลื่อนไหว: จริง
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> นิเมชั่น </ h3>
</ div>
 
 
</ body>
</ html>

จำกัด พื้นที่การซูม

กำหนดขอบเขตการปรับ ใช้ containment ตัวเลือกในการระบุผู้ปกครององค์ประกอบ DOM หรือเลือก jQuery เช่น 'เอกสาร.

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - จำกัด พื้นที่การซูม </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  ภาชนะ # {width: 300px; ความสูง: 300px;}
  H3 ภาชนะ # {text-align: ศูนย์; margin: 0; margin ล่าง: 10px;}
  #resizable {พื้นหลังตำแหน่ง: บนซ้ายความกว้าง: 150px; ความสูง: 150px;}
  #resizable, ภาชนะ # {padding: 0.5em;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      บรรจุ: "ภาชนะ #"
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ตู้คอนเทนเนอร์" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ขีด จำกัด </ h3>
  <div id = "ปรับขนาด" class = "UI ของรัฐที่ใช้งาน">
    <ระดับ H3 = "UI-Widget หัว"> ซูม (ปรับขนาดได้) </ h3>
  </ div>
</ div>
 
 
</ body>
</ html>

เริ่มต้นล่าช้า

โดย delay มิลลิวินาทีล่าช้าเริ่มปรับตัวเลือก โดย distance ตัวเลือกที่ถูกกดและลากเคอร์เซอร์ไปพิกเซลที่ระบุไว้ก่อนที่จะให้ปรับ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - เริ่มต้นล่าช้า </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable # resizable2 {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  H3 #resizable # resizable2 h3 {text-align: ศูนย์; margin: 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      ล่าช้า 1000
    });
 
    $ ( "# Resizable2") .resizable ({
      ระยะทาง: 40
    });
  });
  </ script>
</ head>
<body>
 
<ระดับ H3 = "เอกสาร"> หน่วงเวลา (MS): </ h3>
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> เวลา </ h3>
</ div>
 
<ระดับ H3 = "เอกสาร"> ล่าช้าระยะทาง (px): </ h3>
<div id = "resizable2" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ระยะทาง </ h3>
</ div>
 
 
</ body>
</ html>

ผู้ช่วย

โดยการตั้งค่า helper ตัวเลือกที่จะคลาส CSS เมื่อซูมเพื่อแสดงเฉพาะองค์ประกอบรูปร่าง

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - ผู้ช่วย </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  .ui-ปรับขนาดได้ผู้ช่วย {ชายแดน: 2px ประ # 00F;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      ผู้ช่วย "UI-ปรับขนาดได้ผู้ช่วย"
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ช่วย </ h3>
</ div>
 
 
</ body>
</ html>

ขนาดสูงสุด / ต่ำสุด

ใช้ maxHeight , maxWidth , minHeight และ minWidth ตัวเลือก จำกัด สูงสุดหรือต่ำสุดองค์ประกอบความสูงปรับขนาดหรือความกว้าง

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - สูงสุด / ขนาดต่ำสุด </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 200px; ความสูง: 150px; padding: 5px;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      maxHeight: 250,
      maxWidth: 350,
      minHeight: 150,
      minWidth: 200
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ซูมเข้า / ออก </ h3>
</ div>
 
 
</ body>
</ html>

รักษาอัตราส่วน

รักษาอัตราส่วนปัจจุบันหรือตั้งค่าขีด จำกัด ใหม่ในการปรับอัตราส่วน การตั้งค่า aspectRatio ตัวเลือกที่เป็นความจริงและเลือกที่จะส่งมอบอัตราใหม่ (ตัวอย่างเช่น 4/3)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - รักษาอัตราส่วน </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 160px; ความสูง: 90px; padding: 0.5em;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      aspectRatio: 16/9
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> รักษาอัตราส่วน </ h3>
</ div>
 
 
</ body>
</ html>

สแน็ปไปยังตาราง

องค์ประกอบที่ปรับขนาดได้สอดคล้องกับตาราง ตาม grid ตัวเลือกขนาดที่จะตั้งเซลล์ตาราง (พิกเซลสูงและความกว้าง)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - ถ่ายไปยังตาราง </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      ตาราง: 50
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ตาราง </ h3>
</ div>
 
 
</ body>
</ html>

ซิงโครซูม

โดยการคลิกและลากองค์ประกอบของขอบเพื่อปรับขนาดองค์ประกอบหลายคนพร้อมกัน เพื่อ alsoResize ตัวเลือกผ่านตัวเลือกที่ใช้ร่วมกัน

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - ซิงโครซูม </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {พื้นหลังตำแหน่ง: บนซ้าย;}
  #resizable, #also {กว้าง: 150px; ความสูง: 120px; padding: 0.5em;}
  H3 #resizable, #also h3 {text-align: ศูนย์; margin: 0;}
  #also {ขอบด้านบน: 1em;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      alsoResize: "#also"
    });
    $ ( "#also") .resizable ();
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget หัว">
  <ระดับ H3 = "UI ของรัฐที่ใช้งาน"> ซูม </ h3>
</ div>
 
<div id = "ยัง" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ซูมซิงค์ </ h3>
</ div>
 
 
</ body>
</ html>

กล่องข้อความ

กล่องข้อความที่ปรับขนาดได้

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - ตู้ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  .ui-ปรับขนาด-SE {
    ด้านล่าง: 17px;
  }
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      จับ "SE"
    });
  });
  </ script>
</ head>
<body>
 
<textarea id = "ปรับขนาด" แถว = "5" cols = "20"> </ textarea>
 
 
</ body>
</ html>

การแสดงผลภาพ

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

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI การปรับ (ปรับขนาดได้) - การแสดงผลภาพ </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
  <style>
  #resizable {กว้าง: 150px; ความสูง: 150px; padding: 0.5em;}
  H3 #resizable {text-align: ศูนย์; margin: 0;}
  .ui-ปรับขนาด-ผี {ชายแดน: 1px สีเทาประ;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#resizable") .resizable ({
      ผี: จริง
    });
  });
  </ script>
</ head>
<body>
 
<div id = "ปรับขนาด" class = "UI-Widget เนื้อหา">
  <ระดับ H3 = "UI-Widget หัว"> ผี </ h3>
</ div>
 
 
</ body>
</ html>