JqueryUI - Có thể thay đổi kích thước

jQueryUI cung cấp phương thức resizable () để thay đổi kích thước bất kỳ phần tử DOM nào. Phương pháp này đơn giản hóa việc thay đổi kích thước của phần tử mà nếu không sẽ mất nhiều thời gian và mã hóa trong HTML. Phương thức resizable () hiển thị một biểu tượng ở dưới cùng bên phải của mục để thay đổi kích thước.

Cú pháp

Các resizable() phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .resizable (tùy chọn) Phương thức

  • $ (selector, ngữ cảnh) .resizable ( "hành động", params) Phương pháp

$ (bộ chọn, ngữ cảnh) .resizable (tùy chọn) Phương thức

Phương thức có thể thay đổi kích thước (tùy chọn) tuyên bố rằng một phần tử HTML có thể được thay đổi kích thước. Các tùy chọn tham số là một đối tượng mà quy định cụ thể các hành vi của các yếu tố có liên quan khi thay đổi kích thước.

Cú pháp

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

Bạn có thể cung cấp một hoặc nhiều tùy chọn tại một thời điểm sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau:

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

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Tùy chọn & Mô tả
1 alsoResize

Tùy chọn này thuộc loại Bộ chọn , jQuery hoặc bất kỳ Phần tử DOM nào . Nó đại diện cho các phần tử cũng thay đổi kích thước khi thay đổi kích thước đối tượng ban đầu. Theo mặc định, giá trị của nó làfalse.

Option - alsoResize

Tùy chọn này có thể là loại Selector , jQuery hoặc bất kỳ Phần tử DOM nào . Nó đại diện cho các phần tử cũng thay đổi kích thước khi thay đổi kích thước đối tượng ban đầu. Theo mặc định, giá trị của nó làfalse.

Điều này có thể thuộc loại -

  • Selector - Kiểu này cho biết các phần tử DOM được chọn từ tài liệu DOM để thay đổi kích thước.

  • jQuery- Một hàm gọi lại sẽ được gọi cho mỗi phần tử có thể thay đổi kích thước trên trang. Hàm này sẽ trả về true nếu phần tử được thay đổi kích thước.

  • Element - Một phần tử trong Mô hình Đối tượng Tài liệu (DOM).

Syntax

$( ".selector" ).resizable({ alsoResize: "#identifier" });
2 hoạt hình

Tùy chọn này khi được đặt thành trueđược sử dụng để kích hoạt hiệu ứng hình ảnh trong quá trình thay đổi kích thước khi thả nút chuột. Giá trị mặc định làfalse (không ảnh hưởng).

Option - animate

Tùy chọn này khi được đặt thành trueđược sử dụng để kích hoạt hiệu ứng hình ảnh trong quá trình thay đổi kích thước khi thả nút chuột. Giá trị mặc định làfalse (không ảnh hưởng).

Syntax

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

Tùy chọn này được sử dụng để đặt thời lượng (tính bằng mili giây) của hiệu ứng thay đổi kích thước. Tùy chọn này chỉ được sử dụng khianimate tùy chọn là đúng . Theo mặc định, giá trị của nó là"slow".

Option - animateDuration

Tùy chọn này được sử dụng để đặt thời lượng (tính bằng mili giây) của hiệu ứng thay đổi kích thước. Tùy chọn này chỉ được sử dụng khianimatetùy chọn là đúng . Theo mặc định, giá trị của nó là"slow".

Điều này có thể thuộc loại -

  • Number - Điều này chỉ định thời lượng tính bằng mili giây

  • String - Điều này phân biệt thời lượng được đặt tên, chẳng hạn như "chậm" hoặc "nhanh".

Syntax

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

Tùy chọn này được sử dụng để xác định nới lỏng để áp dụng khi sử dụnganimateLựa chọn. Theo mặc định, giá trị của nó là"swing".

Option - animateEasing

Tùy chọn này được sử dụng để xác định nới lỏng để áp dụng khi sử dụnganimateLựa chọn. Theo mặc định, giá trị của nó là"swing".

