Tab control

by Viacheslav Mezentsev

HTML

<h4>Пример вкладок.</h4>

<div class="tabcontrol">

    <a onclick="tab.Select( this, 'TabQuery' );" href="javascript:void(0);" id="TabSheet1">Скрипт</a>
    <a onclick="tab.Select( this, 'TabDebug' );" href="javascript:void(0);">Отладка</a>
    <a onclick="tab.Select( this, 'TabAbout' );" href="javascript:void(0);">О модуле</a>

    <div id="TabQuery" class="visible">
           
        <textarea id="function" rows="15" cols="50"></textarea><br>
        <button type="button" onclick="">Сохранить</button><button type="button" onclick="">Выполнить</button><br>
        <textarea id="console" rows="10" cols="50"></textarea><br>
        <button type="button" onclick="document.getElementById( 'console' ).value = '';">Очистить</button>

    </div>

    <div id="TabDebug" class="hidden">
        <textarea id="debug" rows="10" cols="50"></textarea><br>
        <button type="button" onclick="">Очистить</button>
    </div>

    <div id="TabAbout" class="hidden">
        <table>
            <tbody id="about">
                <tr style="background:#EEEEEE">
                    <td>Версия</td>
                    <td>0.1.5276.20347</td>
                </tr>
                <tr style="background:#EEEEEE">
                    <td>Автор</td>
                    <td>Мезенцев Вячеслав Николаевич</td>
                </tr>
                <tr style="background:#EEEEEE">
                    <td>Эл. почта</td>
                    <td><a href="mailto:viacheslavmezentsev@gmail.com">viacheslavmezentsev@gmail.com</a></td>
                </tr>
                <tr style="background:#EEEEEE">
                    <td valign="top">Зависимости</td>
                    <td valign="top">
                        coreutils-sleep
                    <td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

CSS

.tabcontrol > a {
  background: #FFF;
  padding: 2px 5px;
  border: 1px solid #e1e1e1;
  line-height: 20px;
}

.tabcontrol > a:first-child { border-bottom: 1px solid #fff; }

.tabcontrol > a:hover { text-decoration: none; }

.tabcontrol div {
  border: 1px solid #e1e1e1;
  padding: 5px;
  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  background: #FFF;
}

.tabcontrol .visible { display: block; }
.tabcontrol .hidden { display: none; }

JavaScript

function TabControl() {

    this.ItemHeader = null;
    this.ItemName = 'TabQuery';
}

TabControl.prototype = {

    OnTabChange: function() {

        switch ( this.ItemName ) {

            // Загрузка текста запроса.
            case 'TabQuery': { break; }

            // Отладочный журнал.
            case 'TabDebug': { query.LoadLog(); break; }

        }

    },

    Select: function( sender, value ) {

        // Скрываем текущую вкладку.
        document.getElementById( this.ItemName ).className = 'hidden';

        // Показываем заданную.
        document.getElementById( value ).className = 'visible';

        // Объединяем рамку заголовка вкладки с её содержимым.
        if ( this.ItemHeader ) this.ItemHeader.style.borderBottomColor = '#E1E1E1';
        sender.style.borderBottomColor = '#FFFFFF';

        // Сохраняем параметры текущей вкладки.
        this.ItemName = value;
        this.ItemHeader = sender;

        // Обновляем содержимое текущей вкладки.
        this.OnTabChange();
    }

}

// Глобальные объекты.
var tab = new TabControl();