JqueryUI-아코디언

jQueryUI의 아코디언 위젯은 섹션으로 나뉘며 탭처럼 보이는 jQuery 기반 확장 및 축소 가능 콘텐츠 홀더입니다. jQueryUI는이를 달성하기 위해 accordion () 메서드를 제공합니다.

통사론

그만큼 accordion() 방법은 두 가지 형태로 사용될 수 있습니다-

  • $ (selector, context) .accordion (options) 메서드

  • $ (selector, context) .accordion ( "action", params) 메서드

$ (선택기, 컨텍스트) .accordion (옵션) 메서드

아코디언 (옵션) 방법은 HTML 요소와 내용이 처리 아코디언 메뉴으로서 관리되어야한다는 것을 선언한다. 옵션이 포함 된 메뉴의 모양과 동작을 지정하는 객체입니다 매개 변수입니다.

통사론

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

Javascript 객체를 사용하여 한 번에 하나 이상의 옵션을 제공 할 수 있습니다. 제공 할 옵션이 두 개 이상인 경우 다음과 같이 쉼표를 사용하여 구분합니다.

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

다음 표는 이 방법과 함께 사용할 수있는 다양한 옵션 을 나열합니다.

Sr. 아니. 옵션 및 설명
1 유효한

페이지에 처음 액세스 할 때 열리는 메뉴의 색인을 나타냅니다. 기본적으로 값은0, 즉 첫 번째 메뉴.

Option - active

페이지에 처음 액세스 할 때 열리는 메뉴의 색인을 나타냅니다. 기본적으로 값은0, 즉 첫 번째 메뉴.

이것은 유형이 될 수 있습니다-

  • Boolean− false로 설정하면 모든 패널이 축소됩니다. 축소 가능 옵션이 true 여야 합니다 .

  • Integer− 활성화 된 (열린) 패널의 0부터 시작하는 인덱스. 음수 값은 마지막 패널에서 뒤로 이동하는 패널을 선택합니다.

Syntax

$( ".selector" ).accordion(
   { active: 2 }
);
2 생명 있는

이 옵션은 변경되는 패널을 애니메이션하는 방법을 설정하는 데 사용됩니다. 기본적으로 값은{}.

Option - animate

이 옵션은 변경되는 패널을 애니메이션하는 방법을 설정하는 데 사용됩니다. 기본적으로 값은{}.

이것은 유형이 될 수 있습니다-

  • Boolean− false 값은 애니메이션을 비활성화합니다.

  • Number − 이것은 밀리 초 단위의 기간입니다.

  • String − 기본 기간과 함께 사용할 여유 이름입니다.

  • Object − 여유 및 기간 속성이있는 애니메이션 설정.

Syntax

$( ".selector" ).accordion(
   { animate: "bounceslide" }
);
삼 접을 수 있는

이 옵션을 true로 설정 하면 사용자가 메뉴를 클릭하여 닫을 수 있습니다. 기본적으로 열린 패널의 헤더를 클릭해도 효과가 없습니다. 기본적으로 값은false.

Option - collapsible

이 옵션을 true로 설정 하면 사용자가 메뉴를 클릭하여 닫을 수 있습니다. 기본적으로 열린 패널의 헤더를 클릭해도 효과가 없습니다. 기본적으로 값은false.

Syntax

$( ".selector" ).accordion(
   { collapsible: true }
);
4 장애인

이 옵션을 true로 설정 하면 아코디언이 비활성화됩니다. 기본적으로 값은false.

Option - disabled

이 옵션을 true로 설정 하면 아코디언이 비활성화됩니다. 기본적으로 값은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 아이콘

