MDC Tabs Javascript повторно используемым способом

Я реализовал демонстрационные js вкладок MDC, найденные здесь, и они работают нормально. Как бы я мог преобразовать это, чтобы его можно было использовать повторно, чтобы я мог просто использовать общий селектор, такой как «.js-tabs», связать их с вкладками id = «tab1», затем с панелями с for = «tab1» и включить это один кусок js в моем основном файле js.

Это всего лишь прототип, так что не нужно беспокоиться о написании готового кода.

Ручка

https://codepen.io/rhysyg03/pen/OgRygJ

Ссылки на МДЦ

https://material-components-web.appspot.com/tabs.html

https://github.com/material-components/material-components-web/blob/master/demos/tabs.html

var tabs = new mdc.tabs.MDCTabBar(document.querySelector('#tab1'));
var panels = document.querySelector('.js-panels');
tabs.preventDefaultOnClick = true;
function updatePanel(index) {
    var activePanel = panels.querySelector('.js-panel.is-active');
    if (activePanel) {
        activePanel.classList.remove('is-active');
    }
    var newActivePanel = panels.querySelector('.js-panel:nth-child(' + (index + 1) + ')');
    if (newActivePanel) {
        newActivePanel.classList.add('is-active');
    }
}
tabs.listen('MDCTabBar:change', function (t) {
    var tabs = t.detail;
    var nthChildIndex = tabs.activeTabIndex;
    updatePanel(nthChildIndex);
});

И мой HTML

<div class="mdc-toolbar">
    <div class="mdc-toolbar__row">
        <div class="mdc-toolbar__section mdc-toolbar__section--align-start">
            <nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist">
                <a role="tab" aria-controls="panel-1"
                class="mdc-tab mdc-tab--active">Item One</a>
                <a role="tab" aria-controls="panel-2"
                class="mdc-tab">Item Two</a>
                <a role="tab" aria-controls="panel-3"
                class="mdc-tab">Item Three</a>
                <span class="mdc-tab-bar__indicator"></span>
            </nav>
        </div>
    </div>
</div>
<section>
    <div class="js-panels" for='tab1'>
        <p class="js-panel is-active" role="tabpanel" aria-hidden="false">Item One</p>
        <p class="js-panel" role="tabpanel" aria-hidden="true">Item Two</p>
        <p class="js-panel" role="tabpanel" aria-hidden="true">Item Three</p>
    </div>
</section>

javascript mdc
person Rhys    schedule 14.06.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попытка обернуть ваш код в вызов функции и инициировать с параметром, который нацелен на требуемый селектор. В этом примере требуется, чтобы идентификатор вкладки соответствовал атрибуту «для» панели. Для повторного использования просто вызовите функцию initTab с другим идентификатором. Надеюсь это поможет.

function initTabs(el) {

    var tabs = new mdc.tabs.MDCTabBar(document.querySelector('#' + el));
    var panels = document.querySelector("[for=" + el + "]");

    tabs.preventDefaultOnClick = true;

    function updatePanel(index) {

        var activePanel = panels.querySelector(".js-panel.is-active");

        if (activePanel) {
            activePanel.classList.remove("is-active");
        }
        var newActivePanel = panels.querySelector(
            ".js-panel:nth-child(" + (index + 1) + ")"
        );
        if (newActivePanel) {
            newActivePanel.classList.add("is-active");
        }
    }

    tabs.listen("MDCTabBar:change", function(t) {
        var tabs = t.detail;
        var nthChildIndex = tabs.activeTabIndex;
        updatePanel(nthChildIndex);
    });
}


initTabs('tab1');
initTabs('tab2');

HTML

<nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist"> ... </nav>
<div class="js-panels" for='tab1'> ... </div>

<nav id="tab2" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist"> ... </nav>
<div class="js-panels" for='tab2'> ... </div>
person cfed    schedule 15.06.2017

arrow_upward
0
arrow_downward

если вы используете последнюю версию MDC, попробуйте это.

function initTabs(el) {
    var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('#' + el));
    var panels = document.querySelector("[for=" + el + "]");
    tabBar.preventDefaultOnClick = true;
    function updatePanel(index) {
        var activePanel = panels.querySelector(".mdc-tab-content.mdc-tab-content--active");
        if (activePanel) {
            activePanel.classList.remove("mdc-tab-content--active");
        }
        var newActivePanel = panels.querySelector(
            ".mdc-tab-content:nth-child(" + (index + 1) + ")"
        );
        if (newActivePanel) {
            newActivePanel.classList.add("mdc-tab-content--active");
        }
    }
    tabBar.listen("MDCTabBar:activated", function(t) {
        var tabs = t.detail;
        var nthChildIndex = tabs.index;
        updatePanel(nthChildIndex);
    });
}
initTabs('tab1');
person Safeer Aslam    schedule 02.01.2020