Latest web development tutorials

의 jQuery UI의 API - 접이식 패널 부재 (아코디언 위젯)

범주

위젯 (위젯)

용법

설명 : 일쌍 제목과 패널의 콘텐츠 변환은 패널로 접혀.

새 버전 : 1.0

접는 패널 라벨이 붙은 용기는 패널의 제목과 내용이 필요합니다. 

<사업부 아이디 = "아코디언">
  <H3> 우선 헤더 </ H3>
  <DIV> 첫 번째 콘텐츠 패널 </ DIV>
  <H3> 두 번째 헤더 </ H3>
  <DIV> 두 번째 콘텐츠 패널 </ DIV>
</ DIV>

패널이 어떤 태그를 지원 접는 있지만, 각 패널의 내용 헤드 패널과 관련된 동일한 레벨이어야한다. 참고 항목 header 사용자 정의 태그 구조를 사용하는 방법에 대한 옵션을.

패널을 설정할 수 있습니다 active 프로그래밍 옵션을 활성화합니다.

키보드 상호 작용

포커스가 타이틀 (헤더)에있을 때, 다음 키보드 명령을 사용할 수있다 :

  • LEFT UP /이 - 제목 (헤더)에 커서를 이동합니다. 첫 번째 타이틀 (헤더) 경우, 초점의 마지막 타이틀 (헤더)로 이동합니다.
  • 하 / 좌 - 다음 타이틀 (헤더)에 커서를 이동합니다. 타이틀 (헤더)의 끝에있는 경우, 포커스의 첫 번째 타이틀 (헤더)로 이동한다.
  • HOME은 -의 첫 번째 타이틀 (헤더)에 커서를 이동합니다.
  • END는 -의 마지막 타이틀 (헤더)에 커서를 이동합니다.
  • SPACE / ENTER는 - 포커스 제목 (헤더) 관련 패널 (패널)를 활성화합니다.

경우 (패널) 포커스가 패널하면 다음 키보드 명령을 사용할 수있다 :

  • CTRL + UP : 관련 타이틀 (헤더)에 커서를 이동합니다.

테마

사용하는 패널 부재 (아코디언 위젯) 접는 jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일의 접이식 패널을 사용해야 할 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :

  • ui-accordion 접는 패널 외부 용기 :.
    • ui-accordion-header : 아코디언 제목입니다. 제목이 포함 된 경우 icons , 제목은 그렇지 않은 것 ui-accordion-icons , 클래스를.
    • ui-accordion-content 아코디언 내용 패널 :.

의존

추가 정보

  • 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.

빠른 탐색

选项 方法 事件

选项 类型 描述 默认值
active Boolean 或 Integer 当前打开哪一个面板。

支持多个类型：

  • Boolean ：设置 active 为 false 将折叠所有的面板。这要求 collapsible 选项必须为 true 。
  • Integer ：激活打开的面板索引，以零为基础。负值则表示从最后一个面板后退选择面板。

代码实例：

初始化带有指定 active 选项的 accordion：

$( ".selector" ).accordion({ active: 2 });

在初始化后，获取或设置 active 选项：

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );
0
animate Boolean 或 Number 或 String 或 Object 是否使用动画改变面板，且如何使用动画改变面板。

支持多个类型：

  • Boolean ： false 值将禁用动画。
  • Number ：easing 默认的持续时间，以毫秒计。
  • String ：默认的持续时间要使用的 easing 名称。
  • Object ： easing 和 duration 属性的动画设置。
    • 上面任意的选项都可以包含 down 属性。
    • 当被激活的面板有一个比当前激活面板较低的指数时，发生 "Down" 动画。

代码实例：

初始化带有指定 animate 选项的 accordion：

$( ".selector" ).accordion({ animate: "bounceslide" });

在初始化后，获取或设置 animate 选项：

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
{}
collapsible Boolean 所有部分是否都可以马上关闭。允许折叠激活的部分。

代码实例：

初始化带有指定 collapsible 选项的 accordion：

$( ".selector" ).accordion({ collapsible: true });

在初始化后，获取或设置 collapsible 选项：

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
false
disabled Boolean 如果设置为 true ，则禁用该 accordion。

代码实例：

初始化带有指定 disabled 选项的 accordion：

$( ".selector" ).accordion({ disabled: true });

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );
false
event String accordion 头部会作出反应的事件，用以激活相关的面板。可以指定多个事件，用空格间隔。

代码实例：

初始化带有指定 event 选项的 accordion：

$( ".selector" ).accordion({ event: "mouseover" });

在初始化后，获取或设置 event 选项：

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
"click"
header Selector 标题元素的选择器，通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。

代码实例：

初始化带有指定 header 选项的 accordion：

