jQuery UI API - พับสมาชิกแผงควบคุม (หีบเพลง Widget)
หมวดหมู่
การใช้
รายละเอียด: แปลงคู่หนึ่งชื่อและเนื้อหาของแผงจะพับเป็นแผง
ใหม่เวอร์ชัน: 1.0
พับภาชนะบรรจุแผงที่มีป้ายกำกับต้องมีชื่อเรื่องและเนื้อหาของแผง
<div id = "หีบเพลง"> <h3> หัวแรก </ h3> <div> แผงเนื้อหาแรก </ div> <h3> ส่วนหัวที่สอง </ h3> <div> แผงเนื้อหาสอง </ div> </ div>
พับแผงสนับสนุนแท็กใด ๆ แต่เนื้อหาของแต่ละแผงจะต้องอยู่ในระดับเดียวกันที่เกี่ยวข้องกับแผงหัว ดู header
ตัวเลือกเกี่ยวกับวิธีการใช้โครงสร้างแท็กที่กำหนดเอง
แผงสามารถตั้งค่า active
โปรแกรมเปิดใช้งานตัวเลือก
ปฏิสัมพันธ์แป้นพิมพ์
เมื่อโฟกัสอยู่ในชื่อเรื่อง (หัว) บนแป้นพิมพ์คำสั่งต่อไปนี้:
- UP / ซ้าย - เลื่อนเคอร์เซอร์ไปที่ชื่อ (หัว) หากชื่อแรก (หัว), โฟกัสจะย้ายไปที่ชื่อสุดท้าย (หัว) บน
- ลง / ขวา - เลื่อนเคอร์เซอร์ไปที่ชื่อเรื่องถัดไป (หัว) หากในตอนท้ายของชื่อ (หัว), โฟกัสจะย้ายไปที่ชื่อแรก (หัว) บน
- บ้าน - เลื่อนเคอร์เซอร์ไปที่ชื่อแรก (หัว) บน
- END - เลื่อนเคอร์เซอร์ที่ชื่อสุดท้าย (หัว) บน
- SPACE / ENTER - เปิดใช้งานชื่อมุ่งเน้น (หัว) แผงที่เกี่ยวข้อง (Panel)
เมื่อ (Panel) เมื่อโฟกัสอยู่บนแผงแป้นพิมพ์คำสั่งต่อไปนี้:
- CTRL + UP: เลื่อนเคอร์เซอร์ไปที่ชื่อเรื่องที่เกี่ยวข้อง (หัว)
ชุดรูปแบบ
พับสมาชิกแผงควบคุม (หีบเพลง Widget) โดยใช้ กรอบ jQuery UI CSS เพื่อกำหนดรูปลักษณ์และความรู้สึกของสไตล์ หากคุณจำเป็นต้องใช้แผงพับสไตล์ที่ระบุคุณสามารถใช้ชื่อคลาส CSS ต่อไปนี้:
-
ui-accordion
: พับแผงภาชนะนอก-
ui-accordion-header
: ชื่อหีบเพลง ถ้าชื่อมีicons
ชื่อมิฉะนั้นจะมีui-accordion-icons
ชั้น -
ui-accordion-content
: แผงเนื้อหาหีบเพลง
-
วางใจ
- UI หลัก (UI หลัก)
- ห้องสมุดองค์ประกอบ (โรงงาน Widget)
- ผลกระทบหลัก (หลักผลกระทบ) (ไม่จำเป็นเมื่อและ
animate
เมื่อใช้ร่วมกับตัวเลือก)
ข้อมูลเพิ่มเติม
- ส่วนที่ต้องมีการทำงาน CSS มิฉะนั้นมันจะไม่ทำงาน ถ้าคุณสร้างธีมที่กำหนดเองใช้วิดเจ็ตที่ระบุ CSS แฟ้มเป็นจุดเริ่มต้น
นำทางอย่างรวดเร็ว
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
active | Boolean 或 Integer | 当前打开哪一个面板。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).accordion({ active: 2 }); 在初始化后,获取或设置 // getter var active = $( ".selector" ).accordion( "option", "active" ); // setter $( ".selector" ).accordion( "option", "active", 2 ); |
0 |
animate | Boolean 或 Number 或 String 或 Object | 是否使用动画改变面板,且如何使用动画改变面板。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).accordion({ animate: "bounceslide" }); 在初始化后,获取或设置 // getter var animate = $( ".selector" ).accordion( "option", "animate" ); // setter $( ".selector" ).accordion( "option", "animate", "bounceslide" ); |
{} |
collapsible | Boolean | 所有部分是否都可以马上关闭。允许折叠激活的部分。 代码实例: 初始化带有指定 $( ".selector" ).accordion({ collapsible: true }); 在初始化后,获取或设置 // getter var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); // setter $( ".selector" ).accordion( "option", "collapsible", true ); |
false |
disabled | Boolean | 如果设置为 true ,则禁用该 accordion。代码实例: 初始化带有指定 $( ".selector" ).accordion({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).accordion( "option", "disabled" ); // setter $( ".selector" ).accordion( "option", "disabled", true ); |
false |
event | String | accordion 头部会作出反应的事件,用以激活相关的面板。可以指定多个事件,用空格间隔。 代码实例: 初始化带有指定 $( ".selector" ).accordion({ event: "mouseover" }); 在初始化后,获取或设置 // getter var event = $( ".selector" ).accordion( "option", "event" ); // setter $( ".selector" ).accordion( "option", "event", "mouseover" ); |
"click" |
header | Selector | 标题元素的选择器,通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。 代码实例: 初始化带有指定 $( ".selector" ).accordion({ header: "h3" }); 在初始化后,获取或设置 // getter var header = $( ".selector" ).accordion( "option", "header" ); // setter $( ".selector" ).accordion( "option", "header", "h3" ); |
"> li > :first-child,> :not(li):even" |
heightStyle | String | 控制 accordion 和每个面板的高度。可能的值:
代码实例: 初始化带有指定 $( ".selector" ).accordion({ heightStyle: "fill" }); 在初始化后,获取或设置 // getter var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); // setter $( ".selector" ).accordion( "option", "heightStyle", "fill" ); |
"auto" |
icons | Object | 标题要使用的图标,与 jQuery UI CSS 框架提供的图标(Icons) 匹配。设置为 false 则不显示图标。
代码实例: 初始化带有指定 $( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }); 在初始化后,获取或设置 // getter var icons = $( ".selector" ).accordion( "option", "icons" ); // setter $( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } ); |
{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" } |
方法 | 返回 | 描述 |
---|---|---|
destroy() | jQuery (plugin only) | 完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
代码实例: 调用 destroy 方法: $( ".selector" ).accordion( "destroy" ); |
disable() | jQuery (plugin only) | 禁用 accordion。
代码实例: 调用 disable 方法: $( ".selector" ).accordion( "disable" ); |
enable() | jQuery (plugin only) | 启用 accordion。
代码实例: 调用 enable 方法: $( ".selector" ).accordion( "enable" ); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 调用该方法: var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前 accordion 选项哈希。
代码实例: 调用该方法: var options = $( ".selector" ).accordion( "option" ); |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的 accordion 选项的值。
代码实例: 调用该方法: $( ".selector" ).accordion( "option", "disabled", true ); |
option( options ) | jQuery (plugin only) | 为 accordion 设置一个或多个选项。
代码实例: 调用该方法: $( ".selector" ).accordion( "option", { disabled: true } ); |
refresh() | jQuery (plugin only) | 处理任何在 DOM 中直接添加或移除的标题和面板,并重新计算 accordion 的高度。结果取决于内容和 heightStyle 选项。
代码实例: 调用 refresh 方法: $( ".selector" ).accordion( "refresh" ); |
widget() | jQuery | 返回一个包含 accordion 的 jQuery 对象。
代码实例: 调用 widget 方法: var widget = $( ".selector" ).accordion( "widget" ); |
事件 | 类型 | 描述 |
---|---|---|
activate( event, ui ) | accordionactivate | 面板被激活后触发(在动画完成之后)。如果 accordion 之前是折叠的,则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。 注意:由于
代码实例: 初始化带有指定 activate 回调的 accordion: $( ".selector" ).accordion({ activate: function( event, ui ) {} }); 绑定一个事件监听器到 accordionactivate 事件: $( ".selector" ).on( "accordionactivate", function( event, ui ) {} ); |
beforeActivate( event, ui ) | accordionbeforeactivate | 面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的,则 ui.oldHeader 和 ui.oldPanel 将是空的 jQuery 对象。如果 accordion 正在折叠,则 ui.newHeader 和 ui.newPanel 将是空的 jQuery 对象。
代码实例: 初始化带有指定 beforeActivate 回调的 accordion: $( ".selector" ).accordion({ beforeActivate: function( event, ui ) {} }); 绑定一个事件监听器到 accordionbeforeactivate 事件: $( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} ); |
create( event, ui ) | accordioncreate | 当创建 accordion 时触发。如果 accordion 是折叠的, ui.header 和 ui.panel 将是空的 jQuery 对象。
代码实例: 初始化带有指定 create 回调的 accordion: $( ".selector" ).accordion({ create: function( event, ui ) {} }); 绑定一个事件监听器到 accordioncreate 事件: $( ".selector" ).on( "accordioncreate", function( event, ui ) {} ); |
ตัวอย่าง
ง่ายหีบเพลง jQuery UI (หีบเพลง)
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> สมาชิกแผงพับ (หีบเพลง Widget) สาธิต </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ head> <body> <div id = "หีบเพลง"> <h3> ส่วนที่ 1 </ h3> <div> <p> มาร์ทมาร์ท ante, blandit et, ultrices ที่ Eget suscipit จำนวนเต็ม UT วัด. Vivamus ค้างคา Metus, molestie หรือ, Gravida ใน condimentum Amet นั่ง, ในขณะนี้. น้ำอะแดปเตอร์ได้. แบบพกพา suscipit อยู่ น้ำไมล์. ไมโครเวฟ viverra สิงห์ UT Odio. </ p> </ div> <h3> ส่วนที่ 2 </ h3> <div> <p> SED ไม่ใช่ urna. Phasellus สหภาพยุโรป ligula. การพนัน Amet นั่ง Purus Vivamus สำนัก, บังคับ aliquet ปั๊ม, มาร์ท turpis velit, faucibus interdum เทลลัส Libero AC Justo. </ p> </ div> <h3> ส่วนที่ 3 </ h3> <div> <p> น้ำ enim Risus, molestie et, AC Porta, แบ่งปัน AC, Risus Quisque lobortis.Phasellus pellentesque Purus ใน Massa. </ p> <ul> <li> รายการหนึ่ง </ li> <li> รายการรายการที่สอง </ li> <li> รายการสาม </ li> </ ul> </ div> </ div> <script> $ ( "#accordion") .accordion (); </ script> </ body> </ html>