Các chức năng làm dịu chỉ định tốc độ mà hoạt ảnh tiến triển tại các điểm khác nhau trong hoạt ảnh.

Syntax

$( ".selector" ).resizable({ animateEasing: "easeOutBounce" });
5 khía cạnh

Tùy chọn này được sử dụng để cho biết có giữ tỷ lệ khung hình (chiều cao và chiều rộng) cho mục hay không. Theo mặc định, giá trị của nó làfalse.

Option - aspectRatio

Tùy chọn này được sử dụng để cho biết có giữ tỷ lệ khung hình (chiều cao và chiều rộng) cho mục hay không. Theo mặc định, giá trị của nó làfalse.

Điều này có thể thuộc loại -

  • Boolean- Giá trị này nếu được đặt thành true , phần tử sẽ duy trì tỷ lệ co ban đầu.

  • Number - Điều này chỉ định phần tử để duy trì một tỷ lệ co cụ thể trong quá trình thay đổi kích thước.

Syntax

$( ".selector" ).resizable({ aspectRatio: true });
6 autoHide

Tùy chọn này được sử dụng để ẩn biểu tượng phóng đại hoặc tay cầm, ngoại trừ khi chuột ở trên mục. Theo mặc định, giá trị của nó làfalse.

Option - autoHide

Tùy chọn này được sử dụng để ẩn biểu tượng phóng đại hoặc tay cầm, ngoại trừ khi chuột ở trên mục. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).resizable({ autoHide: true });
7 hủy bỏ

Tùy chọn này được sử dụng để ngăn thay đổi kích thước trên các phần tử được chỉ định. Theo mặc định, giá trị của nó làinput,textarea,button,select,option.

Option - cancel

Tùy chọn này được sử dụng để ngăn thay đổi kích thước trên các phần tử được chỉ định. Theo mặc định, giá trị của nó làinput,textarea,button,select,option.

Syntax

$( ".selector" ).resizable({ cancel: ".cancel" });
số 8 sự ngăn chặn

Tùy chọn này được sử dụng để hạn chế thay đổi kích thước của các phần tử trong một phần tử hoặc vùng được chỉ định. Theo mặc định, giá trị của nó làfalse.

Option - containment

Tùy chọn này được sử dụng để hạn chế thay đổi kích thước của các phần tử trong một phần tử hoặc vùng được chỉ định. Theo mặc định, giá trị của nó làfalse.

Điều này có thể thuộc loại -

  • Selector - Loại này chỉ ra rằng phần tử có thể thay đổi kích thước sẽ chỉ được chứa trong mục đầu tiên trong danh sách được tìm thấy bởi bộ chọn.

  • Element- Loại này chỉ ra bất kỳ phần tử DOM nào. Phần tử có thể thay đổi kích thước sẽ được chứa trong hộp giới hạn của phần tử này.

  • String- Giá trị có thể có cho kiểu này là - cha và tài liệu .

Syntax

$( ".selector" ).resizable({ containment: "parent" });
9 sự chậm trễ

Tùy chọn này được sử dụng để đặt dung sai hoặc độ trễ tính bằng mili giây. Thay đổi kích thước hoặc thay đổi sẽ bắt đầu sau đó. Theo mặc định, giá trị của nó là 0.

Option - delay

Tùy chọn này được sử dụng để đặt dung sai hoặc độ trễ tính bằng mili giây. Thay đổi kích thước hoặc thay đổi sẽ bắt đầu sau đó. Theo mặc định, giá trị của nó là 0.

Syntax

$( ".selector" ).resizable({ delay: 150 });
10 tàn tật

Tùy chọn này vô hiệu hóa cơ chế thay đổi kích thước khi được đặt thành true . Chuột không còn thay đổi kích thước các phần tử, cho đến khi cơ chế được kích hoạt, sử dụng có thể thay đổi kích thước ("enable"). Theo mặc định, giá trị của nó làfalse.

