XUL provides faster and more accessible widgets.
XUL is a Mozilla-only technology. DHTML is cross-browser compatible.
| File | Description | Comment |
|---|---|---|
| hXUL_class.js | base class | Required |
| hXUL_aux.js | auxiliary resources | Required |
| hXUL_panel.js | Tabbed Panel widget | Required only for the panel widget |
| hXUL_tree.js | Tree widget | Required only for the tree widget |
hXUL.disableXULRendering: Set to true to use DHTML rendering only.
Note that the panel renders differently based on what browser you're using. In Firefox, XUL is used. In any other browser, the widget is rendered with DHTML.
The functionalities of the two versions are equivalent. The look& feel is not, but that's a matter of CSS styling.
var myPanel = hXUL.AssetManager.createPanel("myPanel",
[{content: document.getElementById("tabPanelA")},
{content: document.getElementById("tabPanelB")},
{content: document.getElementById("tabPanelC")}
]);
myPanel.render("myTabBox");
var mypanel = hXUL.AssetManager.createPanel(panel_id, panels, [placeholder])
- panel_id:
- unique id (string). The ids of HTML elements generated by this widget are derived from this panel_id.
- panels:
- array of objects. Each panel is an object with the following properties:
- content:
- reference to an HTML element. The content will be moved inside the tab.
- title:
- Title of the panel, used in the tab. (optional, if not set the title attribute of the content element is used.)
- placeholder:
- id of an element, or the reference to the element itself, where the panel must be rendered (optional, if not set here, must be provided with the render method
myPanel.render([placeholder]);
- placeholder:
- id of an element, or the reference to the element itself, where the panel must be rendered (optional, can be set in the createPanel function.
Note that the tree renders differently based on what browser you're using. In Firefox, XUL is used. In any other browser, the widget is rendered with DHTML.
The functionalities of the two versions are equivalent. The look& feel is not, but that's a matter of CSS styling.
var treedata = [ {content: ["1","a"]},
{content: ["2","b"],
children: [ {content: ["2a","ba"]}, {content: ["2b","bb"]} ]
},
/* snip... */
];
var myTree = hXUL.AssetManager.createTreeView("myTree1", ["Column A","Column B"], treedata);
myTree.render("myTreeBox");
myTree = hXUL.AssetManager.createTreeView(tree_id, column_titles, treedata);
- tree_id
- unique id (string). The ids of HTML elements generated by this widget are derived from this tree_id.
- column_titles
- Array of strings. Each string is the title of a tree column. Set to null if you don't need column titles.
- treedata
- Array of objects. Each object has the following properties.
- content:
- Array of string. The values to be displayed in the tree columns (one value per column). Any HTML code present will be parsed.
- children:
- Array of object (optional), contains the child nodes of this tree element.
myTree.render([placeholder]);
- placeholder:
- id of an element, or the reference to the element itself, where the tree must be rendered (optional, can be set in the createTreeView function.