MooTools-아코디언

Accordion은 MooTools가 제공하는 가장 인기있는 플러그인입니다. 데이터를 숨기고 드러내는 데 도움이됩니다. 그것에 대해 더 논의합시다.

새로운 아코디언 만들기

아코디언에 필요한 기본 요소는 토글 쌍과 그 내용입니다. html의 제목과 내용의 쌍을 만들어 보겠습니다.

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

위의 HTML 구조를 기반으로 아코디언을 만드는 방법을 이해하려면 다음 구문을 살펴보십시오.

통사론

var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);

예

Accordion의 기본 기능을 정의하는 예를 들어 보겠습니다. 다음 코드를 살펴보십시오.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

다음과 같은 출력을 받게됩니다.

산출

아코디언 옵션

Accordion은 엄청난 기능을 제공합니다. 이러한 기능은 사용자 정의 출력을 제공하기 위해 옵션을 조정하는 데 도움이됩니다.

디스플레이

이 옵션은 페이지로드시 표시되는 요소를 결정합니다. 기본값은 0으로 설정되어 있으므로 첫 번째 요소가 표시됩니다. 다른 요소를 설정하려면 해당 인덱스에 해당하는 다른 정수를 입력하십시오. "show"와 달리 디스플레이는 요소가 열린 상태로 전환됩니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   display: 0 //default is 0
});

보여 주다

"display"와 마찬가지로 show는 페이지가로드 될 때 열리는 요소를 결정하지만 전환 대신 "show"는 전환없이로드시 콘텐츠를 표시합니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   show: 0 //default is 0
});

신장

true로 설정하면 표시된 요소 사이를 전환 할 때 높이 전환 효과가 발생합니다. 이것은 위에 표시된 표준 아코디언 설정입니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   height: true //default is true
});

폭

이것은 다음과 같이 작동합니다. height선택권. 그러나 콘텐츠를 표시하기 위해 높이를 전환하는 대신 너비 전환에 도움이됩니다. 위에서 사용한 것과 같이 표준 설정으로 "너비"를 사용하면 콘텐츠 높이에 따라 제목 토글 사이의 공간이 동일하게 유지됩니다. 그러면 "content"div가 왼쪽에서 오른쪽으로 전환되어 해당 공간에 표시됩니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   width: false //default is false
});

불투명

이 옵션은 일부 콘텐츠를 숨기거나 표시 할 때 불투명 전환 효과를 표시할지 여부를 결정합니다. 위의 기본 옵션을 사용하고 있기 때문에 효과를 확인할 수 있습니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   opacity: true //default is true
});

fixedHeight

고정 높이를 설정하려면 정수를 고정해야합니다 (예 : 높이가 100px 인 콘텐츠에 대해 100을 입력 할 수 있음). 콘텐츠의 자연 높이보다 작은 고정 높이를 계획하는 경우 일종의 CSS 오버플로 속성과 함께 사용해야합니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false //default is false
});

fixedWidth

위의 "fixedHeight"와 마찬가지로이 옵션에 정수를 제공하면 너비가 설정됩니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedWidth: false //default is false
});

항상 숨기기

이 옵션을 사용하면 제목에 토글 컨트롤을 추가 할 수 있습니다. 이 값을 true로 설정하면 열린 콘텐츠 제목을 클릭하면 콘텐츠 요소가 다른 항목을 열지 않고 자동으로 닫힙니다. 다음 예제에서 실행을 볼 수 있습니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   alwaysHide: false //default is false
});

아코디언 이벤트

이러한 이벤트를 통해 Accordion의 모든 작업에 대한 기능을 만들 수 있습니다.

onActive

이것은 요소를 열 때 실행됩니다. 토글 컨트롤 요소와 열려있는 콘텐츠 요소와 매개 변수도 전달합니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onActive: function(toggler, element) {
      toggler.highlight('#76C83D'); //green
      element.highlight('#76C83D');
   }
});

onBackground

이것은 요소가 숨기기 시작하고 닫히지 만 열리지 않는 다른 모든 요소를 ​​전달하기 시작할 때 실행됩니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onBackground: function(toggler, element) {
      toggler.highlight('#DC4F4D'); //red
      element.highlight('#DC4F4D');
   }
});

onComplete

이것은 표준 onComplete 이벤트입니다. 콘텐츠 요소를 포함하는 변수를 전달합니다.

Syntax

var AccordionObject = new Accordion(toggles, content {
   onComplete: function(one, two, three, four){
      one.highlight('#5D80C8'); //blue
      two.highlight('#5D80C8');
      three.highlight('#5D80C8');
      four.highlight('#5D80C8');
   }
});

아코디언 방법

이러한 방법은 아코디언 섹션을 만들고 조작하는 데 도움이됩니다.

addSection ()

이 방법으로 섹션 (토글 / 콘텐츠 요소 쌍)을 추가 할 수 있습니다. 우리가 본 다른 많은 방법들처럼 작동합니다. 먼저 아코디언 객체를 참조하고 .addSection을 사용한 다음 제목의 ID, 콘텐츠의 ID를 호출하고 마지막으로 새 콘텐츠를 표시 할 위치를 지정할 수 있습니다 (0이 첫 번째 지점).

Syntax

AccordionObject.addSection('togglersID', 'elementsID', 2);

Note− 이와 같은 섹션을 추가하면 인덱스 2의 스팟에 표시되지만 실제 인덱스는 마지막 인덱스 +1이됩니다. 따라서 배열에 5 개의 항목 (0-4)이 있고 6 번째 항목 을 추가하면 .addSection ();

디스플레이()

이렇게하면 주어진 요소를 열 수 있습니다. 인덱스로 요소를 선택할 수 있습니다 (따라서 요소 쌍을 추가하고 표시하려는 경우 위에서 사용했던 것과 다른 인덱스가 여기에있게됩니다).

Syntax

AccordionObject.display(5); //would display the newly added element

Example

다음 예제는 몇 가지 효과가있는 아코디언 기능을 설명합니다. 다음 코드를 살펴보십시오.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            
            var AccordionObject = new Fx.Accordion(toggles, content, {
               show: 0,
               height : true,
               width : false,
               opacity: true,
               fixedHeight: false,
               fixedWidth: false,
               alwaysHide: true,
               
               onActive: function(toggler, element) {
                  toggler.highlight('#DC7633'); //green
                  element.highlight('#DC7633');
                  $('active').highlight('#DC7633');
               },
               
               onBackground: function(toggler, element) {
                  toggler.highlight('#AED6F1'); //red
                  element.highlight('#AED6F1');
                  $('background').highlight('#F4D03F');
               }
            });
            $('display_section').addEvent('click', function(){
               AccordionObject.display(4);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">Here is the content of toggle 1 Here is the content of
            toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
            is the content of toggle 1 Here is the content of toggle 1 Here is the content
            of toggle 1 Here is the content of toggle 1</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

Output

각 토글 섹션을 클릭하면 숨겨진 데이터와 모든 작업에 대한 이벤트 표시기를 찾을 수 있습니다.

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