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:
var ToolbarUIItemProperties = {
disabled: false,
title: "Button Example",
icon: "icons / button.png"
}
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:
- 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:
theButton.disabled = true;
- title : this title attribute will set tooltip information to display when the user hover over:
theButton.title = "This is a tooltip";
- 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:
theButton.icon = "icons / beautiful-toobar-icon.png";
- onclick : allows the function to execute when the user clicks the button and the event load is started:
theButton.onclick = function () {/ * do something * /};
- 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:
theButton.onremove = function () {/ * do something * /};
To assign a button to the toolbar , we will have to use the addItem method with the following general syntax:
opera.contexts.toolbar.addItem (theButton)
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:
var ToolbarUIItemProperties = {
disabled: false,
title: "Button Example",
icon: "icons / button.png",
popup: {
href: "popup.html",
width: 400,
height: 200
}
}
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 :
theButton.popup.href = http://www.opera.com/ ";
Besides, we can also access the website stored on the local address:
theButton.popup.href = "popup.html";
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:
- Width: theButton.popup.width = 300;
- 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:
var ToolbarUIItemProperties = {
disabled: false,
title: "Button Example",
icon: "icons / button.png",
badge: {
display: "block",
textContent: "12",
color: "white",
backgroundColor: "rgba (211, 0, 4, 1)"
}
}
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:
theButton.badge.display = "block";
Besides, the textContent attribute will be applied to display the label, and of course badge will limit the text displayed on the outside:
theButton.badge.textContent = "12";
Finally, the color and backgroundColor properties will set badge color and background color. Supports hexadecimal , RGBA and color coded modes:
theButton.badge.color = "white";
theButton.badge.backgroundColor: = "rgba (211, 0, 4, 1)";
You can test the extension button with badge here or via MediaFire. Good luck!
You should read it
- The brand new way to use Opera One
- How to open a screenshot folder on Opera Neon
- How to use VPN on Opera browser
- Reviews on Opera VPN: Simple, fast and free
- Opera wants to be the first PC web browser in the world to integrate electronic wallets
- Learn about the Opera GX gaming browser
- Opera 51 is 38% faster than Firefox Quantum, download and experience
- How to use the new Opera Neon web browser
May be interested
- How to install Chrome utility on Opera browserwith chrome browser, there are a lot of support utilities, so users can experience more new features in the browser. however, for other browsers, the number of installation utilities is still limited, such as opera. so how can i use chrome's utility on opera browser?
- How to use VPN on Opera browseropera's pvn feature does not display immediately outside, you will have to find a bit in settings. the following article network administrators will introduce basic vpn features on opera and show you how to use vpn on this browser.
- It is possible to install the Chrome utility directly to Operathe opera 55 beta released last week allows users to install chrome add-ons directly from google's web store to opera's browser without using any other support.
- How to activate the Fan Fan badge for Facebook Fanpageinstructions to turn on fan hard badge for your fanpage
- Opera One is now available on iPhoneopera has released its new redesigned opera one browser for ios. after beta testing for weeks, opera one for ios is now available in a stable version.
- Meet Opera Air: Opera's New Browsermany people are skeptical when a web browser claims to help relax the mind. but opera's new air browser is surprisingly useful, with handy tools for focusing, meditating, exercising, and more.
- Opera wants to be the first PC web browser in the world to integrate electronic walletsopera software said it is planning to bring its famous virtual currency e-wallet on mobile browser opera to android to linux, mac and windows desktop browsers.
- Opera 51 is 38% faster than Firefox Quantum, download and experienceopera software has officially launched opera 51 with 38% faster performance than firefox quantum. mark a new milestone in the 'war' with google chrome and firefox quantum.
- Opera 11.60 pleases technology enthusiastsappearing at the holiday season, opera software is proud to release opera 11.60, the latest version of opera for desktop browsers. nearly 50% of the world's population has never tried a new browser, why don't you help them discover something better this year?
- Opera launches Opera Mini browser 6.5yesterday, opera software released the opera mini browser version 6.5 for iphone, ipad, blackberry, symbian s60 and phones that support java. as a side bonus, opera mobile 11.5 now also supports symbian s60.