Adding a Button to the Toolbar

This is an archived page. It's not actively maintained.

এই  টিউটরিআল বুঝতে হলে আপনাকে প্রথমে এস ডি কে ইন্সটল করতে হবে এবং সি এফ এক্স এর প্রাথমিক  জিনিস গুলা শিখতে হবে ।

এই টিউটোরিয়াল  এক্সশন বাটন  এ পি আই ব্যাবহার করে, যে শুধু মাত্র ফায়ার ফক্স ২৯ বা এর পরের ভারশন গুলোতে কাজ করে ।


কোন বাটন টুলবারের সাথে  সংযুক্ত করতে হলে  এক্সন বাটন বা টগল বাটন মডিউলগুলো ব্যাবহার করুন ।

একটি নতুন ডিরেক্টরি তৈরি করুন, তার ভেতরে ডুকুন এবং সিএফএক্স ইনিট চালান ।

তার পর নিচের আইকন তিনটি "ডাটা" ডিরেক্টরিতে সেভ করুন ।


Then open the file called "main.js" in the "lib" directory and add the following code to it:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  onClick: handleClick

function handleClick(state) {"");

Now run the add-on with cfx run. The button is added to the toolbar at the top of the browser window:

You can't set the initial location for the button, but the user can move it using the browser's customization feature. The id attribute is mandatory, and is used to remember the position of the button, so you should not change it in subsequent versions of the add-on.

Clicking the button loads into a new tab.

Specifying the icon

The icon property may specify a single icon or a collection of icons in different sizes, as in the example above. If you specify a collection of icons in different sizes the browser will automatically choose the best fit for the screen resolution and the place in the browser UI that hosts the button. Read more about specifying multiple icons.

The icon file must be packaged with your add-on: it may not refer to a remote file.

You can change the icon at any time by setting the button's icon property. You can change the icon, and the other state attributes, either globally, for a specific window, or for a specific tab. Read more about updating state.

Attaching a panel

If you need to attach a panel to a button, use the toggle button API. This is just like the action button API except it adds a boolean checked property which is toggled whenever the button is checked. To attach the panel, pass the button to the panel's show() method. For more details on this, see the toggle button's documentation.

Displaying richer content

To create more complex user interface content than is possible with just a button, use the toolbar API. With the toolbar API you get a complete horizontal strip of user interface real estate. You can add buttons to the toolbar and also frames, that can host HTML, CSS, and JavaScript.

Learning more