JqueryUI - Hộp thoại

Hộp thoại là một trong những cách hay để trình bày thông tin trên trang HTML. Hộp thoại là một cửa sổ nổi có tiêu đề và vùng nội dung. Cửa sổ này có thể được di chuyển, thay đổi kích thước và tất nhiên, được đóng bằng biểu tượng "X" theo mặc định.

jQueryUI cung cấp dialog() phương thức chuyển mã HTML được viết trên trang thành mã HTML để hiển thị hộp thoại.

Cú pháp

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

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

  • $ (selector, context) .dialog ("action", [params]) Phương thức

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

Phương thức hộp thoại (tùy chọn) khai báo rằng một phần tử HTML có thể được quản lý dưới dạng một hộp thoại. Các tùy chọn tham số là một đối tượng mà xác định sự xuất hiện và hành vi của cửa sổ đó.

Cú pháp

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

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách 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).dialog({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 appendTo

Nếu tùy chọn này được đặt thành false, nó sẽ ngăn chặn ui-draggablelớp khỏi được thêm vào danh sách các phần tử DOM đã chọn. Theo mặc định, giá trị của nó làtrue.

Option - appendTo

Tùy chọn này được sử dụng để nối hộp thoại vào phần tử được chỉ định. Theo mặc định, giá trị của nó là"body".

Syntax

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2 autoOpen

Tùy chọn này trừ khi được đặt thành false , hộp thoại sẽ được mở khi tạo. Khi false , hộp thoại sẽ được mở khi gọi đến hộp thoại ('open'). Theo mặc định, giá trị của nó làtrue.

Option - autoOpen

Tùy chọn này trừ khi được đặt thành false , hộp thoại sẽ được mở khi tạo. Khi false , hộp thoại sẽ được mở khi gọi đến hộp thoại ('open'). Theo mặc định, giá trị của nó làtrue.

Syntax

$(".selector").dialog(
   { autoOpen: false }
);
3 nút

Tùy chọn này thêm các nút trong hộp thoại. Chúng được liệt kê dưới dạng các đối tượng và mỗi thuộc tính là văn bản trên nút. Giá trị là một hàm gọi lại được gọi khi người dùng nhấp vào nút. Theo mặc định, giá trị của nó là{}.

Option - buttons

Tùy chọn này thêm các nút trong hộp thoại. Chúng được liệt kê dưới dạng các đối tượng và mỗi thuộc tính là văn bản trên nút. Giá trị là một hàm gọi lại được gọi khi người dùng nhấp vào nút. Theo mặc định, giá trị của nó là{}.

Trình xử lý này được gọi với một ngữ cảnh chức năng của phần tử hộp thoại và được chuyển cho thể hiện sự kiện với nút được đặt làm thuộc tính đích. Nếu bỏ qua, không có nút nào được tạo cho hộp thoại.

Syntax

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
4 closeOnEscape

Trừ khi tùy chọn này được đặt thành false , hộp thoại sẽ bị đóng khi người dùng nhấn phím Escape trong khi hộp thoại có tiêu điểm. Theo mặc định, giá trị của nó làtrue.

Option - closeOnEscape

Trừ khi tùy chọn này được đặt thành false , hộp thoại sẽ bị đóng khi người dùng nhấn phím Escape trong khi hộp thoại có tiêu điểm. Theo mặc định, giá trị của nó làtrue.

Syntax

$(".selector").dialog(
   { closeOnEscape: false }
);
5 closeText

Tùy chọn này chứa văn bản để thay thế mặc định của Đóng cho nút đóng. Theo mặc định, giá trị của nó là"close".

Option - closeText

Tùy chọn này chứa văn bản để thay thế mặc định của Đóng cho nút đóng. Theo mặc định, giá trị của nó là"close".

Syntax

$(".selector").dialog(
   { closeText: "hide" }
);
6 hộp thoại

Nếu tùy chọn này được đặt thành false, nó sẽ ngăn chặn ui-draggablelớp khỏi được thêm vào danh sách các phần tử DOM đã chọn. Theo mặc định, giá trị của nó là"".

Option - dialogClass

Nếu tùy chọn này được đặt thành false, nó sẽ ngăn chặn ui-draggablelớp khỏi được thêm vào danh sách các phần tử DOM đã chọn. Theo mặc định, giá trị của nó là"".

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 có thể kéo được

Trừ khi bạn tùy chọn này để false, hộp thoại sẽ có thể kéo được bằng cách nhấp và kéo thanh tiêu đề. Theo mặc định, giá trị của nó làtrue.

Option - draggable

Trừ khi bạn tùy chọn này để false, hộp thoại sẽ có thể kéo được bằng cách nhấp và kéo thanh tiêu đề. Theo mặc định, giá trị của nó làtrue.

Syntax

$(".selector").dialog(
   { draggable: false }
);
số 8 Chiều cao

Tùy chọn này đặt chiều cao của hộp thoại. Theo mặc định, giá trị của nó là"auto".

Option - height

Nếu tùy chọn này đặt chiều cao của hộp thoại. Theo mặc định, giá trị của nó là"auto". Tùy chọn này có thể thuộc loại -

Đ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- Giá trị chuỗi được hỗ trợ duy nhất là tự động sẽ cho phép điều chỉnh chiều cao hộp thoại dựa trên nội dung của nó.

Syntax

$(".selector").dialog(
   { height: 400 }
);
9 ẩn giấu

Tùy chọn này được sử dụng để đặt hiệu ứng sẽ được sử dụng khi hộp thoại đóng. Theo mặc định, giá trị của nó lànull.

Option - hide

Tùy chọn này được sử dụng để đặt hiệu ứng sẽ được sử dụng khi hộp thoại đóng. Theo mặc định, giá trị của nó lànull.

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

  • Boolean- Giá trị có thể đúng / sai . Nếu sai sẽ không có hoạt ảnh nào được sử dụng và hộp thoại sẽ bị ẩn ngay lập tức. Nếu đúng , hộp thoại sẽ mờ dần theo thời lượng mặc định và thời lượng mặc định.

  • Number - Hộp thoại sẽ mờ dần theo thời lượng được chỉ định và tốc độ mặc định.

  • String- Hộp thoại sẽ được ẩn bằng cách sử dụng hiệu ứng được chỉ định như slideUp , gấp .

  • Object- Nếu giá trị là một đối tượng, sau đó có hiệu lực, chậm trễ, thời gian, và giảm bớt các thuộc tính có thể được cung cấp để ẩn hộp thoại.

    10

Syntax

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11 maxHeight

Tùy chọn này đặt chiều cao tối đa, tính bằng pixel, mà hộp thoại có thể được thay đổi kích thước. Theo mặc định, giá trị của nó làfalse.

Option - maxHeight

Tùy chọn này đặt chiều cao tối đa, tính bằng pixel, mà hộp thoại có thể được thay đổi kích thước. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").dialog(
   { maxHeight: 600 }
);
12 chiều rộng tối đa

Tùy chọn này đặt chiều rộng tối đa mà hộp thoại có thể được thay đổi kích thước, tính bằng pixel. Theo mặc định, giá trị của nó làfalse.

Option - maxWidth

Tùy chọn này đặt chiều rộng tối đa mà hộp thoại có thể được thay đổi kích thước, tính bằng pixel. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").dialog(
   { maxWidth: 600 }
);
13 minHeight

