Расширения для Opera: кнопки, бейджи и всплывающие окна

By George Drak

From Opera 15 onward, Opera 11 & 12’s extension format is no longer supported, and instead, we’ve switched to Chromium’s extension model. Check out our new documentation for developing extensions for Opera 15 and higher and start building your own extensions.

Вступление

Эта статья рассказывает о базовых шагах по созданию и управлению кнопками на панели браузера и различными их компонентами.

Содержимое

Кнопки на панели браузера

Расширение позволяет поместить одну кнопку на панель браузера Opera, справа от поля поиска. Кнопка может включать иконку размером 18×18 пикселов, подсказку (показывается при наведении), бейдж статуса и всплывающее окно.

Создание кнопок

Код создания кнопки должен быть добавлен в элемент script файла index.html. В этом примере мы выполняем код в момент срабатывания события load.

Первый шаг — это определение свойств кнопки. Сделать это можно с помощью объекта ToolbarUIItemProperties. Например:

var ToolbarUIItemProperties = {
    disabled: false,
    title: "Пример кнопки",
    icon: "icons/button.png"
}

После того, как вы задали свойства кнопки в ToolbarUIItemProperties, вам необходимо создать собственно кнопку с помощью метода createItem:

var theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);

Всего, с помощью объекта ToolbarUIItemProperties, вы можете определить 5 свойств:

disabled

Определяет, активна ли кнопка. Значение по умолчанию — true (неактивна), принимает булево значение. Вы можете сделать кнопку неактивной следующим образом:

theButton.disabled = true;

title

Свойство title устанавливает подсказку, которая показывает при наведении пользователем курсора на кнопку.

theButton.title = "Это подсказка";

icon

Свойство icon устанавливает иконку, которая используется кнопкой. Если вы укажете картинку размером отличную от 18×18 пикселов, то она будет автоматически отмасштабирована.

theButton.icon = "icons/beautiful-toobar-icon.png";

onclick

Эта функция вызывается, когда пользователь кликает по кнопке и возбуждается событие click.

theButton.onclick = function(){ /* do something */ };

onremove

Эта функция вызывается, когда кнопка удаляется из ToolbarContext и вызывается событие remove.

theButton.onremove = function(){ /* делаем что-нибудь */ };

Добавление кнопки на панель браузера

После создания кнопки нам необходимо поместить её на панель Opera. Сделаем это с помощью метода addItem:

opera.contexts.toolbar.addItem(theButton);

Пробуйте запустить пример. Он не делает ничего особенного, так как вы ещё не определили никаких действий для кнопки.

Удаление кнопки с панели браузера

Кнопка может быть удалена с панели браузера методом removeItem:

opera.contexts.toolbar.removeItem(theButton);

Создание всплывающего окна

Теперь у вас есть кнопка, вы хотите, чтобы она что-нибудь умела. При клике на кнопку может быть показано всплывающее окно. Всплывающее окно это окно с указанными шириной и высотой. Вы можете подгружать в него страницы, находящиеся в сети или идущие прямо с вашим расширением.

Чтобы создать всплывающее окно, вам нужно определить свойства объекта Popup с помощью объекта ToolbarUIItemProperties:

var ToolbarUIItemProperties = {
    disabled: false,
    title: "Пример кнопки",
    icon: "icons/button.png",
    popup: {
        href: "popup.html",
        width: 300,
        height: 300
    }
}

Содержимое всплывающего окна

Для указания содержимого всплывающего окна используется свойство href. Вы можете указать на любую страницу в сети, используя её абсолютный URL:

theButton.popup.href = http://www.opera.com/";

Так же вы можете подгрузить страницу, поставляющуюся с расширением, указав её относительный адрес:

theButton.popup.href = "popup.html";

Эта страница может быть обычной HTML-страницей, никаких изменений вносить не нужно. Обратите внимание: если вы измените свойство href, в момент когда всплывающее окно открыто, то оно закроется.

Размеры всплывающего окна

Размеры всплывающего окна указываются в пикселах с помощью свойств width и height:

width:

theButton.popup.width = 300;

height:

theButton.popup.height = 300;

Всплывающее окно будет создано одновременно с кнопкой в момент вызова метода createItem.

Попробуйте пример кнопки со всплывающим окном. Если вы пробовали пример из статьи Opera extensions hello world example, то он покажется вам очень знакомым.

Создание бейджа

Бейдж это наложение поверх иконки кнопки с текстовым содержимым. Чаще всего они используются для показа количества чего-либо, например непрочитанных писем или сообщений. Чтобы создать бейдж, вам нужно определить свойства объекта Badge через объект ToolbarUIItemProperties:

var ToolbarUIItemProperties = {
    disabled: false,
    title: "Пример кнопки",
    icon: "icons/button.png",
    badge: {
        display: "block",
        textContent: "12",
        color: "white",
        backgroundColor: "rgba(211, 0, 4, 1)"
    }
}

Бейдж имеет 4 свойства, которые могут быть настроены:

Показ бейджа

Свойство display показывает и скрывает бейдж. Корректными значениями являются block и none. Значение по умолчанию: none. Сделать бейдж видимым можно так:

theButton.badge.display = "block";

textContent

Текст бейджа может быть выставлен через свойство textContent. Бейдж имеет ограниченное место для отображения текста, поэтому постарайтесь быть лаконичными.

theButton.badge.textContent = "12";

color and backgroundColor

Свойства color и backgroundColor устанавливают цвет текста и цвета фона бейджа. Они принимают значения в шестнадцатеричном (HEX) формате, RGBA и наименования цвета.

theButton.badge.color = "white";

theButton.badge.backgroundColor: = "rgba(211, 0, 4, 1)";

Вы можете попробовать пример кнопки с бейджем и изучить различные пути создания и управления элементами пользовательского интерфейса расширений для Opera.

Вы можете обратиться к API расширений для Opera, чтобы получить полную информацию о различных объектах и методах.

This article is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license.