JqueryUI - หีบเพลง

Accordion Widget ใน jQueryUI เป็นตัวยึดเนื้อหาที่ขยายได้และยุบได้ตาม jQuery ซึ่งแบ่งออกเป็นส่วน ๆ และอาจดูเหมือนแท็บ jQueryUI มีวิธีการหีบเพลง () เพื่อให้บรรลุสิ่งนี้

ไวยากรณ์

accordion() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .accordion (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .accordion ("action", params) Method

$ (ตัวเลือกบริบท) .accordion (ตัวเลือก) วิธีการ

วิธีการหีบเพลง (ตัวเลือก)ประกาศว่าองค์ประกอบ HTML และเนื้อหาควรได้รับการปฏิบัติและจัดการเป็นเมนูหีบเพลง ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุลักษณะและการทำงานของเมนูที่เกี่ยวข้อง

ไวยากรณ์

$(selector, context).accordion (options);

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).accordion({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงรายการตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).accordion(
   { active: 2 }
);
$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
$( ".selector" ).accordion(
   { collapsible: true }
);
$( ".selector" ).accordion(
   { disabled: true }
);
$( ".selector" ).accordion(
   { event: "mouseover" }
);
$( ".selector" ).accordion(
   { header: "h3" }
);
$( ".selector" ).accordion(
   { heightStyle: "fill" }
);
$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	คล่องแคล่ว ระบุดัชนีของเมนูที่เปิดเมื่อเข้าถึงเพจครั้งแรก โดยค่าเริ่มต้นคือ0คือเมนูแรก Option - active ระบุดัชนีของเมนูที่เปิดเมื่อเข้าถึงเพจครั้งแรก โดยค่าเริ่มต้นคือ0คือเมนูแรก สิ่งนี้สามารถเป็นประเภท - Boolean- หากตั้งค่าเป็น "เท็จ"จะยุบแผงทั้งหมด เรื่องนี้ต้องมีตัวเลือกพับให้เป็นจริง Integer- ดัชนีอิงศูนย์ของแผงที่ใช้งานอยู่ (เปิด) ค่าลบจะเลือกแผงที่ย้อนกลับจากแผงสุดท้าย Syntax `$( ".selector" ).accordion( { active: 2 } );`
2	เคลื่อนไหว ตัวเลือกนี้ใช้เพื่อกำหนดวิธีทำให้แผงควบคุมเคลื่อนไหว โดยค่าเริ่มต้นคือ{}. Option - animate ตัวเลือกนี้ใช้เพื่อกำหนดวิธีทำให้แผงควบคุมเคลื่อนไหว โดยค่าเริ่มต้นคือ{}. สิ่งนี้สามารถเป็นประเภท - Boolean- ค่าเท็จจะปิดใช้งานภาพเคลื่อนไหว Number - นี่คือระยะเวลาในหน่วยมิลลิวินาที String - ชื่อของการค่อยๆเปลี่ยนที่จะใช้กับระยะเวลาเริ่มต้น Object - การตั้งค่าภาพเคลื่อนไหวพร้อมคุณสมบัติการค่อยๆเปลี่ยนและระยะเวลา Syntax `$( ".selector" ).accordion( { animate: "bounceslide" } );`
3	พับได้ ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะช่วยให้ผู้ใช้สามารถปิดเมนูได้โดยคลิกที่เมนูนั้น โดยค่าเริ่มต้นการคลิกที่ส่วนหัวของแผงที่เปิดจะไม่มีผลใด ๆ โดยค่าเริ่มต้นคือfalse. Option - collapsible ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะช่วยให้ผู้ใช้สามารถปิดเมนูได้โดยคลิกที่เมนูนั้น โดยค่าเริ่มต้นการคลิกที่ส่วนหัวของแผงที่เปิดจะไม่มีผลใด ๆ โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).accordion( { collapsible: true } );`
4	ปิดการใช้งาน ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งานหีบเพลง โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้เมื่อตั้งค่าเป็นจริงจะปิดใช้งานหีบเพลง โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).accordion( { disabled: true } );`
5	เหตุการณ์ ตัวเลือกนี้ระบุเหตุการณ์ที่ใช้เพื่อเลือกส่วนหัวหีบเพลง โดยค่าเริ่มต้นคือclick. Option - event ตัวเลือกนี้ระบุเหตุการณ์ที่ใช้เพื่อเลือกส่วนหัวหีบเพลง โดยค่าเริ่มต้นคือclick. Syntax `$( ".selector" ).accordion( { event: "mouseover" } );`
6	หัวข้อ ตัวเลือกนี้ระบุตัวเลือกหรือองค์ประกอบเพื่อแทนที่รูปแบบเริ่มต้นสำหรับการระบุองค์ประกอบส่วนหัว โดยค่าเริ่มต้นคือ> li > :first-child,> :not(li):even. Option - header ตัวเลือกนี้ระบุตัวเลือกหรือองค์ประกอบเพื่อแทนที่รูปแบบเริ่มต้นสำหรับการระบุองค์ประกอบส่วนหัว โดยค่าเริ่มต้นคือ> li > :first-child,> :not(li):even. Syntax `$( ".selector" ).accordion( { header: "h3" } );`
7	heightStyle ตัวเลือกนี้ใช้เพื่อควบคุมความสูงของหีบเพลงและแผง โดยค่าเริ่มต้นคือauto. Option - heightStyle ตัวเลือกนี้ใช้เพื่อควบคุมความสูงของหีบเพลงและแผง โดยค่าเริ่มต้นคือauto. ค่าที่เป็นไปได้คือ - auto - แผงทั้งหมดจะตั้งไว้ที่ความสูงของแผงที่สูงที่สุด fill - ขยายให้มีความสูงตามความสูงของแม่หีบเพลง content - แต่ละแผงจะมีความสูงเท่ากับเนื้อหาเท่านั้น Syntax `$( ".selector" ).accordion( { heightStyle: "fill" } );`
8	ไอคอน ตัวเลือกนี้เป็นวัตถุที่กำหนดไอคอนที่จะใช้ทางด้านซ้ายของข้อความส่วนหัวสำหรับแผงที่เปิดและปิด ไอคอนเพื่อใช้สำหรับการติดตั้งปิดที่ระบุไว้เป็นทรัพย์สินที่มีชื่อส่วนหัวในขณะที่ไอคอนเพื่อใช้สำหรับการติดตั้งเปิดมีการระบุเป็นชื่อคุณสมบัติheaderSelected โดยค่าเริ่มต้นคือ{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Option - icons ตัวเลือกนี้เป็นวัตถุที่กำหนดไอคอนที่จะใช้ทางด้านซ้ายของข้อความส่วนหัวสำหรับแผงที่เปิดและปิด ไอคอนเพื่อใช้สำหรับการติดตั้งปิดที่ระบุไว้เป็นทรัพย์สินที่มีชื่อส่วนหัวในขณะที่ไอคอนเพื่อใช้สำหรับการติดตั้งเปิดมีการระบุเป็นชื่อคุณสมบัติheaderSelected โดยค่าเริ่มต้นคือ{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Syntax `$( ".selector" ).accordion( { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } } );`

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานของวิดเจ็ตหีบเพลง

ฟังก์ชันเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวอย่างง่ายๆของฟังก์ชันวิดเจ็ตหีบเพลงโดยไม่ต้องส่งพารามิเตอร์ไปยังไฟล์ accordion() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML accordionexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ด้วย ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

คลิกส่วนหัว (แท็บ 1 แท็บ 2 แท็บ 3) เพื่อขยาย / ยุบเนื้อหาที่แบ่งออกเป็นส่วนตรรกะเช่นเดียวกับแท็บ

การใช้พับได้

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก collapsible ในวิดเจ็ตหีบเพลงของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>

ที่นี่เราได้ตั้งพับไปจริง คลิกที่ส่วนหัวของหีบเพลงซึ่งจะช่วยให้สามารถยุบส่วนที่ใช้งานได้

การใช้ heightStyle

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก heightStyle ในวิดเจ็ตหีบเพลงของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>

ที่นี่เรามีหีบเพลงสองอันอันแรกมีตัวเลือกheightStyleตั้งค่าเป็นเนื้อหาซึ่งช่วยให้แผงหีบเพลงสามารถรักษาความสูงดั้งเดิมได้ หีบเพลงสองมีheightStyleชุดตัวเลือกในการเติมสคริปต์จะกำหนดขนาดของหีบเพลงโดยอัตโนมัติเพื่อให้ความสูงของภาชนะพ่อแม่ของตน

$ (ตัวเลือกบริบท) .accordion ("action", params) Method

วิธีหีบเพลง ("action", params)สามารถดำเนินการกับองค์ประกอบของหีบเพลงได้เช่นการเลือก / ยกเลิกการเลือกเมนูหีบเพลง การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่น "ปิดการใช้งาน" ปิดใช้งานเมนูทั้งหมด) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

$(selector, context).accordion ("action", params);;

ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$(".selector").accordion("destroy");
$(".selector").accordion("disable");
$(".selector").accordion("enable");
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
var options = $( ".selector" ).accordion( "option" );
$( ".selector" ).accordion( "option", "disabled", true );
$( ".selector" ).accordion( "option", { disabled: true } );
$(".selector").accordion("refresh");
var widget = $( ".selector" ).accordion( "widget" );

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ทำลาย การกระทำนี้ทำลายการทำงานของหีบเพลงขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Action - destroy การกระทำนี้ทำลายการทำงานของหีบเพลงขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น Syntax `$(".selector").accordion("destroy");`
2	ปิดการใช้งาน การดำเนินการนี้ปิดใช้งานเมนูทั้งหมด จะไม่มีการพิจารณาการคลิก วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable การดำเนินการนี้ปิดใช้งานเมนูทั้งหมด จะไม่มีการพิจารณาการคลิก วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").accordion("disable");`
3	เปิดใช้งาน การดำเนินการนี้จะเปิดใช้งานเมนูทั้งหมดอีกครั้ง การคลิกจะถูกพิจารณาอีกครั้ง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable การดำเนินการนี้จะเปิดใช้งานเมนูทั้งหมดอีกครั้ง การคลิกจะถูกพิจารณาอีกครั้ง วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").accordion("enable");`
4	ตัวเลือก (optionName) การดำเนินการนี้ได้รับความคุ้มค่าขององค์ประกอบหีบเพลงเชื่อมโยงกับที่ระบุOptionName สิ่งนี้ใช้ค่า String เป็นอาร์กิวเมนต์ Action - option( optionName ) การดำเนินการนี้ได้รับความคุ้มค่าขององค์ประกอบหีบเพลงเชื่อมโยงกับที่ระบุOptionName สิ่งนี้ใช้ค่า String เป็นอาร์กิวเมนต์ Syntax `var isDisabled = $( ".selector" ).accordion( "option", "disabled" );`
5	ตัวเลือก การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกหีบเพลงปัจจุบัน Action - option การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกหีบเพลงปัจจุบัน Syntax `var options = $( ".selector" ).accordion( "option" );`
6	ตัวเลือก (optionName ค่า) การดำเนินการนี้ตั้งค่าของอ็อพชันหีบเพลงที่เชื่อมโยงกับ optionName ที่ระบุ Action - option( optionName, value ) การดำเนินการนี้ตั้งค่าของอ็อพชันหีบเพลงที่เชื่อมโยงกับ optionName ที่ระบุ Syntax `$( ".selector" ).accordion( "option", "disabled", true );`
7	option (ตัวเลือก) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับหีบเพลง Action - option( options ) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับหีบเพลง โดยที่ตัวเลือกคือแผนที่ของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax `$( ".selector" ).accordion( "option", { disabled: true } );`
8	รีเฟรช การดำเนินการนี้ประมวลผลส่วนหัวและพาเนลใด ๆ ที่เพิ่มหรือลบออกโดยตรงใน DOM จากนั้นคำนวณความสูงของแผงหีบเพลงใหม่ ผลลัพธ์ขึ้นอยู่กับเนื้อหาและตัวเลือก heightStyle วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - refresh การดำเนินการนี้ประมวลผลส่วนหัวและพาเนลใด ๆ ที่เพิ่มหรือลบออกโดยตรงใน DOM จากนั้นคำนวณความสูงของแผงหีบเพลงใหม่ ผลลัพธ์ขึ้นอยู่กับเนื้อหาและตัวเลือก heightStyle วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$(".selector").accordion("refresh");`
9	วิดเจ็ต การดำเนินการนี้ส่งคืนองค์ประกอบวิดเจ็ตหีบเพลง อันที่มีชื่อคลาสui-accordion Action - widget การดำเนินการนี้ส่งคืนองค์ประกอบวิดเจ็ตหีบเพลง อันที่มีชื่อคลาสui-accordion Syntax `var widget = $( ".selector" ).accordion( "widget" );`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของตัวเลือก (OptionName ค่า)วิธีการ

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-5">
         <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
               </ul>
            </div>
         </div>
         <div style = "margin-top:30px">
            <input type = "radio" name = "disable" id = "disableaccordion"  
               value = "disable">Disable accordion
            <input type = "radio" name = "disable" id = "enableaccordion" checked 
               value = "enable">Enable accordion
         </div>
     </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML accordionexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -

ที่นี่เราสาธิตการเปิดใช้งานและการปิดใช้งานหีบเพลง เลือกปุ่มตัวเลือกที่เกี่ยวข้องเพื่อตรวจสอบการกระทำแต่ละอย่าง

การจัดการเหตุการณ์เกี่ยวกับองค์ประกอบหีบเพลง

นอกเหนือจากวิธีหีบเพลง (ตัวเลือก) ที่เราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีการจัดกิจกรรมซึ่งจะถูกเรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -

ซีเนียร์	วิธีการและคำอธิบายเหตุการณ์
1	เปิดใช้งาน (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อเปิดใช้งานเมนู เหตุการณ์นี้เริ่มทำงานเมื่อเปิดใช้งานพาเนลเท่านั้นจะไม่เริ่มทำงานสำหรับพาเนลเริ่มต้นเมื่อสร้างวิดเจ็ตหีบเพลง Event - activate(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อเปิดใช้งานเมนู เหตุการณ์นี้เริ่มทำงานเมื่อเปิดใช้งานพาเนลเท่านั้นจะไม่เริ่มทำงานสำหรับพาเนลเริ่มต้นเมื่อสร้างวิดเจ็ตหีบเพลง ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - newHeader - วัตถุ jQuery แสดงส่วนหัวที่เพิ่งเปิดใช้งาน oldHeader - วัตถุ jQuery ที่แสดงส่วนหัวที่เพิ่งปิดใช้งาน newPanel - วัตถุ jQuery แสดงแผงที่เพิ่งเปิดใช้งาน oldPanel - วัตถุ jQuery ที่แสดงถึงพาเนลที่เพิ่งปิดใช้งาน Syntax `$( ".selector" ).accordion({ activate: function( event, ui ) {} });`
2	beforeActivate (เหตุการณ์, UI) เหตุการณ์นี้ถูกทริกเกอร์ก่อนที่จะเปิดใช้งานแผงควบคุม กิจกรรมนี้สามารถยกเลิกได้เพื่อป้องกันไม่ให้แผงเปิดใช้งาน Event - beforeActivate(event, ui) เหตุการณ์นี้ถูกทริกเกอร์ก่อนที่จะเปิดใช้งานแผงควบคุม กิจกรรมนี้สามารถยกเลิกได้เพื่อป้องกันไม่ให้แผงเปิดใช้งาน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - newHeader - วัตถุ jQuery แสดงส่วนหัวที่กำลังจะเปิดใช้งาน oldHeader - วัตถุ jQuery แสดงส่วนหัวที่กำลังจะปิดใช้งาน newPanel - วัตถุ jQuery ที่แสดงถึงพาเนลที่กำลังจะเปิดใช้งาน oldPanel - วัตถุ jQuery ที่เป็นตัวแทนของพาเนลที่กำลังจะปิดใช้งาน Syntax `$( ".selector" ).accordion({ beforeActivate: function( event, ui ) {} });`
3	สร้าง (เหตุการณ์, UI) เหตุการณ์นี้จะเกิดขึ้นเมื่อหีบเพลงถูกสร้างขึ้น Event - create(event, ui) เหตุการณ์นี้จะเกิดขึ้นเมื่อหีบเพลงถูกสร้างขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ ค่าที่เป็นไปได้ของUIคือ - header - วัตถุ jQuery แสดงส่วนหัวที่ใช้งานอยู่ panel - วัตถุ jQuery ที่แสดงแผงที่ใช้งานอยู่ Syntax `$( ".selector" ).accordion({ create: function( event, ui ) {} });`

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเมธอดเหตุการณ์ในวิดเจ็ตหีบเพลง ตัวอย่างนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์ที่เกิดขึ้นสร้าง , beforeActiveและการใช้งาน

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion 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>
      
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>

ที่นี่เรากำลังแสดงข้อความที่ด้านล่างตามเหตุการณ์