Как правильно оформить панель статуса Jetpack? - PullRequest
Новая
       7

Как правильно оформить панель статуса Jetpack?

2 голосов
/ 01 июня 2009

Когда я создаю панель строки состояния в Mozilla Jetpack , она выглядит как безликая серая коробка, которая «прерывает» строку состояния, поскольку в ней отсутствуют границы / затенение / и т.д. что делает его похожим на обычную панель строки состояния.

Как сделать так, чтобы он выглядел как другие панели строки состояния?

1 Ответ

3 голосов
/ 01 июня 2009

Есть две хитрости. Более важным является завершение HTML строки состояния в паре <div> s, стилизованных с помощью объявления CSS -moz-appearance: 

<div style="-moz-appearance:statusbar">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

Это сближает нас, но в левой части реальной строки состояния есть небольшое освещение, которое заметно при применении к панели строки состояния в середине панели. Вы можете исправить это, добавив 50-пиксельные отступы и отрицательное поле к левой стороне внешнего <div>: 

<div style="-moz-appearance:statusbar;margin-left:-50px;padding-left:50px">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

Et voilà! Панель строки состояния, которая неотличима от обычных. Если ваш контент полностью HTML, все готово. Однако, если вы хотите, чтобы текст панели состояния также совпадал, есть несколько других стилей, которые нужно применить. Вот полный исходный код JavaScript для того, как это сделать, используя встроенную таблицу стилей: 

jetpack.statusBar.append({
    html: (<><![CDATA[
        <style type="text/css">
            .statusbar {
                font-family: Tahoma;
                font-size: 11px;
                height: 22px;
                -moz-appearance: statusbar;
            }

            .statusbarpanel {
                height: 18px;
                line-height: 17px;
                -moz-appearance: statusbarpanel;
                padding-left: 4px;
                padding-right: 4px;
            }
        </style>

        <div class="statusbar">
            <div class="statusbarpanel">
                Your content here.
            </div>
        </div>
    ]]></>).toString()
});

(В этом примере также используется E4X для имитации многострочных строк в JavaScript .)

...