Sub Menu Demo

4 replies [Poslední]
Obrázek uživatele nicholas
Joined: 02/01/2009
Příspěvků: 326
User offline. Last seen 5 týdnů 2 dny ago.

Buttons

A quick and dirty demo I threw together. This allows you to create a menu with submenus.

Read the buttons commented code for documentation.

Please note that this button is not quite as clean as I would like it to be. I would prefer it use the cb2 mouseclick handler and some other things, but I am under time constraints, so this will do for now.

Sub Menu Demo
Compatibility: 

Minefield Firefox 3.0.* Firefox 2.0.*

Author(s): 
nicholas
Description & info:

Button(s):

Behavior

Action Behavior

Left

opens menu

Revize

نسخة عمليات
03/25/2009 - 07:01 بواسطة mike

adding disclaimer

النسخة الحالية
03/25/2009 - 06:56 بواسطة mike

initial post

Kód

javascript: Copy To Clipboard
this.siteGo(event);

Init

javascript: Copy To Clipboard
var srcUrl,MItem,mPop;
var sImg = this.image;
 
/*
 
To add a submenu create a new array using the array sub as an example (rename it),
then link to the submenu by adding a menuitem in the apps array which has the name
of the submenu array as it's third array item. 
The menuitem needs to have a 1 in it's first array item (this indicates
it has a submenu).  You may create as many submenus as you like and
can additionally create submenus within submenus.
 
*/
 
//------Sub Menu items--------
sub=new Array; // notice the name of this array
sub.push([0,'Item 1','http://custombuttons2.com/',sImg]);
sub.push([0,'separator']);
sub.push([0,'Item 2','http://custombuttons2.com/',sImg]);
sub.push([0,'Item 3','http://custombuttons2.com/',sImg]);
 
//------Main Menu items--------
apps=new Array;
// here is where I link the prior named array, see the name sub?
// I also insert a 1 instead of 0, this indicates it has a submenu
apps.push([1,'Item 1',sub,sImg]);
apps.push([0,'separator']);
apps.push([0,'Item 2','http://custombuttons2.com/',sImg]);
apps.push([0,'Item 3','http://custombuttons2.com/',sImg]);
 
//------FUNCTIONS FOR ADDING MENU ITEMS------
//------menu items-------
MItem=function(apps,value){
  var mItem=document.createElement('menuitem');
  mItem.setAttribute('label',apps[value] [1]);
  mItem.value = apps[value] [2];
  mItem.tooltipText = 'Cheggit';
  mItem.setAttribute('class','menuitem-iconic bookmark-item');
  mItem.setAttribute('image',apps[value] [3]);
  return mItem;
}
 
nItem=function(label,value){
  var mItem=document.createElement('menuitem'); 
  mPop=document.createElement('menupopup');
  mPop=createMenu(mPop,apps);
  mItem.value = value;
  mItem.setAttribute('class','menuitem-iconic bookmark-item');
  mItem.setAttribute('image',document.getElementById("page-proxy-favicon").src);
  return mItem;
}
mPop=document.createElement('menupopup');
mPop=createMenu(mPop,apps);
 
function createMenu(menu,aray) {
  for (var i=0;i<aray.length;i++) {
    if(aray[i] [0]==0) {
      if (aray[i] [1] =='separator') {
        menu.appendChild(document.createElement('menuseparator'));
      }
      else {
        menu.appendChild(MItem(aray,i));
      }
    }
    else {
      var sMenu=document.createElement('menu');
      sMenu.setAttribute('label',aray[i] [1]);
      sMenu.setAttribute('class','menuitem-iconic');
      sMenu.setAttribute('image',aray[i] [3]);
      var subMenu=document.createElement('menupopup');
      subMenu.setAttribute('orient','horizontal');
      subMenu=createMenu(subMenu,aray[i] [2]);
      sMenu.appendChild(subMenu);
      menu.appendChild(sMenu);
      //alert(subMenu.lastChild());
    }
  }	
  return menu;
}
 
//------DEFINES ACTIONS FOR SITES------
this.siteGo=function(evt) {
	var site=evt.target.value;
  gBrowser.selectedTab = gBrowser.addTab(site); //USE NEW TAB
}
 
this.appendChild(mPop);
//this.type = "menu"; this.setAttribute("class", "menu-iconic");// MAKES THIS A 'BUTTON MENU'
this.type = "menu-button"; // MAKES THIS A 'MENU BUTTON'
this.value=-1;this.setAttribute('homepage', 'http://custombuttons2.com/forum/buttons/templates-codes-tutorials/sub-menu-demo.html');

