Skip to content

Latest commit

 

History

History
105 lines (91 loc) · 3.93 KB

README.md

File metadata and controls

105 lines (91 loc) · 3.93 KB
Raw

jQuery 플로그인 아코디언 메뉴

개인적으로 사용하려고 만든 플로그인입니다.

설치방법

  • 다운로드.zip 및 min 파일를 다운로드 받습니다.
  • <head></head>사이 또는 <body> 영역에 <script src="accordion.min.js"></script> 삽입하시면 됩니다.

사용하기

  • 1번째 탭 말고도 활성화 가능함.
  • 클래스 변경가능

기본 탭

<dl>요소 사용 예

<dl class="accordion-exam-dl" id="accExamDL">
  <dt class="accordion-heading">
    <a class="accordion-trigger" href="#testPanel" id="testId" aria-controls="testPanel"><span class="accordion-title">아코디언 메뉴1</span></a>
  </dt>
  <dd class="accordion-panel" id="testPanel">아코디언 Panel 1</dd>
  <dt class="accordion-heading">
    <a class="accordion-trigger" href="#" id="testId2" aria-controls="testPanel2"><span class="accordion-title">아코디언 메뉴2</span></a>
  </dt>
  <dd class="accordion-panel" id="testPanel2">아코디언 Panel 2</dd>
</dl>

JavaScript

$(document).ready(function(){
  $('#accExamDL').accordionUi();
});

<ul>요소 사용 예

<ul class="accordion-exam-ul" id="accExamUL">
  <li>
    <div class="accordion-heading">
      <a class="accordion-trigger" href="#" id="testUlBtn" aria-controls="testUlPanel1"><span class="accordion-title">아코디언 메뉴1</span></a>
    </div>
    <div class="accordion-panel" id="testUlPanel1">아코디언 UL Panel 1</div>
  </li>
  <li>
    <div class="accordion-heading">
      <a class="accordion-trigger" href="#" id="testUlBtn2" aria-controls="testUlPanel2"><span class="accordion-title">아코디언 메뉴2</span></a>
    </div>
    <div class="accordion-panel" id="testUlPanel2">아코디언 UL Panel 2</div>
  </li>
</ul>

펼쳐진 상태 기본값

<ul class="accordion-exam-ul open" id="accExamULOpen">
  <li>
    <div class="accordion-heading">
      <a class="accordion-trigger is-current" href="#" id="testUlBtnOpen" aria-controls="testUlOpenPanel1"><span class="accordion-title">아코디언 메뉴1</span></a>
    </div>
    <div class="accordion-panel" id="testUlOpenPanel1">아코디언 UL Panel Open 1</div>
  </li>
  <li>
    <div class="accordion-heading">
      <a class="accordion-trigger is-current" href="#" id="testUlBtnOpen2" aria-controls="testUlOpenPanel2"><span class="accordion-title">아코디언 메뉴2</span></a>
    </div>
    <div class="accordion-panel" id="testUlOpenPanel2">아코디언 UL Panel Open 2</div>
  </li>
  <li>
    <div class="accordion-heading">
      <a class="accordion-trigger is-current" href="#" id="testUlBtnOpen3" aria-controls="testUlOpenPanel3"><span class="accordion-title">아코디언 메뉴3</span></a>
    </div>
    <div class="accordion-panel" id="testUlOpenPanel3">아코디언 UL Panel Open 3</div>
  </li>
</ul>

accordion-trigger에는 is-current를 넣어야 하며,accordion-panel에는 display:block되어야 합니다.

옵션 값

  • triggerClass - accordion-trigger
  • panelClass - accordion-panel
  • headingClass - accordion-heading
  • activeClass - 활성화 클래스 (기본 값: is-current)
  • viewMoving - 화면 이동 (기본 값: false)

옵션 변경

// 화면 이동
$(document).ready(function(){
  $('#accExam').accordionUi({
    viewMoving: true
  });
});

추가 개발 할 예정

  • 키보드 접근에 대한 보완 필요성 보임.
  • div태그 일 경우 수 추가 (uniqueId 만들기)
  • 클릭시 닫히는거 추가 (현재는 닫히는데 옵션 값으로 구분)

마치며

혼자 연습하면서 사용하려고 만들어 봤던 플로그인을 공개합니다. 아직 미완성이라 안되는 것이 은근 많습니다. ㅠㅠ

피드백은 이슈에 해주시면 감사하겠습니다.