$( ".selector" ).accordion({ header: "h3" });

在初始化后，获取或设置 header 选项：

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
"> li > :first-child,> :not(li):even"
heightStyle String 控制 accordion 和每个面板的高度。可能的值：
  • "auto" ：所有的面板将会被设置为最高的面板的高度。
  • "fill" ：基于 accordion 的父元素的高度，扩展到可用的高度。
  • "content" ：每个面板的高度取决于它的内容。

代码实例：

初始化带有指定 heightStyle 选项的 accordion：

$( ".selector" ).accordion({ heightStyle: "fill" });

在初始化后，获取或设置 heightStyle 选项：

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
"auto"
icons Object 标题要使用的图标，与 jQuery UI CSS 框架提供的图标（Icons） 匹配。设置为 false 则不显示图标。
  • header （string，默认值："ui-icon-triangle-1-e"）
  • activeHeader （string，默认值："ui-icon-triangle-1-s"）

代码实例：

初始化带有指定 icons 选项的 accordion：

$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } });

在初始化后，获取或设置 icons 选项：

// 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 关联的值。
  • optionName
    类型：String
    描述：要获取的选项的名称。

代码实例：

调用该方法：

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
option() PlainObject 获取一个包含键/值对的对象，键/值对表示当前 accordion 选项哈希。
  • 该方法不接受任何参数。

代码实例：

调用该方法：

var options = $( ".selector" ).accordion( "option" );
option( optionName, value ) jQuery (plugin only) 设置与指定的 optionName 关联的 accordion 选项的值。
  • optionName
    类型：String
    描述：要设置的选项的名称。
  • value
    类型：Object
    描述：要为选项设置的值。

代码实例：

调用该方法：

$( ".selector" ).accordion( "option", "disabled", true );
option( options ) jQuery (plugin only) 为 accordion 设置一个或多个选项。
  • options
    类型：Object
    描述：要设置的 option-value 对。

代码实例：

调用该方法：

$( ".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 部件时，最初的面板不会触发该事件。如果您需要一个用于部件创建的钩，请使用 create 事件。

  • event
    类型：Event
  • ui
    类型：Object
    • newHeader
      类型：jQuery
      描述：刚被激活的标题。
    • oldHeader
      类型：jQuery
      描述：刚被取消激活的标题。
    • newPanel
      类型：jQuery
      描述：刚被激活的面板。
    • oldPanel
      类型：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 对象。
  • event
    类型：Event
  • ui
    类型：Object
    • newHeader
      类型：jQuery
      描述：将被激活的标题。
    • oldHeader
      类型：jQuery
      描述：将被取消激活的标题。
    • newPanel
      类型：jQuery
      描述：将被激活的面板。
    • oldPanel
      类型：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 对象。
  • event
    类型：Event
  • ui
    类型：Object
    • header
      类型：jQuery
      描述：激活的标题。
    • panel
      类型：jQuery
      描述：激活的面板。

代码实例：

初始化带有指定 create 回调的 accordion：

$( ".selector" ).accordion({
  create: function( event, ui ) {}
});

绑定一个事件监听器到 accordioncreate 事件：

$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );

예

간단한 jQuery를 UI 아코디언 (아코디언). 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 접는 패널 부재 (아코디언 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<사업부 아이디 = "아코디언">
  <H3> 1 부 </ H3>
  <DIV>
    <P> Mauris mauris 분담금, blandit 등하는을 ultrices, eget suscipit.
    정수 유타 neque. Vivamus에 NiSi metus, molestie의 VEL에서 gravida,
    condimentum는 AMET NUNC 앉아. 남에게 nibh합니다. Donec 에로스 suscipit.
    남 마일. Proin viverra 레오 유타 ODIO. </ P>
  </ DIV>
  <H3> 제 2 부 </ H3>
  <DIV>
    <P> Sed의 비 urna. Phasellus 유럽 연합 (EU) ligula. 도박은 푸 루스를 AMET 앉아.
    Vivamus의 hendrerit, 슬픔의 aliquet의 laoreet, mauris의 turpis의 velit,
    faucibus interdum TELLUS 리베로 교류 그래서 우린. </ P>
  </ DIV>
  <H3> 섹션 3 </ H3>
  <DIV>
    <P> 남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus.
    Quisque lobortis.Phasellus pellentesque 푸 루스에서 마사. </ P>
    <UL>
      <리> 목록 항목 하나 </ 리>
      <리> 목록 항목이 </ 리>
      <리> 목록 항목 세 </ 리>
    </ UL>
  </ DIV>
</ DIV>
 
<스크립트>
$ ( "#accordion") .accordion ();
</ 스크립트>
 
</ BODY>
</ HTML>