Nápověda

Field Empty

Detaily

Button Categories: 

Custom Buttons² was not found: find out why...

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7

Posted with the theme Pluralism

Top
Obrázek uživatele DreamRyderX
Joined: 11/17/2008
Příspěvků: 37
User offline. Last seen 5 dnů 12 hodin ago.

I like the DEMO very much.

Bobby Wink

Custom Buttons² v.2.0.9.10

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5 ImageShackToolbar/5.0.0

Posted with the theme Pluralism

Top
Obrázek uživatele morat
Joined: 01/31/2009
Příspěvků: 198
User offline. Last seen 4 hodiny 25 min ago.

Here is another way to create a sub menu button.

* left click to open a site in the current tab
* middle click to open a site in a new tab without focus

javascript: Copy To Clipboard
/*Initialization code*/
var menu = <menupopup
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  tooltiptext=""
  onclick="this.parentNode.handleClick(event)">
    <menu
      class="menu-iconic"
      image="chrome://global/skin/dirListing/folder.png"
      label="Search">
        <menupopup>
            <menuitem
              class="menuitem-iconic"
              image="http://www.google.com/favicon.ico"
              label="Google"
              url="http://www.google.com/"/>
            <menuitem
              class="menuitem-iconic"
              image="http://search.yahoo.com/favicon.ico"
              label="Yahoo"
              url="http://search.yahoo.com/"/>
            <menuitem
              class="menuitem-iconic"
              image="http://www.bing.com/favicon.ico"
              label="Bing"
              url="http://www.bing.com/"/>
        </menupopup>
    </menu>
    <menuitem
      class="menuitem-iconic"
      image="http://en.wikipedia.org/favicon.ico"
      label="Wikipedia"
      url="http://en.wikipedia.org/"/>
</menupopup>;
var bool = XML.prettyPrinting;
XML.prettyPrinting = false;
var element = new DOMParser().parseFromString(menu.toXMLString(), "application/xml").documentElement;
XML.prettyPrinting = bool;
this.appendChild(element);
this.type = "menu";
this.orient = "horizontal";
this.handleClick = function(event) {
  var url = event.target.getAttribute("url");
  if (url) {
    if      (event.button == 0) loadURI(url);         //   left click
    else if (event.button == 1) gBrowser.addTab(url); // middle click
  }
  this.open = false;
}

reference:

https://developer.mozilla.org/en/E4X
https://developer.mozilla.org/en/DOMParser

Custom Buttons² was not found: find out why...

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

Posted with the theme Pluralism

Top
Obrázek uživatele DreamRyderX
Joined: 11/17/2008
Příspěvků: 37
User offline. Last seen 5 dnů 12 hodin ago.

Nice Morat Wink

I was just wondering though, how would I go about making another sub menu item say Search 2. Also, if within say Search 2 I wanted/needed to make another sub menu, say SubSearch 1, how would that be coded?

Your alternative left no clues so that's why I need to know how it's done. I don't know spit about programing now, but I can analyze in real time, & my mind can't retain short term memories, so all I can hope for is that I get good examples--hopefully with instructions--or I make my own help notes to follow for future excursions into the abyss.

Thanks,

Bobby Wink

Custom Buttons² v.3.1.0

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.15) Gecko/2009101601 Firefox/3.0.15 ImageShackToolbar/5.2.3 (.NET CLR 3.5.30729)

Posted with the theme Pixture

Top
Obrázek uživatele morat
Joined: 01/31/2009
Příspěvků: 198
User offline. Last seen 4 hodiny 25 min ago.

Here is an example with a menu depth of 2.

* left click to open a site in the current tab
* middle click to open a site in a new tab without focus

javascript: Copy To Clipboard
/*Initialization code*/
var menu = <menupopup
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  tooltiptext=""
  onclick="this.parentNode.handleClick(event)">
    <menu
      class="menu-iconic"
      image="chrome://global/skin/dirListing/folder.png"
      label="Search">
        <menupopup>
            <menu
              class="menu-iconic"
              image="chrome://global/skin/dirListing/folder.png"
              label="Whois">
                <menupopup>
                    <menuitem
                      class="menuitem-iconic"
                      image="chrome://mozapps/skin/places/defaultFavicon.png"
                      label="InterNIC"
                      url="http://www.internic.net/whois.html"/>
                </menupopup>
            </menu>
            <menuitem
              class="menuitem-iconic"
              image="http://www.google.com/favicon.ico"
              label="Google"
              url="http://www.google.com/"/>
            <menuitem
              class="menuitem-iconic"
              image="http://search.yahoo.com/favicon.ico"
              label="Yahoo"
              url="http://search.yahoo.com/"/>
            <menuitem
              class="menuitem-iconic"
              image="http://www.bing.com/favicon.ico"
              label="Bing"
              url="http://www.bing.com/"/>
        </menupopup>
    </menu>
    <menuitem
      class="menuitem-iconic"
      image="http://en.wikipedia.org/favicon.ico"
      label="Wikipedia"
      url="http://en.wikipedia.org/"/>
</menupopup>;
var bool = XML.prettyPrinting;
XML.prettyPrinting = false;
var element = new DOMParser().parseFromString(menu.toXMLString(), "application/xml").documentElement;
XML.prettyPrinting = bool;
this.appendChild(element);
this.type = "menu";
this.orient = "horizontal";
this.handleClick = function(event) {
  var url = event.target.getAttribute("url");
  if (url) {
    if      (event.button == 0) loadURI(url);         //   left click
    else if (event.button == 1) gBrowser.addTab(url); // middle click
  }
  this.open = false;
}

Here is an example using the document.popupNode property.

Open File

* left click to open file in a new tab without focus
* middle click to open file in notepad

Open Application

* left or middle click to open application

javascript: Copy To Clipboard
/*Initialization code*/
var menu = <menupopup
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  tooltiptext="">
    <menu
      class="menu-iconic"
      image="chrome://global/skin/dirListing/folder.png"
      label="Open File">
        <menupopup>
            <menuitem
              class="menuitem-iconic"
              image="chrome://mozapps/skin/places/defaultFavicon.png"
              label="Mozilla Firefox/README.txt"
              onclick="document.popupNode.openFile(event,
                'C:/Program Files/Mozilla Firefox/README.txt',
                'C:/WINDOWS/system32/notepad.exe')"/>
            <menuitem
              class="menuitem-iconic"
              image="chrome://mozapps/skin/places/defaultFavicon.png"
              label="Mozilla Thunderbird/README.txt"
              onclick="document.popupNode.openFile(event,
                'C:/Program Files/Mozilla Thunderbird/README.txt',
                'C:/WINDOWS/system32/notepad.exe')"/>
        </menupopup>
    </menu>
    <menu
      class="menu-iconic"
      image="chrome://global/skin/dirListing/folder.png"
      label="Open Application">
        <menupopup>
            <menuitem
              class="menuitem-iconic"
              image="chrome://mozapps/skin/places/defaultFavicon.png"
              label="Explorer"
              onclick="document.popupNode.openApp('C:/WINDOWS/explorer.exe')"/>
            <menuitem
              class="menuitem-iconic"
              image="chrome://mozapps/skin/places/defaultFavicon.png"
              label="Calculator"
              onclick="document.popupNode.openApp('C:/WINDOWS/system32/calc.exe')"/>
        </menupopup>
    </menu>
</menupopup>;
var bool = XML.prettyPrinting;
XML.prettyPrinting = false;
var element = new DOMParser().parseFromString(menu.toXMLString(), "application/xml").documentElement;
XML.prettyPrinting = bool;
this.appendChild(element);
this.type = "menu";
this.orient = "horizontal";
this.openFile = function(event, file, editor) {
  if (event.button == 0) {
    gBrowser.addTab("file:///" + file);
  }
  if (event.button == 1) {
    var local = Components.classes["@mozilla.org/file/local;1"].
      createInstance(Components.interfaces.nsILocalFile);
    var process = Components.classes["@mozilla.org/process/util;1"].
      createInstance(Components.interfaces.nsIProcess);
    var args = new Array();
    args = [file.replace(/\//g, "\\")];
    local.initWithPath(editor.replace(/\//g, "\\"));
    process.init(local);
    process.run(false, args, args.length);
  }
  this.open = false;
}
this.openApp = function(application) {
  var local = Components.classes["@mozilla.org/file/local;1"].
    createInstance(Components.interfaces.nsILocalFile);
  local.initWithPath(application.replace(/\//g, "\\"));
  local.launch();
  this.open = false;
}
this.popup = function() {
  document.popupNode = this;
}
this.setAttribute("onpopupshowing", "this.popup()");

BTW,

You can remove the dropmarker from all custom buttons by editing the userChrome.css file.

toolbarbutton[id^="custombuttons-button"] .toolbarbutton-menu-dropmarker
{ display: none !important; }

reference:

https://developer.mozilla.org/en/DOM/document.popupNode
https://developer.mozilla.org/en/XUL/Attribute/onpopupshowing

Custom Buttons² was not found: find out why...

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6

Posted with the theme Pluralism

Top