Option - disabled

Tùy chọn này vô hiệu hóa cơ chế thay đổi kích thước khi được đặt thành true . Chuột không còn thay đổi kích thước các phần tử, cho đến khi cơ chế được kích hoạt, sử dụng có thể thay đổi kích thước ("enable"). Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).resizable({ disabled: true });
11 khoảng cách

Với tùy chọn này, việc thay đổi kích thước chỉ bắt đầu khi chuột di chuyển một khoảng cách (pixel). Theo mặc định, giá trị của nó là1 pixel. Điều này có thể giúp ngăn thay đổi kích thước ngoài ý muốn khi nhấp vào một phần tử.

Option - distance

Với tùy chọn này, việc thay đổi kích thước chỉ bắt đầu khi chuột di chuyển một khoảng cách (pixel). Theo mặc định, giá trị của nó là1 pixel. Điều này có thể giúp ngăn thay đổi kích thước ngoài ý muốn khi nhấp vào một phần tử.

Syntax

$( ".selector" ).resizable({ distance: 30 });
12 con ma

Tùy chọn này khi được đặt thành true , một phần tử trợ giúp nửa trong suốt sẽ được hiển thị để thay đổi kích thước. Mục ma này sẽ bị xóa khi thả chuột. Theo mặc định, giá trị của nó làfalse.

Option - ghost

Tùy chọn này khi được đặt thành true , một phần tử trợ giúp nửa trong suốt sẽ được hiển thị để thay đổi kích thước. Mục ma này sẽ bị xóa khi thả chuột. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).resizable({ ghost: true });
13 lưới

Tùy chọn này thuộc loại Array [x, y], cho biết số lượng pixel mà phần tử mở rộng theo chiều ngang và chiều dọc trong quá trình di chuyển của chuột. Theo mặc định, giá trị của nó làfalse.

Option - grid

Tùy chọn này thuộc loại Array [x, y], cho biết số lượng pixel mà phần tử mở rộng theo chiều ngang và chiều dọc trong quá trình di chuyển của chuột. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).resizable({ grid: [ 20, 10 ] });
14 tay cầm

Tùy chọn này là một chuỗi ký tự cho biết các cạnh hoặc góc của phần tử có thể được thay đổi kích thước. Theo mặc định, các giá trị của nó làe, s, se.

Option - handles

Tùy chọn này là một chuỗi ký tự cho biết các cạnh hoặc góc của phần tử có thể được thay đổi kích thước. Các giá trị có thể là: n, e, s và w cho bốn cạnh và ne, se, nw, và sw cho bốn góc. Các chữ cái n, e, s và w đại diện cho bốn điểm chính (Bắc, Nam, Đông và Tây).

Theo mặc định, các giá trị của nó là e, s, se.

Syntax

$( ".selector" ).resizable({ handles: "n, e, s, w" });
15 người giúp đỡ

Tùy chọn này được sử dụng để thêm một lớp CSS để tạo kiểu cho phần tử được thay đổi kích thước. Khi phần tử được thay đổi kích thước, một phần tử <div> mới được tạo, phần tử này sẽ được thay đổi kích thước (lớp ui-resizable-helper). Sau khi thay đổi kích thước hoàn tất, phần tử ban đầu được định kích thước và phần tử <div> biến mất. Theo mặc định, giá trị của nó làfalse.

Option - helper

Tùy chọn này được sử dụng để thêm một lớp CSS để tạo kiểu cho phần tử được thay đổi kích thước. Khi phần tử được thay đổi kích thước, một phần tử <div> mới được tạo, phần tử này sẽ được thay đổi kích thước (lớp ui-resizable-helper). Sau khi thay đổi kích thước hoàn tất, phần tử ban đầu được định kích thước và phần tử <div> biến mất. Theo mặc định, giá trị của nó làfalse.

Syntax

$( ".selector" ).resizable({ helper: "resizable-helper" });
16 maxHeight

