Document Object Model (DOM) Toolbar


Direct onder het tekstvak waarin u jouw bericht opstelt wordt op een eenvoudige manier de huidige selectie van actieve HTML elementen weergegeven. Door op een element te klikken te klikken verschijnt een popup-menu waarmee je vervolgens de eigenschappen van dat element kunt selecteren.


Voorbeelden van elementen zijn onder meer paragrafen, tabellen, cellen, enzovoorts.


Hieronder volgt de technische beschrijving van het Document object model:


The Document Object Model ( DOM ) Toolbar provides an easy way to select HTML elements between the root of the document ( the <BODY> tag ) and the currently selected element. The DOM “branch” is essentially a listing of each parent HTML element from the selected element back to the <BODY> tag. This enables the user to modify the properties of any HTML element or it’s parent, or it’s grand-parent , or it’s great-grandparent etc etc in a branch of the HTML DOM.

 

For Example by clicking on a link inside a table cell inside which is in a table row in a table will produce the following display on the DOM Toolbar

TABLE – TR – TD – A

Graphically, it can be represented like this

 

Typing “Some more Text” into cell 3 on row 2 and aligning to the center using the button and then clicking in then text will change the DOM toolbar to

TABLE – TR – TD – P

Graphically, it looks like this

 

Each section of the DOM Toolbar behaves as a button, clicking on an section will produce a context menu allowing access to the properties, HTML tag code, CSS class, and in the case of table cells and table rows, some more advanced functionality.


DOM Toolbar context menu's



For Images


Properties – Opens the standard IMG tag properties window. Identical to right-clicking an image and selecting properties.

Edit Tag – Allows editing of the HTML IMG tag that defines the image

Class – Opens the CSS subclass menu, selecting a CSS style from the sub-menu applies the rules defined for that class to the image element



For TD (table cell) Elements


Properties – Opens the Cell Properties windows.

Edit Tag – unavailable for table cell elements

Class – Opens the CSS subclass menu, selecting a CSS style from the sub-menu applies the rules defined for that class to the HTML element

Cell Sub-menus

Delete Cell – removes the selected cell

Merge Cell Left – Merges the contents of the selected cell and the contents of left-hand cell adjancent into one cell

Merge Cell Right - Merges the contents of the selected cell and the contents of Right-hand cell adjancent into one cell

Insert Cell Before – Inserts a cell to the left of the current cell

Insert Cell After – Inserts a cell to the right of the current cell



For TR (table row) Elements


Properties – Opens the Cell Properties window.

Edit Tag – unavailable for table cell elements

Class – Opens the CSS subclass menu, selecting a CSS style from the sub-menu applies the rules defined for that class to the HTML element

Row Sub-menus

Delete Row – removes the selected row and its child elements

Insert Row Above – Inserts a row above the selected row

Insert Row Below – Inserts a row below the selected row



For TABLE Elements


Properties – Opens the Table Properties window.

Edit Tag – Allows editing of the opening HTML tag that defines the element

Class – Opens the CSS subclass menu, selecting a CSS style from the sub-menu applies the rules defined for that class to the HTML element



For All Other HTML Elements


Properties – at present a properties form is unavailable for other elements.

Edit Tag – Allows editing of the opening HTML tag that defines the element

Class – Opens the CSS subclass menu, selecting a CSS style from the sub-menu applies the rules defined for that class to the HTML element 


TradiumTech.nl is voor de technische ondersteuning van Tradium Business Software, kijk op www.tradium.nl voor meer informatie.