JqueryUI - Chuyển đổi

Chương này sẽ thảo luận về toggle()phương pháp hiệu ứng hình ảnh jQueryUI. phương thức toggle () chuyển đổi phương thức show () hoặc hide () tùy thuộc vào việc phần tử có bị ẩn hay không.

Cú pháp

Các toggle() phương thức có cú pháp sau:

.toggle( effect [, options ] [, duration ] [, complete ] )

Sr.No.	Mô tả về Thông Số
1	effect Đây là một Chuỗi cho biết hiệu ứng nào sẽ sử dụng cho quá trình chuyển đổi Đây là một Chuỗi và đại diện cho hiệu ứng sẽ sử dụng khi điều chỉnh mức độ hiển thị của phần tử. Các hiệu ứng được liệt kê trong bảng dưới đây.
2	options Đây là kiểu Object và chỉ ra các thiết lập hiệu ứng cụ thể và nới lỏng . Ngoài ra, mỗi hiệu ứng có một bộ tùy chọn riêng có thể được chỉ định chung cho nhiều hiệu ứng được mô tả trong bảng Hiệu ứng jQueryUI .
3	duration Đây là loại Số hoặc Chuỗi và xác định thời gian hoạt ảnh sẽ chạy. Giá trị mặc định của nó là 400 .
4	complete Đây là một phương thức gọi lại được gọi cho mỗi phần tử khi hiệu ứng hoàn tất cho phần tử này.

Hiệu ứng jQueryUI

Bảng sau đây mô tả các hiệu ứng khác nhau có thể được sử dụng với phương thức Effects () -

Sr.No.	Hiệu ứng & Mô tả
1	blind Hiển thị hoặc ẩn phần tử theo cách của màn che cửa sổ: bằng cách di chuyển cạnh dưới lên hoặc xuống, hoặc cạnh phải sang phải hoặc trái, tùy thuộc vào hướng và chế độ đã chỉ định .
2	bounce Làm cho phần tử xuất hiện bật lên theo hướng dọc hoặc ngang, tùy chọn hiển thị hoặc ẩn phần tử.
3	clip Hiển thị hoặc ẩn phần tử bằng cách di chuyển các đường viền đối diện của phần tử lại với nhau cho đến khi chúng gặp nhau ở giữa hoặc ngược lại.
4	drop Hiển thị hoặc ẩn phần tử bằng cách làm cho phần tử có vẻ như thả vào hoặc thoát ra khỏi trang.
5	explode Hiển thị hoặc ẩn phần tử bằng cách chia nó thành nhiều mảnh di chuyển theo hướng xuyên tâm như thể phát nổ vào hoặc phát nổ từ trang.
6	fade Hiển thị hoặc ẩn phần tử bằng cách điều chỉnh độ mờ của nó. Điều này cũng giống như các hiệu ứng mờ dần cốt lõi, nhưng không có tùy chọn.
7	fold Hiển thị hoặc ẩn phần tử bằng cách điều chỉnh các đường viền đối diện trong hoặc ngoài, sau đó thực hiện tương tự đối với tập hợp các đường viền khác.
số 8	highlight Kêu gọi sự chú ý đến phần tử bằng cách thay đổi ngay màu nền của nó trong khi hiển thị hoặc ẩn phần tử.
9	puff Mở rộng hoặc thu nhỏ phần tử tại chỗ trong khi điều chỉnh độ mờ của nó.
10	pulsate Điều chỉnh độ mờ của phần tử bật và tắt trước khi đảm bảo rằng phần tử được hiển thị hoặc ẩn như đã chỉ định.
11	scale Mở rộng hoặc thu nhỏ phần tử theo một tỷ lệ phần trăm cụ thể.
12	shake Lắc phần tử qua lại, theo chiều dọc hoặc chiều ngang.
13	size Thay đổi kích thước phần tử thành chiều rộng và chiều cao được chỉ định. Tương tự như quy mô ngoại trừ cách kích thước mục tiêu được chỉ định.
14	slide Di chuyển phần tử sao cho phần tử có vẻ như trượt lên hoặc ra khỏi trang.
15	transfer Hoạt ảnh một phần tử phác thảo tạm thời làm cho phần tử dường như chuyển sang phần tử khác. Sự xuất hiện của phần tử phác thảo phải được xác định thông qua các quy tắc CSS cho lớp ui-Effects-transfer, hoặc lớp được chỉ định dưới dạng tùy chọn.

Thí dụ

Ví dụ sau minh họa việc sử dụng phương thức toggle () với các hiệu ứng khác nhau được liệt kê trong bảng trên.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Toggle Example</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>
         .toggler { width: 500px; height: 200px; }
         #button { padding: .5em 1em; text-decoration: none; }
         #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
         #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      </style>
      
      <script>
         $(function() {
            function runEffect() {
               $( "#effect" ).toggle('explode', 300);
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
            </p>
         </div>
      </div>
      <a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
   </body>
</html>

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

Nhấp vào nút Toggle để kiểm tra cách các lớp được hiển thị và ẩn.