Tùy chọn này được sử dụng để đặt chiều cao tối đa mà có thể thay đổi kích thước được phép thay đổi kích thước. Theo mặc định, giá trị của nó lànull.

Option - maxHeight

Tùy chọn này được sử dụng để đặt chiều cao tối đa mà có thể thay đổi kích thước được phép thay đổi kích thước. Theo mặc định, giá trị của nó lànull.

Syntax

$( ".selector" ).resizable({ maxHeight: 300 });
17 chiều rộng tối đa

Tùy chọn này được sử dụng để đặt chiều rộng tối đa mà người có thể thay đổi kích thước phải được phép thay đổi kích thước. Theo mặc định, giá trị của nó lànull.

Option - maxWidth

Tùy chọn này được sử dụng để đặt chiều rộng tối đa mà người có thể thay đổi kích thước phải được phép thay đổi kích thước. Theo mặc định, giá trị của nó lànull.

Syntax

$( ".selector" ).resizable({ maxWidth: 300 });
18 minHeight

Tùy chọn này được sử dụng để đặt chiều cao tối thiểu mà người có thể thay đổi kích thước phải được phép thay đổi kích thước. Theo mặc định, giá trị của nó là10.

Option - minHeight

Tùy chọn này được sử dụng để đặt chiều cao tối thiểu mà người có thể thay đổi kích thước phải được phép thay đổi kích thước. Theo mặc định, giá trị của nó là10.

Syntax

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

Tùy chọn này được sử dụng để đặt chiều rộng tối thiểu mà có thể thay đổi kích thước được phép thay đổi kích thước. Theo mặc định, giá trị của nó là10.

Option - minWidth

Tùy chọn này được sử dụng để đặt chiều rộng tối thiểu mà có thể thay đổi kích thước được phép thay đổi kích thước. Theo mặc định, giá trị của nó là10.

Điều này có thể thuộc loại -

Syntax

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

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động về chức năng thay đổi kích thước.

Chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng có thể thay đổi kích thước, không truyền tham số nào cho resizable() phương pháp.

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Kéo đường viền hình vuông để thay đổi kích thước.

Sử dụng hoạt ảnh và ma

Ví dụ sau minh họa việc sử dụng hai tùy chọn animate và ghost trong chức năng thay đổi kích thước của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htmvà mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Kéo đường viền hình vuông để thay đổi kích thước và xem hiệu ứng của các tùy chọn hoạt ảnh và bóng mờ.

Sử dụng hàm chứa, chiều cao tối thiểu và chiều rộng tối thiểu

Ví dụ sau minh họa việc sử dụng ba tùy chọn containment, minHeight và minWidth trong chức năng thay đổi kích thước của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Kéo đường viền hình vuông để thay đổi kích thước, bạn không thể thay đổi kích thước ngoài vùng chứa chính.

Sử dụng độ trễ, khoảng cách và tự động ẩn

Ví dụ sau minh họa việc sử dụng ba tùy chọn delay, distance và autoHide trong chức năng thay đổi kích thước của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Kéo đường viền hình vuông để thay đổi kích thước và bạn có thể nhận thấy rằng -

  • Hộp hình vuông đầu tiên thay đổi kích thước sau độ trễ 1000 mili giây,

  • Hộp hình vuông thứ hai bắt đầu thay đổi kích thước sau khi chuột di chuyển 40px.

  • Di chuột vào ô vuông thứ ba và biểu tượng phóng đại xuất hiện.

Sử dụng alsoResize

Ví dụ sau minh họa việc sử dụng tùy chọn alsoResize trong chức năng thay đổi kích thước của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Kéo đường viền hình vuông để thay đổi kích thước và bạn có thể nhận thấy rằng hộp hình vuông thứ hai cũng thay đổi kích thước với hộp hình vuông đầu tiên.

Sử dụng AspectRatio, Grid