Tùy chọn này là chiều cao tối thiểu, tính bằng pixel, mà hộp thoại có thể được thay đổi kích thước. Theo mặc định, giá trị của nó là150.

Option - minHeight

Tùy chọn này là chiều cao tối thiểu, tính bằng pixel, mà hộp thoại có thể được thay đổi kích thước. Theo mặc định, giá trị của nó là150.

Syntax

$(".selector").dialog(
   { minHeight: 200 }
);
14 minWidth

Tùy chọn này là chiều rộng tối thiểu, tính bằng pixel, mà hộp thoại có thể được thay đổi kích thước. Theo mặc định, giá trị của nó là150.

Option - minWidth

Tùy chọn này là chiều rộng tối thiểu, tính bằng pixel, mà hộp thoại có thể được thay đổi kích thước. Theo mặc định, giá trị của nó là150.

Syntax

$(".selector").dialog(
   { minWidth: 200 }
);
15 phương thức

Nếu tùy chọn này được đặt thành true, hộp thoại sẽ có hành vi phương thức; các mục khác trên trang sẽ bị vô hiệu hóa, tức là không thể tương tác với. Hộp thoại phương thức tạo lớp phủ bên dưới hộp thoại nhưng bên trên các phần tử trang khác. Theo mặc định, giá trị của nó làfalse.

