Nocturnal Practitioners of Magic
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    tabby-jspublic

    Tabby.js

    Never neglect your tabs when it comes to usability again! Making tabindex easy for custom elements to improve your UX.

    Purpose

    In today's JavaScript environment with all the custom elements, it's easy to forget that tabbing is an integral part of the UX. With HTML5 you can define tabindex on any property, but you need additional functionality for it to do anything useful. That's where Tabby becomes useful! By emitting two custom events when tabbing occurs, you can define the behaviour with ease.

     

    Install with npm: npm install tabby-js

    Getting Started

    Tabby emits two custom events for you to listen for. These can be listened to the vanilla JavaScript way (.addEventListener('tabEnter')) or the jQuery way (.on('tabEnter')) – other libraries are supported as long as they tap into the vanilla JavaScript events.

    tabEnter

    Emitted when an element with a `tabindex` attribute has focus with the tab key – allowing you to highlight the element, or to open your faux-select.

    tabLeave

    Emitted irrespective of whether the tab key was involved (an alias of `onblur`) – allowing you to reset the element's state.
    // Emitted when a user tabs into the box. 
    elements.on('tabEnter', function() {
        $(this).addClass('focus');
    });
     
    // Emitted each and every time (same as onblur). 
    elements.on('tabLeave', function() {
        $(this).removeClass('focus');
    });

    Contributions

    I'd be over the moon for contributions for any of my projects – including of course Tabby! If you would like to contribute, please fork and issue a pull request and I'll happily merge it in to master.

    Keywords

    none

    install

    npm i tabby-js

    Downloadsweekly downloads

    2

    version

    0.1.1

    license

    none

    repository

    github.com

    last publish

    collaborators

    • avatar