Ví dụ sau minh họa việc sử dụng tùy chọn aspectRatio và grid trong chức năng thay đổi kích thước của 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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htmvà mở nó trong trình duyệt chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Kéo đường viền hình vuông để thay đổi kích thước, hộp hình vuông đầu tiên thay đổi kích thước với tỷ lệ khung hình là 10/3 và hộp thứ hai thay đổi kích thước với lưới là [50,20].

Phương thức $ (selector, context) .resizable ("action", params)

Các thay đổi kích thước ( "hành động", params) phương pháp có thể thực hiện một hành động trên các yếu tố thay đổi kích thước, chẳng hạn như cho phép hoặc ngăn chặn chức năng thay đổi kích thước. Hành động được chỉ định dưới dạng một chuỗi trong đối số đầu tiên (ví dụ: "vô hiệu hóa" để ngăn thay đổi kích thước). Kiểm tra các hành động có thể được thông qua, trong bảng sau.

Cú pháp

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

Bảng sau liệt kê các hành động khác nhau có thể được sử dụng với phương pháp này:

Sr.No. Mô tả hành động
1 hủy hoại

Hành động này sẽ phá hủy hoàn toàn chức năng có thể thay đổi kích thước của một phần tử. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init.

Action - destroy

Hành động này sẽ phá hủy hoàn toàn tính toàn hướng có thể thay đổi kích thước của một phần tử. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).resizable("destroy");
2 vô hiệu hóa

Hành động này vô hiệu hóa chức năng thay đổi kích thước của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - disable

Hành động này vô hiệu hóa chức năng thay đổi kích thước của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).resizable("disable");
3 kích hoạt

Hành động này cho phép chức năng thay đổi kích thước của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - enable

Hành động này cho phép chức năng thay đổi kích thước của một phần tử. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$( ".selector" ).resizable("enable");
4 option (optionName)

Hành động này truy xuất giá trị của optionName được chỉ định . Tùy chọn này tương ứng với một trong những tùy chọn được sử dụng với (tùy chọn) có thể thay đổi kích thước.

Action - option( optionName )

Hành động này truy xuất giá trị của optionName được chỉ định . Tùy chọn này tương ứng với một trong những tùy chọn được sử dụng với (tùy chọn) có thể thay đổi kích thước.

Syntax

var isDisabled = $( ".selector" ).resizable( "option", "disabled" );
5 Lựa chọn()

Lấy một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm tùy chọn có thể thay đổi kích thước hiện tại. Điều này không chấp nhận bất kỳ đối số nào.

Action - option()

Lấy một đối tượng chứa các cặp khóa / giá trị đại diện cho hàm băm tùy chọn có thể thay đổi kích thước hiện tại. Điều này không chấp nhận bất kỳ đối số nào.

Syntax

var options = $( ".selector" ).resizable( "option" );
6 option (optionName, value)

Hành động này đặt giá trị của tùy chọn có thể thay đổi kích thước với optionName được chỉ định . Tùy chọn này tương ứng với một trong những tùy chọn được sử dụng với (tùy chọn) có thể thay đổi kích thước.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn có thể thay đổi kích thước với optionName được chỉ định . Tùy chọn này tương ứng với một trong những tùy chọn được sử dụng với (tùy chọn) có thể thay đổi kích thước.

Syntax

$( ".selector" ).resizable( "option", "disabled", true );
7 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho thiết bị có thể thay đổi kích thước.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho thiết bị có thể thay đổi kích thước.

Syntax

$( ".selector" ).resizable( "option", { disabled: true } );
số 8 widget ()

Hành động này trả về một đối tượng jQuery có chứa phần tử có thể thay đổi kích thước. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - widget()

Hành động này trả về một đối tượng jQuery có chứa phần tử có thể thay đổi kích thước. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

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

Thí dụ

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng các phương thức hủy () và vô hiệu hóa () .

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, bạn sẽ thấy kết quả sau:

Bạn không thể thay đổi kích thước của hộp hình vuông đầu tiên vì nó bị vô hiệu hóa và hộp hình vuông thứ hai bị phá hủy.

Quản lý sự kiện trên các phần tử có thể thay đổi kích thước

