MTAppjQueryでブログ記事編集画面のフィールドをグルーピングしてタブで表示する http://www.tinybeans.net/blog/download/mt-plugin/mtapp-jquery.html

users.css

.mtapp-tabs-navi li {
    margin-right: 4px;
}
.mtapp-tabs-navi li.first-child {
    margin-left: 0;
}
.mtapp-tabs-navi li a {
    padding: 10px;
    min-width: 6em;
    color: #7B7C7D;
}
.mtapp-tabs-navi li.ui-tabs-selected a {
    color: #2B2B2B;
}

div.mtapp-grouptabs {
    padding: 13px;
    border: 1px solid #ADADAD;
    border-top-color: #CFD0D0;
    border-left-color: #CFD0D0;
    -webkit-border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    border-radius: 0 5px 5px 5px;
    background-color: #FFF;
}

div.mtapp-grouptabs div.field {
    border: 0px none;
    padding: 0 !important;
}

users.js

(function($){
    // -------------------------------------------------
    //  $.MTAppGroupTabs();
    //
    //  Description:
    //    ブログ記事編集画面のフィールドをグルーピングしてタブで表示する。
    //
    //  Usage:
    //    $.MTAppGroupTabs(options);
    //
    //  Options:
    //    id: {String} タブコンテナに設定するid属性。
    //    tabs: {Object} タブにするフィールドを指定する。書式=>[{'id': '', 'title': '', 'fields': []}]
    //              カスタムフィールドの場合は「cf_basename」のように接頭辞「 c: 」を付ける。
    //              ex. [
    //                  {
    //                      id: 'tab01'
    //                      title: 'メタ情報',
    //                      fields: ['desciption','keywords']
    //                  },
    //                  {
    //                      id: 'tab02'
    //                      title: '商品情報',
    //                      fields: ['c:price', 'c:color', 'c:eclink']
    //                  }
    //              ]
    //    pointer: {String} タブを挿入する起点となるノードのセレクタ。ex. #title-field
    //    pointerBasename: {String} pointerを指定しない場合は、pointerBasenameに
    //                      タブを挿入する起点となるノードのbasenameを指定できる。ex. title
    //    insert: {String} 起点となるノードの前に挿入（before）するか後ろに挿入（after）するか。
    // -------------------------------------------------
    $.MTAppGroupTabs = function(options){
        var op = $.extend({}, $.MTAppGroupTabs.defaults, options);

        if (op.tabs == null) return;
        op.pointerBasename = (op.pointer_basename && !op.pointerBasename) ? op.pointer_basename : op.pointerBasename;
        var selector;
        if (op.pointer != '') {
            selector = op.pointer;
        }
        else if (op.pointerBasename != '') {
            selector = '#' + getFieldID(op.pointerBasename);
            if (!$(selector).length)
                return;
        }
        else {
            return;
        }
        var div = [
            '<div class="mtapp-tabs-container">',
            '<ul class="mtapp-tabs-navi" style="position:relative;z-index:9999;">',
            '</ul>',
            '</div>'
        ];
        var $container;
        if (op.insert == 'before') {
            $container = $(selector).before(div.join('')).prev('.mtapp-tabs-container');
        }
        else if (op.insert == 'after') {
            $container = $(selector).after(div.join('')).next('.mtapp-tabs-container');
        }
        else {
            return;
        }
        if (op.id) {
            $container.attr('id', op.id);
        }

        var li = [];
        $.each(op.tabs, function(idx, tab){
            var ids = [],
                elementId = 'ctab_' + tab.id,
                $tabContainer = $('<div id="' + elementId + '" class="mtapp-grouptabs"></div>');

            li.push('<li><a href="#' + elementId + '">' + tab.title + '</a></li>');
            $.each(tab.fields, function(){
                var $element = $('#' + getFieldID(this));
                $element.removeClass('sort-enabled hidden');
                $tabContainer.append($element);
            });
            $container.append($tabContainer);
        });
        $container.find('.mtapp-tabs-navi').html(li.join(''));
        $container.tabs();
    };
    $.MTAppGroupTabs.defaults = {
        id: null,
        tabs: null,
        pointer: '', // #title-field などのセレクタ
        pointerBasename: '', // title などのベースネーム
        insert: 'after', // before or after
    };
    // end - $.MTAppGroupTabs
    
    function getFieldID(basename) {
        return basename.replace(/\s/g,'').replace(/^c:/,'customfield_').replace(/^cf_/,'customfield_') + '-field';
    }

})(jQuery);