ตัวอย่างเช่น jQuery UI - สลับ (สลับ)

ก่อนหน้านี้: เช่น jQuery UI - ซ่อน (ซ่อน)

ถัดไป: เช่น jQuery UI - เพิ่มระดับชั้น (เพิ่มระดับชั้น)

ใช้เอฟเฟ็กที่กำหนดเองเพื่อแสดงหรือซ่อนองค์ประกอบที่ตรงกัน

สำหรับข้อมูลเพิ่มเติมเกี่ยว .toggle() รายละเอียดของวิธีการดูเอกสาร API .toggle ()

.toggle () การสาธิต

คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> jQuery UI ผลกระทบ - .toggle () สาธิต </ 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;
  }
  h3 {#effect
    margin: 0;
    padding: 0.4em;
    text-align: ศูนย์;
  }
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    // เรียกใช้ที่เลือกในปัจจุบัน runEffect ฟังก์ชั่นผล () {
      // สืบทอดมาผลกระทบประเภท var selectedEffect = $ ( "#effectTypes") .val ();
 
      // ส่วนใหญ่ของผลกระทบที่ไม่จำเป็นต้องพิมพ์ตัวเลือกตัวเลือกการนำส่งเริ่มต้น var = ใช้ {};
      // บางผลพิเศษกับพารามิเตอร์ที่จำเป็นถ้า (selectedEffect === "โย") {
        ตัวเลือก = {ร้อยละ: 0};
      } else if (selectedEffect === "ขนาด") {
        ตัวเลือก = {ไป: {ความกว้าง: 200, ความสูง: 60}};
      }
 
      // มีผลกระทบ $ ( "#effect") .toggle (selectedEffect ตัวเลือก 500);
    };
 
    // กำหนดค่าให้เป็นไปตามผลกระทบที่เลือกเมนูที่ $ ( "#button") จำนวนคลิก (ฟังก์ชั่น () {
      runEffect ();
      กลับเท็จ;
    });
  });
  </ 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>

ก่อนหน้านี้: เช่น jQuery UI - ซ่อน (ซ่อน)

ถัดไป: เช่น jQuery UI - เพิ่มระดับชั้น (เพิ่มระดับชั้น)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง

ตัวอย่างเช่น jQuery UI - สลับ (สลับ)

.toggle () การสาธิต