이 옵션은 열린 패널과 닫힌 패널의 헤더 텍스트 왼쪽에 사용할 아이콘을 정의하는 객체입니다. 닫힌 패널에 사용할 아이콘은 header 라는 속성 으로 지정되고 열린 패널에 사용할 아이콘은 headerSelected 라는 속성으로 지정 됩니다 . 기본적으로 값은{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

Option - icons

이 옵션은 열린 패널과 닫힌 패널의 헤더 텍스트 왼쪽에 사용할 아이콘을 정의하는 객체입니다. 닫힌 패널에 사용할 아이콘은 header 라는 속성 으로 지정되고 열린 패널에 사용할 아이콘은 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.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

헤더 (Tab 1, Tab 2, Tab 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>

위 코드를 HTML 파일에 저장하겠습니다. accordionexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

여기서 우리는 collapsible을 true로 설정했습니다 . 아코디언 헤더를 클릭하면 활성 섹션을 접을 수 있습니다.

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>

위 코드를 HTML 파일에 저장하겠습니다. accordionexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

여기에 두 개의 아코디언이 있습니다. 첫 번째 아코디언에는 heightStyle 옵션이 content로 설정되어 아코디언 패널이 기본 높이를 유지할 수 있습니다. 두 번째 아코디언에는 heightStyle 옵션이 fill로 설정되어 있으며 스크립트는 아코디언의 크기를 부모 컨테이너의 높이로 자동 설정합니다.

$ (selector, context) .accordion ( "action", params) 메서드

아코디언 ( "액션"PARAMS) 방법은 선택 / 선택 해제 아코디언 메뉴와 아코디언 요소에서 동작을 수행 할 수있다. 작업은 첫 번째 인수의 문자열로 지정됩니다 (예 : "disable"은 모든 메뉴를 비활성화 함). 다음 표에서 전달할 수있는 조치를 확인하십시오.

통사론

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

다음 표는 이 방법과 함께 사용할 수있는 다양한 작업 을 나열합니다.

Sr. 아니. 액션 및 설명
1 멸하다

이 작업은 요소의 아코디언 기능을 완전히 파괴합니다. 요소는 초기화 이전 상태로 돌아갑니다.

Action - destroy

이 작업은 요소의 아코디언 기능을 완전히 파괴합니다. 요소는 초기화 이전 상태로 돌아갑니다.

Syntax

$(".selector").accordion("destroy");
2 비활성화

이 작업은 모든 메뉴를 비활성화합니다. 클릭은 고려되지 않습니다. 이 메서드는 인수를 허용하지 않습니다.

Action - disable

이 작업은 모든 메뉴를 비활성화합니다. 클릭은 고려되지 않습니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").accordion("disable");
삼 활성화

이 작업은 모든 메뉴를 다시 활성화합니다. 클릭이 다시 고려됩니다. 이 메서드는 인수를 허용하지 않습니다.

Action - enable

이 작업은 모든 메뉴를 다시 활성화합니다. 클릭이 다시 고려됩니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").accordion("enable");
4 옵션 (optionName)

이 조치는 지정된 optionName 과 현재 연관된 아코디언 요소의 값을 가져 옵니다 . 인수로 문자열 값을받습니다.

Action - option( optionName )

이 조치는 지정된 optionName 과 현재 연관된 아코디언 요소의 값을 가져 옵니다 . 인수로 문자열 값을받습니다.

Syntax

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
5 선택권

이 작업은 현재 아코디언 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다.

Action - option

이 작업은 현재 아코디언 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 객체를 가져옵니다.

Syntax

var options = $( ".selector" ).accordion( "option" );
6 옵션 (optionName, value)

이 조치는 지정된 optionName과 연관된 아코디언 옵션의 값을 설정합니다.

Action - option( optionName, value )

이 조치는 지정된 optionName과 연관된 아코디언 옵션의 값을 설정합니다.

Syntax

$( ".selector" ).accordion( "option", "disabled", true );
7 옵션 (옵션)

이 작업은 아코디언에 대한 하나 이상의 옵션을 설정합니다.

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" );

예

이제 위 표의 작업을 사용한 예를 살펴 보겠습니다. 다음 예제는 option (optionName, value) 메서드 의 사용을 보여줍니다 .

<!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는 특정 이벤트에 대해 트리거되는 이벤트 메소드를 제공합니다. 이러한 이벤트 방법은 다음과 같습니다.

Sr. 아니. 이벤트 방법 및 설명
1 활성화 (이벤트, UI)

이 이벤트는 메뉴가 활성화 될 때 트리거됩니다. 이 이벤트는 패널 활성화시에만 발생하며 아코디언 위젯이 생성 될 때 초기 패널에 대해서는 발생하지 않습니다.

Event - activate(event, ui)

이 이벤트는 메뉴가 활성화 될 때 트리거됩니다. 이 이벤트는 패널 활성화시에만 발생하며 아코디언 위젯이 생성 될 때 초기 패널에 대해서는 발생하지 않습니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값 은-

  • newHeader − 방금 활성화 된 헤더를 나타내는 jQuery 객체.

  • oldHeader − 방금 비활성화 된 헤더를 나타내는 jQuery 객체.

  • newPanel − 방금 활성화 된 패널을 나타내는 jQuery 객체.

  • oldPanel − 방금 비활성화 된 패널을 나타내는 jQuery 객체.

Syntax

$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});
2 beforeActivate (이벤트, UI)

이 이벤트는 패널이 활성화되기 전에 트리거됩니다. 이 이벤트는 패널이 활성화되지 않도록 취소 할 수 있습니다.

Event - beforeActivate(event, ui)

이 이벤트는 패널이 활성화되기 전에 트리거됩니다. 이 이벤트는 패널이 활성화되지 않도록 취소 할 수 있습니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값 은-

  • newHeader − 곧 활성화 될 헤더를 나타내는 jQuery 객체.

  • oldHeader − 비활성화 될 헤더를 나타내는 jQuery 객체.

  • newPanel − 곧 활성화 될 패널을 나타내는 jQuery 객체.

  • oldPanel − 비활성화 될 패널을 나타내는 jQuery 객체.

Syntax

$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});
삼 생성 (이벤트, UI)

이 이벤트는 아코디언이 생성 될 때 트리거됩니다.

Event - create(event, ui)

이 이벤트는 아코디언이 생성 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값 은-

  • header − 활성 헤더를 나타내는 jQuery 객체.

  • panel − 활성 패널을 나타내는 jQuery 객체.

Syntax

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

예

다음 예제는 아코디언 위젯에서 이벤트 메소드 사용을 보여줍니다. 이 예제는 이벤트 create , beforeActive 및 active 사용을 보여줍니다 .

<!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>

위 코드를 HTML 파일에 저장하겠습니다. accordionexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

여기서는 이벤트를 기반으로 하단에 텍스트를 표시합니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved