집 >웹 프론트엔드 >JS 튜토리얼 >Bootstarp는 축소 가능한 구성 요소_javascript 팁을 생성합니다.

Bootstarp는 축소 가능한 구성 요소_javascript 팁을 생성합니다.

WBOY원래의: 2016-05-16 15:14:061335검색

이 글에서는 Bootstarp를 통해 접을 수 있는 컴포넌트를 생성하는 방법에 대해 알아볼 것입니다.
필요한 것
jquery.js 및 bootstrap-collapse.js를 참조해야 합니다. 두 JavaScript 파일은 모두 docs/assets/js 폴더에 있습니다.
JavaScript를 많이 작성하거나 JavaScript를 호출하지 않고도 축소 가능한 구성 요소를 만들 수 있습니다.
예
첫 번째 예에서는 JavaScript를 호출하지 않고 축소 가능한 구성 요소를 만드는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>collapsible example</title>
  <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
  <div class="container-fluid">
   <div class="accordion" id="accordion2">
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
         Click me to exapand. Click me again to collapse. Part I.
        </a>
       </div>
       <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
        <div class="accordion-inner">
         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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
       </div>
      </div>
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
         Click me to exapand. Click me again to collapse. Part II.
        </a>
       </div>
       <div id="collapseTwo" class="accordion-body collapse">
        <div class="accordion-inner">
         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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
       </div>
      </div>
      <div class="accordion-group">
       <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
         Click me to exapand. Click me again to collapse. Part III.
        </a>
       </div>
       <div id="collapseThree" class="accordion-body collapse">
        <div class="accordion-inner">
         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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
       </div>
      </div>
     </div>
  </div>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
 <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

설명
여기서 주목해야 할 세 가지 사항이 있습니다. 먼저 구성요소를 확장하거나 축소하기 위해 클릭하려는 링크에 data-toggle="collapse"를 추가하세요.
둘째, 값이 하위 구성 요소의 ID인 상위 구성 요소에 href 또는 data-target 속성을 추가합니다.
셋째, 데이터 부모 속성을 추가하여 아코디언 효과를 만듭니다. data-parent 속성의 값은 기본 컨테이너 div(전체 아코디언 구성 요소를 보유함)의 id 속성 값과 동일합니다. 아코디언만큼 복잡할 필요가 없는 간단한 아코디언 구성 요소를 만들려는 경우에는 이 속성을 추가할 필요가 없습니다.
예시
두 번째 예에서는 간단한 축소 가능한 구성 요소를 만드는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>collapsible via JavaScript example</title>
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div>
<div id="demo" class="collapse">
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. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>

JavaScript를 통한 통화
아래 코드를 사용하면 JavaScript를 통해 축소를 실행할 수 있습니다.

 $(".collapse").collapse()

옵션, 방법 및 이벤트
Bootstrap Collapsible JavaScript 플러그인을 통해 사용할 수 있는 몇 가지 옵션, 메서드 및 이벤트는 다음과 같습니다. 세부 내용은 다음과 같습니다.
옵션
parent:값 유형은 선택기입니다. 기본값은 false입니다. 상위 요소가 표시되면 상위 요소 아래의 모든 축소 가능한 요소가 닫힙니다.
토글: 값은 부울 유형입니다. 기본값은 true입니다. 호출되면 모든 축소 가능한 요소를 전환합니다.
토글: 값은 부울 유형입니다. 기본값은 true입니다. 호출되면 모든 축소 가능한 요소를 전환합니다.
방법
.collapse(options): 접을 수 있는 콘텐츠를 트리거합니다. 선택적 옵션 개체를 허용합니다.
.collapse('toggle'): 접을 수 있는 페이지 요소를 표시하거나 숨깁니다.
.collapse('show'): 축소 가능한 페이지 요소를 표시합니다.
.collapse(hide): 접을 수 있는 페이지 요소를 숨깁니다.
이벤트
show: 이 이벤트는 show 인스턴스 메소드가 호출된 직후에 트리거됩니다.
표시됨: 이 이벤트는 접을 수 있는 페이지 요소가 표시될 때(그리고 CSS 전환 효과가 실행될 때) 트리거됩니다.
hide: 이 이벤트는 hide 인스턴스 메소드가 호출된 직후에 트리거됩니다.
Hidden: 이 이벤트는 축소 가능한 페이지 요소가 사용자에게 숨겨질 때(그리고 CSS 전환 효과가 완료되었을 때) 트리거됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：JavaScript 폭포 흐름 이미지 지연 로딩 example_javascript 기술다음 기사：JavaScript 폭포 흐름 이미지 지연 로딩 example_javascript 기술

Bootstarp는 축소 가능한 구성 요소_javascript 팁을 생성합니다.

관련 기사