Learn about Opera extension: button, badge and popup

TipsMake.com - Through some previous posts, we have learned about the basic features of Opera extension , and this time we will continue with the process of creating and managing function buttons, as well as some. Related components . Technically, all components of the toolbar must be defined, initialized and defined during the process of processing the background. They cannot be initialized or fixed directly when the script is inserted or the popup window is displayed. The functions, badges and popup buttons are all controlled via the opera.contexts.toolbar function .

>>>Learn about config.xml file in Opera extension

Each extension only allows one button to be placed on the Opera toolbar, specifically on the right side of the search box, including an icon with the size of 18 x 18 pixels, tooltip information (displayed when the user moves the mouse over ), status badge and b . The main code section to create this button will be placed in the script element section of the index.html page. In this test, we will run the code when the event load starts.

1. Create button:

The first step is to initialize the properties of the button , executed in the ToolbarUIItemProperties object. For example:

After initializing the property in ToolbarUIItemProperties , the next thing to do is create the actual function with the createItem syntax:

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

There are 5 properties we can pass to ToolbarUIItemProperties , including:

1. disabled : this will be determined if the status of the button is enabled . By default, it is true ( disabled ) and can accept boolean values. We can turn off this situation with the command:

1. title : this title attribute will set tooltip information to display when the user hover over:

1. icon : this is the main attribute used to set the icon used for the button. If the size is larger than 18 x 18 pixels, the system will change itself to fit the standard size:

1. onclick : allows the function to execute when the user clicks the button and the event load is started:

1. onremove : same as above, but this property allows the function to be executed when removing the button from the ToolbarContext and the event remote starts:

To assign a button to the toolbar , we will have to use the addItem method with the following general syntax:

You can run the test with the button example here or download via MediaFire.

2. Create popup:

And once you have a button, our next step here is to create a popup - which happens when a user clicks a certain function button. Specifically, this is a predefined type of overlay window with a predefined width and height, users can point to a web page or software package, application with extension to display within the popup window. .

To create a popup window, we need to initialize the properties of the Popup object in the ToolbarUIItemProperties object:

Note that by default, the width and height of the popup window is 300 x 300 . To change, you need to clearly define the parameters width , height as the example above.

To connect to the content of the popup window, you must use the attribute href :

Besides, we can also access the website stored on the local address:

These websites may be just normal HTML pages. Note that if you change the href attribute when the popup is dim, then the popup window will close. Technically, the size of the popup window will be determined in pixels by the width and height attribute:

1. Width: theButton.popup.width = 300;
2. Height: theButton.popup.height = 300;

And then, the popup window will be initialized with the button when the system calls the createItem method. You can experiment with the sample popup example here or download via MediaFire.

3. Create badge:

The badge concept here can be interpreted as a content layer that overlaps the icon with a certain text. They are often used to display the number of counts of certain components, such as the number of emails that have or have not been read. To create badges, we need to initialize the Badge object within the ToolbarUIItemProperties object:

Typical 1 badge will have 4 customizable attributes. And to display the badge you must use the display attribute. The values ​​are block and none , the default value is none . And 1 badge will be set to display in the following syntax:

Besides, the textContent attribute will be applied to display the label, and of course badge will limit the text displayed on the outside:

Finally, the color and backgroundColor properties will set badge color and background color. Supports hexadecimal , RGBA and color coded modes:

You can test the extension button with badge here or via MediaFire. Good luck!