jQuery UI Widget Factory Sample 2

JSで開くタブを指定できるようにする

by FiNGAHOLiC

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="js-tabContainer">
    <div class="mod-tabNavs js-tabNavs">
        <a href="#tabA" class="mod-tabNav js-tabNav state-active">foo</a>
        <a href="#tabB" class="mod-tabNav js-tabNav">bar</a>
        <a href="#tabC" class="mod-tabNav js-tabNav">baz</a>
    </div>
    <div class="mod-tabContents js-tabContents">
        <div id="tabA" class="mod-tabContent js-tabContent state-active">foo</div>
        <div id="tabB" class="mod-tabContent js-tabContent">bar</div>
        <div id="tabC" class="mod-tabContent js-tabContent">baz</div>
    </div>
</div>

CSS

.mod-tabContainer {}

.mod-tabNavs {
    overflow: hidden;
}

.mod-tabNav {
    background: black;
    color: white;
    display: block;
    float: left;
    font-size: 14px;
    margin-right: 8px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 80px;
}

.mod-tabNav.state-active,
.mod-tabNav:hover {
    background: skyblue;
}

.mod-tabNav:last-child {
    margin-right: 0;
}

.mod-tabContents {
    background: skyblue;
    width: 316px;
}

.mod-tabContent {
    display: none;
    min-height: 100px;
    padding: 10px;
}

.mod-tabContent.state-active {
    display: block;
}

JavaScript

$.widget('ui.tab', {
    options: {
        selectorNav: '.js-tabNav',
        selectorContent: '.js-tabContent',
        classActive: 'state-active'
    },
    _create: function () {
        this._setUpElements();
        this._setEvents();
    },
    _setUpElements: function () {
        var elem = this.element,
            o = this.options;
        this._$nav = elem.find(o.selectorNav);
        this._$content = elem.find(o.selectorContent);
    },
    _setEvents: function () {
        this._$nav.on('click', $.proxy(this._onClickHandler, this));
    },
    _onClickHandler: function (e) {
        e.preventDefault();
        this.switchTab(e.currentTarget.hash);
    },
    switchTab: function (fragment) {
        this._changeContent(fragment);
        this._changeTab(fragment);
    },
    _changeContent: function (fragment) {
        var active = this.options.classActive;
        this._$content.removeClass(active).filter(function () {
            return this.id === fragment.substring(1);
        }).addClass(active);
    },
    _changeTab: function (fragment) {
        var active = this.options.classActive;
        this._$nav.removeClass(active).filter(function () {
            return this.hash === fragment;
        }).addClass(active);
    }
});

$(function(){
    var $tab = $('.js-tabContainer').tab();
    $tab.tab('switchTab', '#tabC');
});