Pull to refresh

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

Reading time 4 min
Views 4.1K
Original author: David Storey

Вступление


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

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


Расширение позволяет поместить одну кнопку на панель браузера 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(){ /* делаем что-нибудь */ };

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», то он покажется вам очень знакомым.

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


Бэдж это наложение поверх иконки кнопки с текстовым содержимым. Чаще всего они используются для показа количества чего-либо, например непрочитанных писем или сообщений. Чтобы создать бэдж, вам нужно определить свойства объекта 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

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

theButton.badge.display = "block";

textContent

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

theButton.badge.textContent = "12";

color и backgroundColor

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

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

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

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

Ссылки на API


объект ToolbarContext
объект ToolbarUIItem
объект ToolbarUIItemProperties
объект Popup
объект Badge
Tags:
Hubs:
+23
Comments 13
Comments Comments 13

Articles