jQuery UI Widget Factory Sample 4

タブとダイアログの連携

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>

<div class="mod-dialog js-dialog">
    <div class="mod-dialog-overlay js-dialog-overlay"></div>
    <div class="mod-dialog-content js-dialog-content">Dialog!!!</div>
</div>

CSS

.mod-dialog {
    display: none;
}

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

.mod-dialog-overlay {
    background: black;
    cursor: pointer;
    opacity: .6;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.mod-dialog-content {
    background: white;
    height: 200px;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    position: absolute;
    top: 50%;
    width: 200px;
    z-index: 1;
}

.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;
        var $active = this._$nav.removeClass(active).filter(function () {
            return this.hash === fragment;
        }).addClass(active);
        this._trigger('change', null, {
            tabname: $active.text()
        });
    }
});

$.widget('ui.dialog', {
    options: {
        selectorOverlay: '.js-dialog-overlay',
        selectorContent: '.js-dialog-content',
        classActive: 'state-active'
    },
    _create: function () {
        this._setUpElements();
        this._setEvents();
    },
    _setUpElements: function () {
        var elem = this.element,
            o = this.options;
        this._$overlay = elem.find(o.selectorOverlay);
        this._$content = elem.find(o.selectorContent);
    },
    _setEvents: function () {
        this._$overlay.on('click', $.proxy(this._onClickHandler, this));
    },
    _onClickHandler: function () {
 ...