タブの例

lawyer.js

console.log('UserJsCSSプラグインのlawyer.jsを読み込みました。');

const userJsCss = {};
userJsCss.vars = {
    nTabs: 0
};
userJsCss.makeTabs = function (tabs) {
    let counter = 0;
    let tabMenuItemHTML = '';
    let tabPanelsQuery = [];
    userJsCss.vars.nTabs += 1;

    tabs.forEach(function (tab) {
        counter += 1;
        let query = [];
        tab.fields.forEach(function (field) {
            query.push('#' + field + '-wrapper');
        });
        $(query.join(',')).wrapAll('<div id="tab_' + userJsCss.vars.nTabs + '_' + counter + '" />');
        tabPanelsQuery.push('#' + 'tab_' + userJsCss.vars.nTabs + '_' + counter);

        // タブメニュー
        tabMenuItemHTML += '<li><a href="#tab_' + userJsCss.vars.nTabs + '_' + counter + '">' + tab.name + '</a></li>';
    });
    
    const $tabMenu = $('<ul>' + tabMenuItemHTML + '</ul>');
    $(tabPanelsQuery.join(',')).wrapAll('<div id="tab_' + userJsCss.vars.nTabs + '_container" class="tab" />');
    $('#' + 'tab_' + userJsCss.vars.nTabs + '_container').prepend($tabMenu);
    $('#' + 'tab_' + userJsCss.vars.nTabs + '_container').tabs();
};

$(function () {
    $(document).on('pcmsx.reorder_fields_done', function () {
        const tabs = [
            {
                name: '所在地',
                fields: ['zipcode', 'pref', 'office_address_1', 'office_address_2', 'tel', 'fax']
            },
            {
                name: '分野',
                fields: ['field', 'structure', 'payment']
            },
            {
                name: '地図',
                fields: ['lat', 'lng']
            }
        ];
        userJsCss.makeTabs(tabs);
    });
});