@19h47/listbox 中文文档教程

发布于 3年前 浏览 38 项目主页 更新于 3年前

@19h47/listbox

可折叠的单选列表框小部件

Installation

yarn add @19h47/listbox

Usage

const $list = document.querySelector('.js-list');

const $listbox = $list.querySelector('[role="listbox"]');
const $button = $list.querySelector('.js-list-button');

// Init box.
const box = new Listbox.Box($listbox);
box.init();

// Init button.
const button = new Listbox.Button($button, box);
button.init();
<div class="js-list">
    <h2 id="title">Choose an monster</h2>
    <button id="button" aria-labelledby="title button" type="button">Bat</button>
    <ul class="hidden" tabindex="-1" role="listbox" aria-labelledby="title">
        <li id="monster-bat" role="option">Bat</li>
        <li id="monster-bear" role="option">Bear</li>
        <li id="monster-behir" role="option">Behir</li>
        <li id="monster-beholder" role="option">Beholder</li>
        <li id="monster-boar" role="option">Boar</li>
        <li id="monster-bookworm" role="option">Bookworm</li>
        <li id="monster-brownie" role="option">Brownie</li>
        <li id="monster-bugbear" role="option">Bugbear</li>
        <li id="monster-carrion" role="option">Carrion crawler</li>
        <li id="monster-catoblepas" role="option">Catoblepas</li>
        <li id="monster-cats-great" role="option">Cats, great</li>
        <li id="monster-cave-fisher" role="option">Cave fisher</li>
        <li id="monster-centaur-sylvan" role="option">Centaur, sylvan</li>
        <li id="monster-centipede" role="option">Centipede</li>
        <li id="monster-chimera" role="option">Chimera</li>
        <li id="monster-cockatrice" role="option">Cockatrice</li>
        <li id="monster-coualt" role="option">Couatl</li>
        <li id="monster-dragon-turtle" role="option">Dragon turtle</li>
        <li id="monster-hydra" role="option">Hydra</li>
        <li id="monster-minotaur" role="option">Minotaur</li>
        <li id="monster-ogre" role="option">Ogre</li>
        <li id="monster-vampire" role="option">Vampire</li>
        <li id="monster-wyver" role="option">Wyvern</li>
        <li id="monster-yeti" role="option">Yeti</li>
        <li id="monster-yuan-ti" role="option">Yuan-ti</li>
        <li id="monster-zombie" role="option">Zombie</li>
    </ul>
</div>

Keyboard Support

此页面上的示例列表框实现了以下键盘接口。

KeyFunction
Enter- If the focus is on the button, expands the listbox and places focus on the currently selected option in the list.
- If focus is in the listbox , collapses the listbox and keeps the currently selected option as the button label.
EscapeIf the listbox is displayed, collapses the listbox and moves focus to the button.
Down Arrow- Moves focus to and selects the next option.
- If the listbox is collapsed, also expands the list.
Up Arrow- Moves focus to and selects the previous option.
- If the listbox is collapsed, also expands the list.
HomeIf the listbox is displayed, moves focus to and selects the first option.
Printable Characters- Type a character: focus moves to the next item with a name that starts with the typed character.
- Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Event

Button.change

Options

delay

Example

示例位于此处,请参阅来源

References

@19h47/listbox

Collapsible single-select listbox widget

Installation

yarn add @19h47/listbox

Usage

const $list = document.querySelector('.js-list');

const $listbox = $list.querySelector('[role="listbox"]');
const $button = $list.querySelector('.js-list-button');

// Init box.
const box = new Listbox.Box($listbox);
box.init();

// Init button.
const button = new Listbox.Button($button, box);
button.init();
<div class="js-list">
    <h2 id="title">Choose an monster</h2>
    <button id="button" aria-labelledby="title button" type="button">Bat</button>
    <ul class="hidden" tabindex="-1" role="listbox" aria-labelledby="title">
        <li id="monster-bat" role="option">Bat</li>
        <li id="monster-bear" role="option">Bear</li>
        <li id="monster-behir" role="option">Behir</li>
        <li id="monster-beholder" role="option">Beholder</li>
        <li id="monster-boar" role="option">Boar</li>
        <li id="monster-bookworm" role="option">Bookworm</li>
        <li id="monster-brownie" role="option">Brownie</li>
        <li id="monster-bugbear" role="option">Bugbear</li>
        <li id="monster-carrion" role="option">Carrion crawler</li>
        <li id="monster-catoblepas" role="option">Catoblepas</li>
        <li id="monster-cats-great" role="option">Cats, great</li>
        <li id="monster-cave-fisher" role="option">Cave fisher</li>
        <li id="monster-centaur-sylvan" role="option">Centaur, sylvan</li>
        <li id="monster-centipede" role="option">Centipede</li>
        <li id="monster-chimera" role="option">Chimera</li>
        <li id="monster-cockatrice" role="option">Cockatrice</li>
        <li id="monster-coualt" role="option">Couatl</li>
        <li id="monster-dragon-turtle" role="option">Dragon turtle</li>
        <li id="monster-hydra" role="option">Hydra</li>
        <li id="monster-minotaur" role="option">Minotaur</li>
        <li id="monster-ogre" role="option">Ogre</li>
        <li id="monster-vampire" role="option">Vampire</li>
        <li id="monster-wyver" role="option">Wyvern</li>
        <li id="monster-yeti" role="option">Yeti</li>
        <li id="monster-yuan-ti" role="option">Yuan-ti</li>
        <li id="monster-zombie" role="option">Zombie</li>
    </ul>
</div>

Keyboard Support

The example listbox on this page implements the following keyboard interface.

KeyFunction
Enter- If the focus is on the button, expands the listbox and places focus on the currently selected option in the list.
- If focus is in the listbox , collapses the listbox and keeps the currently selected option as the button label.
EscapeIf the listbox is displayed, collapses the listbox and moves focus to the button.
Down Arrow- Moves focus to and selects the next option.
- If the listbox is collapsed, also expands the list.
Up Arrow- Moves focus to and selects the previous option.
- If the listbox is collapsed, also expands the list.
HomeIf the listbox is displayed, moves focus to and selects the first option.
Printable Characters- Type a character: focus moves to the next item with a name that starts with the typed character.
- Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.

Event

Button.change

Options

delay

Example

An example is located right here, see sources.

References

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文