JqueryUI - Tampilkan

Bab ini akan membahas show()metode, yang merupakan salah satu metode yang digunakan untuk mengelola efek visual jQueryUI. show () metode menampilkan item menggunakan efek yang ditunjukkan.

show () metode mengalihkan visibilitas elemen yang dibungkus menggunakan efek yang ditentukan.

Sintaksis

Itu show() metode memiliki sintaks berikut -

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

Sr.No.	Parameter & Deskripsi
1	effect Ini adalah String yang menunjukkan efek mana yang akan digunakan untuk transisi. Ini adalah String dan mewakili efek yang akan digunakan saat menyesuaikan visibilitas elemen. Efeknya tercantum dalam tabel di bawah ini.
2	options Ini adalah tipe Object dan menunjukkan pengaturan dan easing khusus efek . Selain itu, setiap efek memiliki rangkaian opsi sendiri yang dapat ditentukan secara umum di beberapa efek yang dijelaskan dalam tabel jQueryUI Effects .
3	duration Ini adalah tipe Number atau String dan menentukan berapa lama animasi akan berjalan. Nilai defaultnya adalah 400 .
4	complete Ini adalah metode callback yang dipanggil untuk setiap elemen saat efeknya selesai untuk elemen ini.

Efek jQueryUI

Tabel berikut menjelaskan berbagai efek yang dapat digunakan dengan metode effects () -

Sr.No.	Efek & Deskripsi
1	blind Memperlihatkan atau menyembunyikan elemen seperti tirai jendela: dengan menggerakkan tepi bawah ke bawah atau ke atas, atau tepi kanan ke kanan atau kiri, tergantung pada arah dan mode yang ditentukan .
2	bounce Menyebabkan elemen tampak memantul dalam arah vertikal atau horizontal, secara opsional menampilkan atau menyembunyikan elemen.
3	clip Memperlihatkan atau menyembunyikan elemen dengan menggerakkan batas berlawanan dari elemen bersama-sama sampai bertemu di tengah, atau sebaliknya.
4	drop Menampilkan atau menyembunyikan elemen dengan membuatnya tampak jatuh ke, atau lepas dari, halaman.
5	explode Menampilkan atau menyembunyikan elemen dengan membaginya menjadi beberapa bagian yang bergerak dalam arah radial seolah-olah meledak ke dalam, atau meledak dari, halaman.
6	fade Menampilkan atau menyembunyikan elemen dengan menyesuaikan opasitasnya. Ini sama dengan efek fade inti, tetapi tanpa opsi.
7	fold Memperlihatkan atau menyembunyikan elemen dengan menyesuaikan batas yang berlawanan masuk atau keluar, lalu melakukan hal yang sama untuk kumpulan batas lainnya.
8	highlight Memanggil perhatian ke elemen dengan mengubah warna latar belakangnya sebentar saat menampilkan atau menyembunyikan elemen.
9	puff Memperluas atau mengontraksi elemen di tempatnya sambil menyesuaikan opasitasnya.
10	pulsate Menyesuaikan opasitas elemen aktif dan nonaktif sebelum memastikan bahwa elemen ditampilkan atau disembunyikan seperti yang ditentukan.
11	scale Memperluas atau mengontrak elemen dengan persentase tertentu.
12	shake Menggoyangkan elemen bolak-balik, baik secara vertikal maupun horizontal.
13	size Mengubah ukuran elemen menjadi lebar dan tinggi yang ditentukan. Mirip dengan skala kecuali bagaimana ukuran target ditentukan.
14	slide Memindahkan elemen sedemikian rupa sehingga tampak meluncur ke atas atau ke luar halaman.
15	transfer Menganimasikan elemen garis besar sementara yang membuat elemen tampak ditransfer ke elemen lain. Tampilan elemen garis besar harus ditentukan melalui aturan CSS untuk kelas ui-effects-transfer, atau kelas yang ditentukan sebagai opsi.

Contoh

Contoh berikut menunjukkan penggunaan metode show () .

Tunjukkan dengan Efek Goyang

Contoh berikut menunjukkan metode show () dengan efek goyang .

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

Mari kita simpan kode di atas dalam file HTML showexample.htmdan membukanya di browser standar yang mendukung javascript, Anda juga harus melihat output berikut. Sekarang, Anda bisa bermain dengan hasilnya -

Klik pada tombol Tambah Kelas dan Hapus Kelas untuk melihat efek kelas pada kotak.

Tunjukkan dengan Blind Effect

Contoh berikut menunjukkan penggunaan metode show () dengan efek buta .

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