บทช่วยสอน ตัวอย่าง jQuery UI - การแสดง (Show) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ .show () การสาธิต,
ใช้เอฟเฟ็กที่กำหนดเองเพื่อแสดงองค์ประกอบที่ตรงกัน
สำหรับข้อมูลเพิ่มเติมเกี่ยว .show() รายละเอียดของวิธีการดูเอกสาร API .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>