Option - modal

Nếu tùy chọn này được đặt thành true, hộp thoại sẽ có hành vi phương thức; các mục khác trên trang sẽ bị vô hiệu hóa, tức là không thể tương tác với. Hộp thoại phương thức tạo lớp phủ bên dưới hộp thoại nhưng bên trên các phần tử trang khác. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").dialog(
   { modal: true }
);
16 Chức vụ

Tùy chọn này chỉ định vị trí ban đầu của hộp thoại. Có thể là một trong những vị trí được xác định trước: trung tâm (mặc định), trái, phải, trên cùng hoặc dưới cùng . Cũng có thể là một mảng 2 phần tử với các giá trị bên trái và trên cùng (tính bằng pixel) là [left, top] hoặc các vị trí văn bản như ['right', 'top']. Theo mặc định, giá trị của nó là{ my: "center", at: "center", of: window }.

Option - position

Tùy chọn này chỉ định vị trí ban đầu của hộp thoại. Có thể là một trong những vị trí được xác định trước: trung tâm (mặc định), trái, phải, trên cùng hoặc dưới cùng . Cũng có thể là một mảng 2 phần tử với các giá trị bên trái và trên cùng (tính bằng pixel) là [left, top] hoặc các vị trí văn bản như ['right', 'top']. Theo mặc định, giá trị của nó là{ my: "center", at: "center", of: window }.

Syntax

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17 có thể thay đổi kích thước

Tùy chọn này trừ khi được đặt thành false, hộp thoại có thể thay đổi kích thước theo mọi hướng. Theo mặc định, giá trị của nó làtrue.

Option - resizable

Tùy chọn này trừ khi được đặt thành false, hộp thoại có thể thay đổi kích thước theo mọi hướng. Theo mặc định, giá trị của nó làtrue.

Syntax

$(".selector").dialog(
   { resizable: false }
);
18 chỉ

Tùy chọn này là một hiệu ứng được sử dụng khi hộp thoại đang được mở. Theo mặc định, giá trị của nó lànull.

Option - show

Tùy chọn này là một hiệu ứng được sử dụng khi hộp thoại đang được mở. Theo mặc định, giá trị của nó lànull.

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

  • Boolean- Giá trị có thể đúng / sai . Nếu sai sẽ không có hoạt ảnh nào được sử dụng và hộp thoại sẽ được hiển thị ngay lập tức. Nếu đúng , hộp thoại sẽ mờ dần theo thời lượng mặc định và tốc độ mặc định.

  • Number - Hộp thoại sẽ mờ dần theo thời lượng được chỉ định và tốc độ mặc định.

  • String- Hộp thoại sẽ được hiển thị bằng cách sử dụng hiệu ứng cụ thể như slideDown , gấp .

  • Object- Nếu giá trị là một đối tượng, sau đó có hiệu lực, chậm trễ, thời gian, và giảm bớt các thuộc tính có thể được cung cấp để hiển thị hộp thoại.

    19

Syntax

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
20 tiêu đề

Tùy chọn này chỉ định văn bản xuất hiện trên thanh tiêu đề của hộp thoại. Theo mặc định, giá trị của nó lànull.

Option - title

Tùy chọn này chỉ định văn bản xuất hiện trên thanh tiêu đề của hộp thoại. Theo mặc định, giá trị của nó lànull.

Syntax

$(".selector").dialog(
   { title: "Dialog Title" }
);
21 chiều rộng

Tùy chọn này chỉ định chiều rộng của hộp thoại tính bằng pixel. Theo mặc định, giá trị của nó là300.

