opera.contexts.toolbar.createItem()

By Opera Software

Description

This method creates a Button from a given property object. Note: The item can only be used within the ToolbarContext that it is created in.

Parameters:

  • properties: The ButtonProperties to use when creating the Button.

The available properties include:

Syntax:

Button createItem (<ButtonProperties> properties)

Example:

The below button would include a badge (saying '42') and display a popup window when clicked.

Note that buttons must be defined in the background process (e.g. in index.html) in order to work.

//
// The background process (e.g. index.html)
//

var i = 0; // count the number of times the button get clicked

// The button properties
var properties = {
  disabled: false,
  title: "My Extension",
  icon: "icon.18x18.png",
  onclick: function() {
    i++; // counting how often the button is clicked
  },
  popup: {
    href: 'popup.html', 
    width: 100, 
    height: 100 
  },
  badge: {
    display: 'block',
    backgroundColor: '#5566ff',
    color: '#ffffff',
    textContent: '42'
  }
};

// Create the button
var button = opera.contexts.toolbar.createItem(properties);

You can also define the properties on the fly when creating the button:

//
// The background process (e.g. index.html)
//

// Create a button
var button = opera.contexts.toolbar.createItem({
  title: 'Weather Extension',
  icon: 'yr.png'
});

This article is licensed under a Creative Commons Attribution 3.0 Unported license.

Comments

  • photo

    Romas K.

    Saturday, December 22, 2012

    Is there a way to create TWO buttons for the same extension?
  • photo

    Mike Taylor

    Thursday, January 17, 2013

    No, any given extension can only have one UI button.
No new comments accepted.