JqueryUI - Hiển thị

Chương này sẽ thảo luận về show(), là một trong những phương pháp được sử dụng để quản lý hiệu ứng hình ảnh jQueryUI. phương thức show () hiển thị một mục bằng hiệu ứng được chỉ định.

phương thức show () chuyển đổi khả năng hiển thị của các phần tử được bao bọc bằng cách sử dụng hiệu ứng được chỉ định.

Cú pháp

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

.show( 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à biểu thị 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ó 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à kiểu 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ế độ được chỉ định .
2

bounce

Làm cho phần tử xuất hiện nảy 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 phần di chuyển theo các 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 phần tử. Đ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

Thu hút 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.

Ví dụ

Ví dụ sau minh họa việc sử dụng phương thức show () .

Hiển thị với Hiệu ứng Lắc

Các ví dụ sau minh họa phương thức show () với hiệu ứng lắc .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show 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() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
   </body>
</html>

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

Bấm vào nút Thêm Lớp và Loại bỏ Lớp để xem ảnh hưởng của các lớp trên hộp.

Hiển thị với Hiệu ứng mù

Ví dụ sau minh họa việc sử dụng phương thức show () với hiệu ứng mù .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI show 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() {
            // run the currently selected effect
            function runEffect() {
               // run the effect
               $( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
            };
            
            //callback function to bring a hidden box back
            function callback() {
               setTimeout(function() {
                  $( "#effect:visible" ).removeAttr( "style" ).fadeOut();
               }, 1000 );
            };
            
            // set effect from select menu value
            $( "#button" ).click(function() {
               runEffect();
               return false;
            });
            $( "#effect" ).hide();
         });
      </script>
   </head>
   
   <body>
      <div class = "toggler">
         <div id = "effect" class = "ui-widget-content ui-corner-all">
            <h3 class = "ui-widget-header ui-corner-all">Show</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">Run Effect</a>
   </body>
</html>

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

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