ตัวอย่าง jQuery UI - การแสดง (Show)
ใช้เอฟเฟ็กที่กำหนดเองเพื่อแสดงองค์ประกอบที่ตรงกัน
สำหรับข้อมูลเพิ่มเติมเกี่ยว .show()
รายละเอียดของวิธีการดูเอกสาร API .show ()
.show () การสาธิต
คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI ผลกระทบ - .show () สาธิต </ title> <link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> .toggler {กว้าง: 500px; ความสูง: 200px;} #button {padding: .5em 1em; ตกแต่งข้อความ: none;} #effect {กว้าง: 240px; ความสูง: 135px; padding: 0.4em; ตำแหน่ง: ญาติ;} #effect h3 {margin: 0; padding: 0.4em; text-align: ศูนย์;} </ style> <script> $ (ฟังก์ชั่น () { // เรียกใช้ที่เลือกในปัจจุบัน runEffect ฟังก์ชั่นผล () { // สืบทอดมาผลกระทบประเภท var selectedEffect = $ ( "#effectTypes") .val (); // ส่วนใหญ่ของผลกระทบที่ไม่จำเป็นต้องพิมพ์ตัวเลือกตัวเลือกการนำส่งเริ่มต้น var = ใช้ {}; // บางผลพิเศษกับพารามิเตอร์ที่จำเป็นถ้า (selectedEffect === "โย") { ตัวเลือก = {ร้อยละ 100}; } else if (selectedEffect === "ขนาด") { ตัวเลือก = {ไป: {ความกว้าง: 280, ความสูง: 185}}; } // มีผลกระทบ $ ( "#effect") .show (selectedEffect ตัวเลือก 500, โทรกลับ); }; // โทรกลับฟังก์ชันการเรียกกลับ () { setTimeout (ฟังก์ชั่น () { $ ( "#effect: มองเห็น") .removeAttr ( "สไตล์") .fadeOut (); }, 1000) }; // กำหนดค่าให้เป็นไปตามผลกระทบที่เลือกเมนูที่ $ ( "#button") จำนวนคลิก (ฟังก์ชั่น () { runEffect (); กลับเท็จ; }); $ ( "#effect") .hide (); }); </ script> </ head> <body> <div class = "toggler"> <div id = "ผล" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด"> <ระดับ H3 = "หัว UI-Widget UI-มุมทั้งหมด"> จอแสดงผล (แสดง) </ h3> <p> Etiam Libero วัด, luctus ที่ eleifend NEC, Semper AT, Lorem. Sed กะเทย. Nulla Lorem Metus, adipiscing UT, luctus sed, สำนัก Vitae, มิชิแกน </ p> </ div> </ div> <select name = "ผลกระทบ" id = "effectTypes"> <value option = "ตาบอด"> ผลกระทบ Shades (ตาบอดผล) </ option> <option value = "ตีกลับ"> ฟื้นตัวผลกระทบ (ตีกลับผล) </ option> <option value = "คลิป"> ผลกระทบคลิป (เอฟเฟคลิป) </ option> <value option = "วาง"> ผลกระทบ Landing (Drop ผล) </ option> <option value = "ระเบิด"> ผลกระทบระเบิด (ระเบิด Effect) </ option> <option value = "พับ"> ผลกระทบพับ (พับ Effect) </ option> <option value = "ไฮไลท์"> ผลกระทบไฮไลท์ (เอฟเฟไฮไลต์) </ option> <option value = "ผัด"> ผลกระทบการขยายตัว (พัฟผล) </ option> <value option = "เต้น"> เอาชนะผลกระทบ (เต้น Effect) </ option> <option value = "โย"> ผลกระทบซูม (ชั่งผล) </ option> <option value = "เขย่า"> ผลกระทบการสั่นสะเทือนสั่นไหว (Shake ผล) </ option> <option value = "ขนาด"> ผลกระทบขนาด (Size ผล) </ option> <option value = "สไลด์"> ผลกระทบสไลด์ (Slide ผล) </ option> </ เลือก> <a href="#" id="button" class="ui-state-default ui-corner-all"> เรียกผลกระทบ </a> </ body> </ html>