Option - width

Tùy chọn này chỉ định chiều rộng của hộp thoại tính bằng pixel. Theo mặc định, giá trị của nó là300.

Syntax

$(".selector").dialog(
   { width: 500 }
);

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động của chức năng hộp thoại.

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 hộp thoại không truyền tham số nào cho dialog() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({ autoOpen: false, }); $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dialogexample.htmvà mở nó trong một trình duyệt 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ả -

Sử dụng các nút, tiêu đề và vị trí

Ví dụ sau minh họa việc sử dụng ba tùy chọn buttons, title và position trong tiện ích hộp thoại của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({ autoOpen: false, buttons: { OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() { $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dialogexample.htmvà mở nó trong một trình duyệt 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ả -

Sử dụng ẩn, hiện và chiều cao

Ví dụ sau minh họa việc sử dụng ba tùy chọn hide, show và height trong tiện ích hộp thoại của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() { $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dialogexample.htmvà mở nó trong một trình duyệt 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ả -

Sử dụng phương thức

Ví dụ sau minh họa việc sử dụng ba tùy chọn buttons, title và position trong tiện ích hộp thoại của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");} }, }); $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML dialogexample.htmvà mở nó trong một trình duyệt 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ả -

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

Phương thức hộp thoại (action, params) có thể thực hiện một hành động trên hộp thoại, chẳng hạn như đóng hộp. Cácaction được chỉ định dưới dạng một chuỗi trong đối số đầu tiên và tùy chọn, một hoặc nhiều params có thể được cung cấp dựa trên hành động đã cho.

Về cơ bản, ở đây các hành động không là gì nhưng chúng là các phương thức jQuery mà chúng ta có thể sử dụng ở dạng chuỗi.

Cú pháp

$(selector, context).dialog ("action", [params]);

Bảng sau liệt kê các hành động cho phương pháp này:

Sr.No. Mô tả hành động
1 đóng()

Hành động này đóng hộp thoại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - close()

Hành động này đóng hộp thoại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").dialog("close");
2 hủy hoại()

Hành động này sẽ loại bỏ hộp thoại một cách thành thạo. 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.

Action - destroy()

Hành động này sẽ loại bỏ hộp thoại một cách thành thạo. 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").dialog("destroy");
3 isOpen ()

Hành động này kiểm tra xem hộp thoại có đang mở hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - isOpen()

Hành động này kiểm tra xem hộp thoại có đang mở hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").dialog("isOpen");
4 moveToTop ()

Hành động này định vị các hộp thoại tương ứng với nền trước (trên đầu các hộp thoại khác). Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - moveToTop()

Hành động này định vị các hộp thoại tương ứng với nền trước (trên đầu các hộp thoại khác). Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").dialog("moveToTop");
5 mở()

Hành động này sẽ mở hộp thoại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - open()

Hành động này sẽ mở hộp thoại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").dialog("open");
6 option (optionName)

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định. Trong đó optionName là tên của tùy chọn cần lấy.

Action - option( optionName )

Hành động này nhận giá trị hiện được liên kết với optionName được chỉ định. Trong đó optionName là tên của tùy chọn cần lấy.

Syntax

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

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn hộp thoại hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - option()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn hộp thoại hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var options = $( ".selector" ).dialog( "option" );
số 8 option (optionName, value)

Hành động này đặt giá trị của tùy chọn hộp thoại được liên kết với optionName đã chỉ định.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn hộp thoại được liên kết với optionName đã chỉ định.

Syntax

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

Hành động này đặt một hoặc nhiều tùy chọn cho hộp thoại.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho hộp thoại.

Syntax

$(".selector").dialog( "option", { disabled: true });
10 widget ()

Hành động này trả về phần tử widget của hộp thoại; phần tử được chú thích bằng tên lớp ui-thoại. 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ề phần tử widget của hộp thoại; phần tử được chú thích bằng tên lớp ui-thoại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").dialog("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 isOpen () , open () và close () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() { ($("#dialog-5").dialog("isOpen") == false) ? $( "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

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

Quản lý sự kiện trên Hộp thoại

Ngoài phương thức hộp thoại (tùy chọn) 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 beforeClose (sự kiện, ui)

Sự kiện này được kích hoạt khi hộp thoại sắp đóng. Trả về false ngăn hộp thoại đóng. Nó rất hữu ích cho các hộp thoại có biểu mẫu không xác thực được. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - beforeClose(event, ui)

Sự kiện này được kích hoạt khi hộp thoại sắp đóng. Trả về false ngăn hộp thoại đóng. Nó rất hữu ích cho các hộp thoại có biểu mẫu không xác thực được. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
2 đóng (sự kiện, ui)

Sự kiện này được kích hoạt khi đóng hộp thoại. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - close(event, ui)

Sự kiện này được kích hoạt khi đóng hộp thoại. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$(".selector").dialog (
   close: function(event, ui) {}
);
3 tạo (sự kiện, ui)

Sự kiện này được kích hoạt khi hộp thoại được tạo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - create(event, ui)

Sự kiện này được kích hoạt khi hộp thoại được tạo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$(".selector").dialog (
   create: function(event, ui) {}
);
4 kéo (sự kiện, ui)

Sự kiện này được kích hoạt lặp đi lặp lại khi hộp thoại được di chuyển trong khi kéo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - drag(event, ui)

Sự kiện này được kích hoạt lặp đi lặp lại khi hộp thoại được di chuyển trong khi kéo. Trường hợp 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à -

  • position - Một đối tượng jQuery đại diện cho vị trí CSS hiện tại của hộp thoại.

  • offset - Một đối tượng jQuery đại diện cho vị trí bù hiện tại của hộp thoại.

Syntax

$(".selector").dialog (
   drag: function(event, ui) {}
);
5 dragStart (sự kiện, ui)

Sự kiện này được kích hoạt khi bắt đầu định vị lại hộp thoại bằng cách kéo thanh tiêu đề của nó. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - dragStart(event, ui)

Sự kiện này được kích hoạt khi bắt đầu định vị lại hộp thoại bằng cách kéo thanh tiêu đề của nó. Trường hợp 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à -

  • position - Một đối tượng jQuery đại diện cho vị trí CSS hiện tại của hộp thoại.

  • offset - Một đối tượng jQuery đại diện cho vị trí bù hiện tại của hộp thoại.

Syntax

$(".selector").dialog (
   dragStart: function(event, ui) {}
);
6 dragStop (sự kiện, ui)

Sự kiện này được kích hoạt khi kết thúc hoạt động kéo. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - dragStop(event, ui)

Sự kiện này được kích hoạt khi kết thúc hoạt động kéo. Trường hợp 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à -

  • position - Một đối tượng jQuery đại diện cho vị trí CSS hiện tại của hộp thoại.

  • offset - Một đối tượng jQuery đại diện cho vị trí bù hiện tại của hộp thoại.

Syntax

$(".selector").dialog (
   dragStop: function(event, ui) {}
);
7 tiêu điểm (sự kiện, ui)

Sự kiện này được kích hoạt khi hộp thoại lấy được tiêu điểm. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - focus(event, ui)

Sự kiện này được kích hoạt khi hộp thoại lấy được tiêu điểm. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

$(".selector").dialog (
   focus: function(event, ui) {}
);
số 8 mở (sự kiện, ui)

Sự kiện này được kích hoạt khi hộp thoại được mở. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - open(event, ui)

Sự kiện này được kích hoạt khi hộp thoại được mở. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Syntax

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

Sự kiện này được kích hoạt lặp lại khi một hộp thoại được thay đổi kích thước. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - resize(event, ui)

Sự kiện này được kích hoạt lặp lại khi một hộp thoại đượ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à -

  • originalPosition - Một đối tượng jQuery đại diện cho vị trí CSS của hộp thoại trước khi được thay đổi kích thước.

  • position - Một đối tượng jQuery đại diện cho vị trí CSS hiện tại của hộp thoại.

  • originalSize - Một đối tượng jQuery đại diện cho kích thước của hộp thoại trước khi được thay đổi kích thước.

  • size - Một đối tượng jQuery đại diện cho kích thước hiện tại của hộp thoại.

Syntax

$(".selector").dialog (
   resize: function(event, ui) {}
);
10 resizeStart (sự kiện, ui)

Sự kiện này được kích hoạt khi bắt đầu thay đổi kích thước của hộp thoại. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - resizeStart(event, ui)

Sự kiện này được kích hoạt khi bắt đầu thay đổi kích thước của hộp thoại. 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à -

  • originalPosition - Một đối tượng jQuery đại diện cho vị trí CSS của hộp thoại trước khi được thay đổi kích thước.

  • position - Một đối tượng jQuery đại diện cho vị trí CSS hiện tại của hộp thoại.

  • originalSize - Một đối tượng jQuery đại diện cho kích thước của hộp thoại trước khi được thay đổi kích thước.

  • size - Một đối tượng jQuery đại diện cho kích thước hiện tại của hộp thoại.

Syntax

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
11 resizeStop (sự kiện, ui)

Sự kiện này được kích hoạt khi kết thúc thay đổi kích thước của hộp thoại. Trường hợp sự kiện thuộc loại Sự kiện và ui thuộc loại Đối tượng .

Event - resizeStop(event, ui)

Sự kiện này được kích hoạt khi kết thúc thay đổi kích thước của hộp thoại. 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à -

  • originalPosition - Một đối tượng jQuery đại diện cho vị trí CSS của hộp thoại trước khi được thay đổi kích thước.

  • position - Một đối tượng jQuery đại diện cho vị trí CSS hiện tại của hộp thoại.

  • originalSize - Một đối tượng jQuery đại diện cho kích thước của hộp thoại trước khi được thay đổi kích thước.

  • size - Một đối tượng jQuery đại diện cho kích thước hiện tại của hộp thoại.

Syntax

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

Các ví dụ sau đây chứng minh việc sử dụng các sự kiện được liệt kê trong bảng trên.

Sử dụng phương pháp beforeClose Event

Ví dụ sau minh họa việc sử dụng beforeClose phương pháp sự kiện.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() { $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" ); } }, beforeClose: function( event, ui ) { if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" ); } }, width: 600 }); $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

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

Sử dụng phương pháp sự kiện thay đổi kích thước

Ví dụ sau minh họa việc sử dụng resize phương pháp sự kiện.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog 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,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({ autoOpen: false, resize: function( event, ui ) { $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() { $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

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

Điểm mở rộng

Tiện ích hộp thoại được xây dựng với nhà máy sản xuất tiện ích và có thể được mở rộng. Để mở rộng các widget, chúng ta có thể ghi đè hoặc thêm vào hành vi của các phương thức hiện có. Phương thức sau cung cấp dưới dạng điểm mở rộng với độ ổn định API giống như các phương thức hộp thoại. Được liệt kê trong bảng trên .

Sr.No. Phương pháp & Mô tả
1 _allowInteraction (sự kiện)

Phương pháp này cho phép người dùng tương tác với một phần tử mục tiêu nhất định bằng cách đưa vào danh sách trắng các phần tử không phải là con của hộp thoại nhưng cho phép người dùng có thể sử dụng. Trường hợp sự kiện thuộc loại Sự kiện .

Extension Point - allowInteraction(event, ui)

Phương pháp này cho phép người dùng tương tác với một phần tử mục tiêu nhất định bằng cách đưa vào danh sách trắng các phần tử không phải là con của hộp thoại nhưng cho phép người dùng có thể sử dụng. Trường hợp sự kiện thuộc loại Sự kiện .

Code Example

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • Plugin Select2 được sử dụng trong các hộp thoại phương thức

  • lệnh gọi super () đảm bảo vẫn có thể tương tác với các phần tử trong hộp thoại.
JQuery UI Widget Factory là một cơ sở có thể mở rộng để xây dựng tất cả các widget của jQuery UI. Việc sử dụng nhà máy widget để xây dựng một plugin mang lại sự tiện lợi cho việc quản lý nhà nước, cũng như các quy ước cho các tác vụ phổ biến như hiển thị các phương thức plugin và thay đổi các tùy chọn sau khi tạo.
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