jQuery EasyUI Layout -Создание левой панели в стиле XP

Обычно в папках Проводника Windows XP левая панель содержит некоторые типичные задачи. В этом руководстве показано, как создать левую панель в стиле XP с помощью плагина панели EasyUI.

Определение нескольких панелей

Мы определяем несколько панелей для отображения некоторых задач. Каждая панель должна иметь как минимум кнопки инструментов сворачивания/разворачивания.

Код выглядит следующим образом:

    <div style="width:200px;height:auto;background:#7190E0;padding:5px;">
        <div class="easyui-panel" title="Picture Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
            View as a slide show<br/>
            Order prints online<br/>
            Print pictures
        </div>
        <br/>
        <div class="easyui-panel" title="File and Folder Tasks" collapsible="true" style="width:200px;height:auto;padding:10px;">
            Make a new folder<br/>
            Publish this folder to the Web<br/>
            Share this folder
        </div>
        <br/>
        <div class="easyui-panel" title="Other Places" collapsible="true" collapsed="true" style="width:200px;height:auto;padding:10px;">
            New York<br/>
            My Pictures<br/>
            My Computer<br/>
            My Network Places
        </div>
        <br/>
        <div class="easyui-panel" title="Details" collapsible="true" style="width:200px;height:auto;padding:10px;">
            My documents<br/>
            File folder<br/><br/>
            Date modified: Oct.3rd 2010
        </div>
    </div>

Настройка внешнего вида панелей

Обратите внимание, что этот вид не то, что нам нужно; мы должны изменить фоновые изображения заголовка панели и значки кнопок сворачивания/разворачивания.

Это нетрудно сделать; всё, что нам нужно, — переопределить некоторые CSS.

    .panel-body{
        background:#F0F0F0;
    }
    .panel-header{
        background:#fff url('images/panel_header_bg.gif') no-repeat top right;
    }
    .panel-tool-collapse{
        background:url('images/arrow_up.gif') no-repeat 0px -3px;
    }
    .panel-tool-expand{
        background:url('images/arrow_down.gif') no-repeat 0px -3px;
    }

Видно, что определять пользовательские интерфейсы с помощью EasyUI очень просто.

Скачать примеры jQuery EasyUI

jeasyui-layout-xp.zip