|
| Ortho Core JavaScript Classes | ||
| orthoLabel | ||
| new orthoLabel(parent, left, top, string, placement [, options]) | ||
| parent: The Ortho object in which the image will be placed | ||
| left, top: The integer pixel coordinates within the object where the label will be placed (see placement below). | ||
| string: The text that is to be displayed in this object. This can be simple text or can include HTML markup | ||
| placement: Specifies the placement of the image relative to the left and top coordinates. This is defined by a string containing one or two of the following terms: center, top, bottom, left, right. | ||
| Placement strings define the location of the image relative to the left and top coordinates (not the other way around). In other words the string 'bottom-right' places the label below and to the right of the coordinates. If the placement in one axis is omitted it defaults to 'center'. So the placement 'top' will place the label above the supplied top coordinate and with its x-axis placement centered on the supplied 'left' coordinate. If the only placement string is center then the label will be centered in both x and y axes on the supplied coordinates. Placement strings can be upper or lower case, in any order and with any separator. For example the strings 'bottom-right', 'right bottom', 'BOTTOMRIGHT' are all equivalent. Placement strings must be logically consistent. For example 'left right' is not valid. Placement is optional as long as no options hash is supplied. If omitted, placement defaults to 'bottom-right'. | ||
| options: A hash of options for this object. These can include the cssClass option which specifies a CSS class to use instead of the default for this object (.orthoLabel). The options hash is optional. | ||
| The orthoLabel option 'relation' is of particular importance when the label is defined with a parent object such as an orthoRectangle or orthoImage. This option can be either 'inside' or 'outside'. When created with a rectangle as parent, placement of 'top-right' and relation of 'inside', for example, will place the label in the top right inside corner of the rectangle and the values supplied for left and top are ignored. If the relation is 'outside' then the label is placed outside the parent object in the top right corner. The placement 'center' always centers the label within the parent, regardless of the relation. | ||
| This syntax is an important tool in creating labeled objects in diagrams. Labels can always be placed at absolute coordinates within a Panel but by setting them relative to other objects, as children of those objects, you can manipulate the parent using mouse events, for example, without having to directly manipulate the labels as well. | ||
// Place a label in panel to the bottom right of coordinate 50,50 var label0 = new orthoLabel(panel, 50, 50, 'Hello World'); // Place a label in panel centered on coordinate 50,50 var label1 = new orthoLabel(panel, 50, 50, 'Hello World', 'center); // Place a label containing a link in panel centered on coordinate 50,50 var label2 = new orthoLabel(panel, 50, 50, 'Hello <a href="http://craic.com">craic.com</a>', 'center'); // Create a rectangle and place a label in the bottom-left inside corner var rect = new orthoRectangle(panel, 50, 50, 200, 100); var label3 = new orthoLabel(rect, 50, 50, 'Hello World', 'bottom-left', {relation: 'inside'}); // Place another label in the top right corner outside the rectangle var label4 = new orthoLabel(rect, 50, 50, 'Hello World', 'top-right', {relation: 'outside'}); | ||
| Click here for Usage Examples of orthoLabel |
||
 |
Ortho © 2007 Robert Jones | Freely Distributable (MIT License) |
 |
Craic Computing LLC Seattle, WA, USA |