Tutorial contoh jQuery UI - show (Show) Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari .show () Demo,
Menggunakan efek khusus untuk menampilkan elemen yang cocok.
Untuk informasi lebih lanjut tentang .show()
rincian metode, lihat dokumentasi API .show () .
Klik tombol untuk melihat efek.
<! DOCTYPE html> <Html lang = "en"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Efek - .show () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Gaya> .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> $ (Fungsi () { // Jalankan fungsi efek yang saat ini dipilih runEffect () { // Turunkan efek Jenis var selectedEffect = $ ( "#effectTypes") val (); // Sebagian besar efek tidak perlu mengetikkan pilihan opsi pengiriman default var = {}; // Beberapa efek khusus dengan parameter yang diperlukan jika (selectedEffect === "skala") { Pilihan = {persen: 100}; } Lain jika (selectedEffect === "ukuran") { Pilihan = {ke: {width: 280, height: 185}}; } // Efek Jalankan $ ( "#effect") .show (selectedEffect, opsi, 500, callback); }; // Fungsi Callback callback () { setTimeout (function () { $ ( "#effect: Terlihat") .removeAttr ( "gaya") .fadeOut (); }, 1000); }; // Mengatur nilai sesuai dengan efek menu $ yang dipilih ( "#button") .Klik (function () { runEffect (); return false; }); $ ( "#effect") .hide (); }); </ Script> </ Kepala> <Body> <Div class = "toggler"> <Div id = "efek" class = "ui-widget-konten ui-sudut-semua"> <Class H3 = "ui-widget-header ui-sudut-semua"> Display (Tampilkan) </ h3> <P> Etiam libero neque, luctus sebuah, eleifend nec, sempre di, lorem. Sed pede. Nulla lorem Metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </ P> </ Div> </ Div> <Pilih name = "efek" id = "effectTypes"> <Value Option = "buta"> Shades efek (Blind Effect) </ option> <Value Option = "bouncing"> pulih efek (Bounce Efek) </ option> <Value Option = "klip"> efek Klip (Effect Clip) </ option> <Value Option = "drop"> efek Landing (Drop Effect) </ option> <Value Option = "meledak"> efek ledakan (Explode Effect) </ option> <Value Option = "lipat"> efek lipat (Lipat Effect) </ option> <Value Option = "highlight"> efek highlight (Sorot Effect) </ option> <Option value = "meniup"> efek ekspansi (Puff Effect) </ option> <Value Option = "berdenyut"> mengalahkan efek (berdenyut Effect) </ option> <Option value = "skala"> efek Zoom (Skala Effect) </ option> <Value Option = "goyang"> efek Getaran (Goyang Effect) </ option> <Option value = "size"> efek Size (Ukuran Effect) </ option> <Option value = "slide"> efek geser (Slide Effect) </ option> </ Pilih> <a href="#" id="button" class="ui-state-default ui-corner-all"> menjalankan efek </a> </ Body> </ Html>