【jQuery】ユーザーフレンドリーなドロップダウンARIA DROPDOWN

jQuery

ARIA DROPDOWN

February 11, 2018

ARIA DROPDOWNはユーザーフレンドリーでアクセス可能なドロップダウン用のHTML、CSS、JS UIコンポーネント。

Dependencies

jQuery 3.2.1でテスト済み

Cross-browser tests

Google Chrome 57 / macOS Sierra 10でテスト済み
Google Chrome 60 / Windows 10でテスト済み

Usage

  1. dropdown.jsをインクルード
  2. dropdown.cssをインクルード

HTMLマークアップを使用してドロップダウンを実装

<div class="dropdown">
  <button type="button" class="dropdown__btn">Dropdown</button>
  <div class="dropdown__menu">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
    </ul>
    <button type="button" class="dropdown__dismiss-btn">Close dropdown</button>
  </div>
</div>

JS

$('.dropdown').ariaDropdown({
  option1: value1,
  option2: value2
});

Options

  1. btnClass
  2. menuClass
  3. dropdownExpandedClass
  4. btnExpandedClass
  5. menuExpandedClass
  6. slideSpeed
  7. easing
  8. collapseOnOutsideClick
  9. collapseOnMenuClick
  10. expandOnlyOne
  11. cssTransitions
  12. expandZIndex
  13. collapseZIndex
  14. mouse
  15. dynamicBtnLabel

Methods

$('#my-dropdown').ariaDropdown('methodName');

以下のメソッドをサポート

  1. slideDown
  2. slideUp
  3. toggle
  4. destroy

Custom events

  1. ariaDropdown.initialised
  2. ariaDropdown.slideDown
  3. ariaDropdown.slideUp
  4. ariaDropdown.destroyed
//listen for ariaDropdowns.slideDown
$(window).on('ariaDropdown.slideDown', function(event, dropdown){
  console.log('The dropdown ' + dropdown.element + ' was expanded');
});

MIT

Latest Posts

Related Posts