Ngoài phương thức (tùy chọn) có thể thay đổi kích thước mà chúng ta đã thấy trong các phần trước, JqueryUI cung cấp các phương thức sự kiện được kích hoạt cho một sự kiện cụ thể. Các phương thức sự kiện này được liệt kê bên dưới -

Sr.No. Phương pháp & Mô tả Sự kiện
1 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi phần tử có thể thay đổi kích thước được tạo.

Event - create(event, ui)

Sự kiện này được kích hoạt khi phần tử có thể thay đổi kích thước được tạo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$( ".selector" ).resizable({
create: function( event, ui ) {}
});
2 thay đổi kích thước (sự kiện, ui)

Sự kiện này được kích hoạt khi trình xử lý của phần tử có thể thay đổi kích thước được kéo.

Event - resize(event, ui)

Sự kiện này được kích hoạt khi trình xử lý của phần tử có thể thay đổi kích thước được kéo. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • element - Một đối tượng jQuery đại diện cho phần tử có thể thay đổi kích thước.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được thay đổi kích thước.

  • originalElement - Đối tượng jQuery đại diện cho phần tử gốc trước khi nó được bao bọc.

  • originalPosition - Vị trí được đại diện là {left, top} trước khi thay đổi kích thước được thay đổi kích thước.

  • originalSize - Kích thước được biểu thị là {width, height} trước khi thay đổi kích thước.

  • position - Vị trí hiện tại được biểu diễn là {left, top}.

  • size - Kích thước hiện tại được biểu thị là {width, height}.

Syntax

$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
3 bắt đầu (sự kiện, ui)

Sự kiện này được kích hoạt khi bắt đầu thao tác thay đổi kích thước.

Event - start(event, ui)

Sự kiện này được kích hoạt khi bắt đầu thao tác thay đổi kích thước. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • element - Một đối tượng jQuery đại diện cho phần tử có thể thay đổi kích thước.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được thay đổi kích thước.

  • originalElement - Đối tượng jQuery đại diện cho phần tử gốc trước khi nó được bao bọc.

  • originalPosition - Vị trí được đại diện là {left, top} trước khi thay đổi kích thước được thay đổi kích thước.

  • originalSize - Kích thước được biểu thị là {width, height} trước khi thay đổi kích thước.

  • position - Vị trí hiện tại được biểu diễn là {left, top}.

  • size - Kích thước hiện tại được biểu thị là {width, height}.

Syntax

$( ".selector" ).resizable({
 start: function( event, ui ) {}
});
4 dừng lại (sự kiện, ui)

Sự kiện này được kích hoạt khi kết thúc thao tác thay đổi kích thước.

Event - stop(event, ui)

Sự kiện này được kích hoạt khi kết thúc thao tác thay đổi kích thước. Trong đó sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng . Các giá trị có thể có của ui là -

  • element - Một đối tượng jQuery đại diện cho phần tử có thể thay đổi kích thước.

  • helper - Một đối tượng jQuery đại diện cho trình trợ giúp đang được thay đổi kích thước.

  • originalElement - Đối tượng jQuery đại diện cho phần tử gốc trước khi nó được bao bọc.

  • originalPosition - Vị trí được đại diện là {left, top} trước khi thay đổi kích thước được thay đổi kích thước.

  • originalSize - Kích thước được biểu thị là {width, height} trước khi thay đổi kích thước.

  • position - Vị trí hiện tại được biểu diễn là {left, top}.

  • size - Kích thước hiện tại được biểu thị là {width, height}.

Syntax

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

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức sự kiện trong chức năng thay đổi kích thước. Ví dụ này minh họa việc sử dụng các sự kiện tạo và thay đổi kích thước .

<!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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML resizeexample.htm và mở nó trong một trình duyệt tiêu chuẩn hỗ trợ javascript, phải thấy kết quả sau:

Kéo hộp vuông và bạn sẽ thấy đầu ra được hiển thị trên sự kiện thay đổi kích thước.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved