You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.



Image Button/Menu Button Spec

by Mike Pinkerton
Last Modified 2/24/98

Overview

This document is the engineering details behind the Image Button/Menu Button Requirements document. It supplements that document with examples and a comprehensive listing of attributes and parent/child relationships.


Syntax

The XUL syntax for Image Buttons and Menu Buttons. The only difference between the two should be the presence or absence of child nodes in the content tree. There shouldn't be any need for separate tags.

Tag

Attributes

Description

titledbutton

src

Image (gif, jpeg, etc) displayed within the button

align

Position of text in relation to the image. For example, "bottom" means the text is below the image.

value

Descriptive text for the button

Style

[ This area really needs work ]

Tag

Style Attributes

Description

titledbutton

color

Color of descriptive text

border

as in HTML

background-color

as in HTML

border-style

as in HTML

Event Handlers

[ Info forthcoming ]


Examples

Here is an example of XUL for a toolbar which has a button on it that executes an exposed function on an appcore.

<?xml version="1.0"?>
<window xmlns:html="http://www.w3.org/1999/xhtml">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<html:style type="text/css">
  toolbar { background-color=lightGray; background-image=url(marble.gif) }
  titledbutton { background-color=lightGray }
</html:style>

<html:script>
  function BrowserBack()
  {
    appCore = XPAppCoresManager.Find("BrowserAppCore");  
    if (appCore != null) {
      appCore.back();
    } else {
      dump("BrowserAppCore has not been created!\n");
    }
  }
</html:script>

<window>
  <broadcaster id="canGoBack"/>

  <toolbar>
    <titledbutton src="Back.gif" align="bottom" value="Back" onclick="BrowserBack()">	
      <observes element="canGoBack" attribute="disabled"/>			
    </titledbutton>
  </toolbar>
</window>

Note that this example doesn't show more complicated features such as:

  • how to get a menu or a tree to display on a button
  • how to hook up a button to an RDF data source for showing a local data hierarchy (like bookmarks) in a popdown tree
  • how to customize the look of a button with CSS

These will appear here shortly.


maintained by Mike Pinkerton (pinkerton@netscape.com)