Core.js| MooTools | My Object Oriented JavaScript Tools. |
LicenseMIT-style license. CopyrightCopyright © 2006-2008 [Valerio Proietti](http://mad4milk.net/). Code & Documentation[The MooTools production team](http://mootools.net/developers/). InspirationSummary | | | | | | | Contains Array Prototypes like each, contains, and erase. | | Contains Function Prototypes like create, bind, pass, and delay. | | Contains Number Prototypes like limit, round, times, and ceil. | | Contains String Prototypes like camelCase, capitalize, test, and toInt. | | Contains Hash Prototypes. | | Contains the Event Native, to make the event object completely crossbrowser. | | Contains the Class Function for easily creating, extending, and implementing reusable Classes. | | Contains Utility Classes that can be implemented into your own Classes to ease the execution of many common tasks. | | One of the most important items in MooTools. | | Contains Element methods for dealing with events, and custom Events. | | Contains methods for interacting with the styles of Elements in a fashionable way. | | Contains methods to work with size, scroll, or positioning of Elements and the window object. | | Adds advanced CSS Querying capabilities for targeting elements. | | Contains the domready custom event. | | JSON encoder and decoder. | | Class for creating, loading, and saving browser Cookies. | | Wrapper for embedding SWF movies. | | Contains the basic animation logic to be extended by all other Fx Classes. | | Contains the CSS animation logic. | | Formerly Fx.Style, effect to transition any CSS property for an element. | | Formerly Fx.Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules. | | Contains a set of advanced transitions to be used with any of the Fx Classes. | | Powerful all purpose Request Class. | | Extends the basic Request Class with additional methods for interacting with HTML responses. | | Extends the basic Request Class with additional methods for sending and receiving JSON data. | | Effect to slide an element in and out of view. | | Effect to smoothly scroll any element, including the window. | | Effect to change any number of CSS properties of any number of Elements. | | | | A Drag extension that provides support for the constraining of draggables to containers and droppables. | | Class for creating, reading, and deleting Cookies in JSON format. | | Class for creating and manipulating colors in JavaScript. | | Class for monitoring collections of events | | Provides methods to dynamically load JavaScript, CSS, and Image files into the document. | | Class for creating a drag and drop sorting interface for lists of items. | | Class for creating nice tips that follow the mouse cursor when hovering an element. | | Class for creating a smooth scrolling effect to all internal links on the page. | | Class for creating horizontal and vertical slider controls. | | Class which scrolls the contents of any Element (including the window) when the mouse reaches the Element’s boundaries. | | An Fx.Elements extension which allows you to easily create accordion type controls. | | Jx is a global singleton object that contains the entire Jx library within it. | | | | This is the URL that Jx was loaded from, it is automatically calculated from the script tag src property that included Jx. | | | | Static method that applies the PNG Filter Hack for IE browsers when showing 24bit PNG’s. | | Request that an image be set to a DOM IMG element src attribute. | | An internal method that ensures no more than 2 images are loading at a time. | | An internal method actually populate the DOM element with the image source. | | Creates a new iframe element that is intended to fill a container to mask out other operating system controls (scrollbars, inputs, buttons, etc) when HTML elements are supposed to be above them. | | Element is a global object provided by the mootools library. | | | | return the size of the content area of an element. | | return the size of the border area of an element. | | return the size of the margin area of an element. | | set either or both of the width and height of an element to the provided size. | | set either or both of the width and height of an element to the provided size. | | returns the padding for each edge of an element | | returns the border size for each edge of an element | | safely parse a number and return its integer value. | | return the dimensions of the browser client area. | | determines if the element is a descendent of the reference node. | | search the parentage of the element to find an element of the given tag name. | | ContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways: | | | | tracks the load state of the content, specifically useful in the case of remote content. | | | | triggers loading of content based on options set for the current object. | | Mix-in class that provides a method for positioning elements relative to other elements. | | | | positions an element relative to another element based on the provided options. | | A mix-in class that provides chrome helper functions. | | | | the DOM element that contains the chrome | | | | create chrome on an element. | | show the chrome on an element. | | removes the chrome from the DOM. | | A mix-in class that provides a helper function that allows an object to be added to an existing element on the page. | | | | adds the object to the DOM relative to another element. | | the HTML element that is inserted into the DOM for this button. | | | | triggered when the user clicks the button, processes the actionPerformed event | | This returns true if the button is enabled, false otherwise | | enable or disable the button. | | For toggle buttons, this returns true if the toggle button is currently active and false otherwise. | | Set the active state of the button | | set the image of this button to a new image URL | | sets the text of the button. | | returns the text of the button. | | sets the tooltip displayed by the button | | capture the keyboard focus on this button | | remove the keyboard focus from this button | | Flyout buttons expose a panel when the user clicks the button. | | | | the HTML element that contains the flyout content | | | | construct a new instance of a flyout button. | | Override <Jx.Button::clicked> to hide/show the content area of the flyout. | | Closes the flyout if open | | Multi buttons are used to contain multiple buttons in a drop down list where only one button is actually visible and clickable in the interface. | | | | the currently selected button | | {Array} the buttons added to this multi button | | | | construct a new instance of Jx.Button.Multi. | | adds one or more buttons to the Multi button. | | remove a button from a multi button | | update the menu item to be the requested button. | | update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. | | A Jx.ColorPalette presents a user interface for selecting colors. | | | | the HTML element representing the color panel | | | | initialize a new instance of Jx.ColorPalette | | handle the mouse moving over a colour swatch by updating the preview | | handle mouse click on a swatch by updating the color and hiding the panel. | | handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX. | | handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100). | | set the colour represented by this colour panel | | set the alpha represented by this colour panel | | update the colour panel user interface based on the current colour and alpha values | | | | | | initialize a new colour button. | | show the color panel when the user clicks the button | | | | set the colour represented by this colour panel | | set the alpha represented by this colour panel | | colorChangeListener callback function when the user changes the colour in the panel (just update the preview). | | Update the swatch color for the current color | | A ButtonSet manages a set of <Jx.Button> instances by ensuring that only one of the buttons is active. | | | | {Array} array of buttons that are managed by this button set | | | | | | Add one or more <Jx.Button>s to the ButtonSet. | | Remove a button from this Button. | | Set the active button to the one passed to this method | | Handle selection changing on the buttons themselves and activate the appropriate button in response. | | A tabular control that has fixed scrolling headers on the rows and columns like a spreadsheet. | | | | construct a new instance of Jx.Grid within the domObj | | handle the grid scrolling by updating the position of the headers | | resize the grid to fit inside its container. | | set the model for the grid to display. | | destroy the contents of the grid safely | | create the grid for the current model | | | | called through the grid listener interface when data has changed in the underlying model | | apply the jxGridRowHeaderPrelight style to the header cell of a row. | | apply the jxGridColumnHeaderPrelight style to the header cell of a column. | | apply the jxGridRowPrelight style to row. | | apply the jxGridColumnPrelight style to a column. | | apply the jxGridCellPrelight style to a cell. | | Select a cell and apply the jxGridCellSelected style to it. | | Apply the jxGridRowHeaderSelected style to the row header cell of a selected row. | | Select a row and apply the jxGridRowSelected style to it. | | Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column. | | | | handle the mouse moving over the main grid. | | handle the mouse moving over the row header cells. | | handle the mouse moving over the column header cells. | | handle the user clicking on the grid. | | handle the user clicking on the row header. | | handle the user clicking on the column header. | | retrieve the row and column indexes from an event click. | | This function returns the number of columns of data in the model as an integer value. | | This function returns an HTML string to be placed in the column header for the given column index. | | This function returns an integer which is the height of the column header row in pixels. | | This function returns an integer which is the width of the given column in pixels. | | This function returns an HTML string to be placed in the row header for the given row index | | This function returns an integer which is the width of the row header column in pixels. | | This function returns an integer which is the height of the given row in pixels. | | This function returns the number of rows of data in the model as an integer value. | | This function returns an HTML string which is the text to place in the cell at the given row and column. | | This function returns a boolean value to indicate if a given cell is editable by the user. | | This function is called with a column index and width in pixels when a column is resized. | | This function is called with the row and column of a cell and a new value for the cell. | | This function is called by the grid to indicate that the user has selected a row by clicking on the row header. | | This function is called by the grid to indicate that the user has selected a column by clicking on the column header. | | This function is called by the grid to indicate that the user has selected a cell by clicking on the cell in the grid. | | Jx.Layout is used to provide more flexible layout options for applications | | | | Create a new instance of Jx.Layout. | | when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized | | resize the element controlled by this Jx.Layout object. | | A main menu as opposed to a sub menu that lives inside the menu. | | | | {HTMLElement} The HTML element containing the menu. | | {<Jx.Button>} The button that represents this menu in a toolbar and opens the menu. | | {HTMLElement} the HTML element that contains the menu items within the menu. | | {Array} the items in this menu | | | | Create a new instance of Jx.Menu. | | Add menu items to the sub menu. | | Deactivate the menu by hiding it. | | Handle the user moving the mouse over the button for this menu by showing this menu and hiding the other menu. | | determine if an event happened inside this menu or a sub menu of this menu. | | | | | | Set the sub menu that is currently open | | A menu item is a single entry in a menu. | | | | {<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item. | | | | Create a new instance of Jx.Menu.Item | | Set the owner of this menu item | | | | | | Handle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking | | handle the mouse moving over the menu item | | A convenience class to create a visual separator in a menu. | | | | {HTMLElement} the HTML element that the separator is contained within | | | | | | Create a new instance of a menu separator | | Set the ownder of this menu item | | | | | | A sub menu contains menu items within a main menu or another sub menu. | | | | {HTMLElement} the HTML container for the sub menu. | | | | {<Jx.MenuItem>} the visible item within the menu | | {Array} the menu items that are in this sub menu. | | | | Create a new instance of Jx.SubMenu | | Set the owner of this sub menu | | | | | | Add menu items to the sub menu. | | Insert a menu item before another menu item. | | Remove a single menu item from the menu. | | | | Indicate if this sub menu is active | | Set the active state of the Jx.Menu that contains this sub menu | | Set a sub menu of this menu to be visible and hide the previously visible one. | | A Jx.Menu that has no button but can be opened at a specific browser location to implement context menus (for instance). | | | | create a new context menu | | Show the context menu at the location of the mouse click | | A panel is a fundamental container object that has a content area and optional toolbars around the content area. | | | | the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area. | | Set the label in the title bar of this panel | | Get the label of the title bar of this panel | | | | | | set the content of this panel to some HTML | | Set the content of this panel to come from some URL. | | When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns. | | Set the panel as busy or not busy, which displays a loading image in the title bar. | | sets or toggles the collapsed state of the panel. | | Closes the panel (completely hiding it). | | A Jx.Dialog implements a floating dialog. | | | | modal dialogs prevent interaction with the rest of the application while they are open, this element is displayed just under the dialog to prevent the user from clicking anything. | | | | Construct a new instance of Jx.Dialog | | overload panel’s sizeChanged method | | sets or toggles the collapsed state of the panel. | | set the text of the dialog title. | | show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible. | | hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog. | | | | close the dialog and trigger the onClose callback function if necessary | | handle the dialog content being loaded. | | A panel set manages a set of panels within a DOM element. | | | | {Array} the panels being managed by the set | | {Integer} the height of the container, cached for speed | | {Boolean} true until the panel set has first been resized | | | | Create a new instance of Jx.PanelSet. | | Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values) | | A drop down list of selectable items. | | | | {Object} current selection in the list | | | | create a new instance of Jx.Combo | | enable or disable the combo button. | | invoked when the current value is changed | | Handle the user pressing a key by looking for an ENTER key to set the value. | | add a new item to the pick list | | Remove the item at the given index | | set the value of the Combo | | | | a Jx.Splitter creates two or more containers within a parent container and provides user control over the size of the containers. | | | | {HTMLElement} the element being split | | {Array} an array of elements that are displayed in each of the split areas | | {Array} an array of the bars between each of the elements used to resize the split areas. | | {Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed. | | | | Create a new instance of Jx.Splitter | | Prepare a new, empty element to go into a split area. | | Prepare a new, empty bar to go into between split areas. | | Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area. | | In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar. | | In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar. | | handle the size of the container being changed. | | Resize a horizontally layed-out container | | Resize a vertically layed out container. | | A helper class to create an element that can snap a split panel open or closed. | | | | {HTMLElement} the DOM element of the snap (the thing that gets clicked). | | {HTMLElement} An element of the Jx.Splitter that gets controlled by this snap | | { Jx.Splitter} the splitter that this snap is associated with. | | {String} track the layout of the splitter for convenience. | | | | Create a new Jx.Splitter.Snap | | Snap the element open or closed. | | Handle the size of the element changing to see if the toggle state has changed. | | A TabSet manages a set of Jx.Button.Tab content areas by ensuring that only one of the content areas is visible (i.e. | | | | {Array} array of tabs that are managed by this tab set | | {HTMLElement} The HTML element that represents this tab set in the DOM. | | | | Create a new instance of Jx.TabSet within a specific element of the DOM. | | Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set. | | | | Remove a tab from this TabSet. | | Set the active tab to the one passed to this method | | A convenience class to handle the common case of a single toolbar directly attached to the content area of the tabs. | | | | | | | | | | Create a new instance of a TabBox. | | Add one or more <Jx.Tab>s to the TabBox. | | Remove a tab from the TabSet. | | A single tab in a tab set. | | | | {HTMLElement} The content area that is displayed when the tab is active. | | | | Create a new instance of Jx.Button.Tab. | | triggered when the user clicks the button, processes the actionPerformed event | | A toolbar is a container object that contains other objects such as buttons. | | | | {Array} an array of the things in the toolbar. | | {HTMLElement} the HTML element that the toolbar lives in | | When a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out. | | | | Create a new instance of Jx.Toolbar. | | Add an item to the toolbar. | | remove an item from a toolbar. | | Deactivate the Toolbar (when it is acting as a menu bar). | | Indicate if the toolbar is currently active (as a menu bar) | | Set the active state of the toolbar (for menus) | | For menus, they want to know which menu is currently open. | | A helper class to provide a container for something to go into a Jx.Toolbar. | | | | {HTMLElement} an element to contain the thing to be placed in the toolbar. | | | | Create a new instance of Jx.Toolbar.Item. | | A helper class that represents a visual separator in a Jx.Toolbar | | | | {HTMLElement} The DOM element that goes in the Jx.Toolbar | | | | Create a new Jx.Toolbar.Separator | | A toolbar container contains toolbars. | | | | {HTMLElement} the HTML element that the container lives in | | | | Create a new instance of Jx.Toolbar.Container | | Add a toolbar to the container. | | remove an item from a toolbar. | | scrolls an item in one of the toolbars into the currently visible area of the container if it is not already fully visible | | | | | | {HTMLElement} a reference to the HTML element that is the TreeItem in the DOM | | {Object} the folder or tree that this item belongs to | | | | Create a new instance of Jx.TreeItem with the associated options | | Clean up the TreeItem and remove all DOM references | | Clean up the TreeItem and remove all DOM references | | Create a clone of the TreeItem | | Update the CSS of the TreeItem’s DOM element in case it has changed position | | Called when the DOM element for the TreeItem is clicked, the node is selected. | | Called when the DOM element for the TreeItem is right-clicked. | | Get the label associated with a TreeItem | | A property of an object has changed, synchronize the state of the TreeItem with the state of the object | | A Jx.TreeFolder is an item in a tree that can contain other items. | | | | {HTMLElement} an HTML container for the things inside the folder | | {Array} an array of references to the javascript objects that are children of this folder | | | | Create a new instance of Jx.TreeFolder | | | | Internal method to clean up folder-related stuff. | | Create a clone of the TreeFolder | | Indicates if a node is the last thing in the folder. | | Update the CSS of the TreeFolder’s DOM element in case it has changed position. | | append a node at the end of the sub-tree | | insert a node after refNode. | | remove the specified node from the tree | | Replace a node with another node | | handle the user clicking on this folder by expanding or collapsing it. | | | | | | Get a reference to a child node by recursively searching the tree | | Jx.Tree displays hierarchical data in a tree structure of folders and nodes. | | | | Create a new instance of Jx.Tree | | Clean up a Jx.Tree instance | | Clear the tree of all child nodes | | Update the CSS of the Tree’s DOM element in case it has changed position | | Append a node at the end of the sub-tree |
Browser.jsThe Browser Core. Contains Browser initialization, Window and Document, and the Browser Hash. LicenseMIT-style license. Array.jsContains Array Prototypes like each, contains, and erase. LicenseMIT-style license. Function.jsContains Function Prototypes like create, bind, pass, and delay. LicenseMIT-style license. Number.jsContains Number Prototypes like limit, round, times, and ceil. LicenseMIT-style license. String.jsContains String Prototypes like camelCase, capitalize, test, and toInt. LicenseMIT-style license. Hash.jsContains Hash Prototypes. Provides a means for overcoming the JavaScript practical impossibility of extending native Objects. LicenseMIT-style license. Event.jsContains the Event Native, to make the event object completely crossbrowser. LicenseMIT-style license. Class.jsContains the Class Function for easily creating, extending, and implementing reusable Classes. LicenseMIT-style license. Class. Extras.jsContains Utility Classes that can be implemented into your own Classes to ease the execution of many common tasks. LicenseMIT-style license. Element.jsOne of the most important items in MooTools. Contains the dollar function, the dollars function, and an handful of cross-browser, time-saver methods to let you easily work with HTML Elements. LicenseMIT-style license. Element. Event.jsContains Element methods for dealing with events, and custom Events. LicenseMIT-style license. Element. Style.jsContains methods for interacting with the styles of Elements in a fashionable way. LicenseMIT-style license. Element. Dimensions.jsContains methods to work with size, scroll, or positioning of Elements and the window object. LicenseMIT-style license. CreditsSelectors.jsAdds advanced CSS Querying capabilities for targeting elements. Also includes pseudoselectors support. LicenseMIT-style license. Domready.jsContains the domready custom event. LicenseMIT-style license. Cookie.jsClass for creating, loading, and saving browser Cookies. LicenseMIT-style license. CreditsBased on the functions by Peter-Paul Koch (http://quirksmode.org). Swiff.jsWrapper for embedding SWF movies. Supports (and fixes) External Interface Communication. LicenseMIT-style license. CreditsFlash detection & Internet Explorer + Flash Player 9 fix inspired by SWFObject. Fx.jsContains the basic animation logic to be extended by all other Fx Classes. LicenseMIT-style license. Fx. CSS.jsContains the CSS animation logic. Used by Fx.Tween, Fx.Morph, Fx.Elements. LicenseMIT-style license. Fx. Tween.jsFormerly Fx.Style, effect to transition any CSS property for an element. LicenseMIT-style license. Fx. Morph.jsFormerly Fx.Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules. LicenseMIT-style license. Fx. Transitions.jsContains a set of advanced transitions to be used with any of the Fx Classes. LicenseMIT-style license. CreditsEasing Equations by Robert Penner, http://www.robertpenner.com/easing/, modified and optimized to be used with MooTools. Request.jsPowerful all purpose Request Class. Uses XMLHTTPRequest. LicenseMIT-style license. Request. HTML.jsExtends the basic Request Class with additional methods for interacting with HTML responses. LicenseMIT-style license. Request. JSON.jsExtends the basic Request Class with additional methods for sending and receiving JSON data. LicenseMIT-style license. Fx. Slide.jsEffect to slide an element in and out of view. LicenseMIT-style license. Fx. Scroll.jsEffect to smoothly scroll any element, including the window. LicenseMIT-style license. Fx. Elements.jsEffect to change any number of CSS properties of any number of Elements. LicenseMIT-style license. Drag.jsThe base Drag Class. Can be used to drag and resize Elements using mouse events. LicenseMIT-style license. Drag. Move.jsA Drag extension that provides support for the constraining of draggables to containers and droppables. LicenseMIT-style license. Hash. Cookie.jsClass for creating, reading, and deleting Cookies in JSON format. LicenseMIT-style license. Color.jsClass for creating and manipulating colors in JavaScript. Supports HSB -> RGB Conversions and vice versa. LicenseMIT-style license. Group.jsClass for monitoring collections of events LicenseMIT-style license. Assets.jsProvides methods to dynamically load JavaScript, CSS, and Image files into the document. LicenseMIT-style license. Sortables.jsClass for creating a drag and drop sorting interface for lists of items. LicenseMIT-style license. Tips.jsClass for creating nice tips that follow the mouse cursor when hovering an element. LicenseMIT-style license. SmoothScroll.jsClass for creating a smooth scrolling effect to all internal links on the page. LicenseMIT-style license. Slider.jsClass for creating horizontal and vertical slider controls. LicenseMIT-style license. Scroller.jsClass which scrolls the contents of any Element (including the window) when the mouse reaches the Element’s boundaries. LicenseMIT-style license. Accordion.jsAn Fx.Elements extension which allows you to easily create accordion type controls. LicenseMIT-style license. JxJx is a global singleton object that contains the entire Jx library within it. All Jx functions, attributes and classes are accessed through the global Jx object. Jx should not create any other global variables, if you discover that it does then please report it as a bug LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | This is the URL that Jx was loaded from, it is automatically calculated from the script tag src property that included Jx. | | | | Static method that applies the PNG Filter Hack for IE browsers when showing 24bit PNG’s. | | Request that an image be set to a DOM IMG element src attribute. | | An internal method that ensures no more than 2 images are loading at a time. | | An internal method actually populate the DOM element with the image source. | | Creates a new iframe element that is intended to fill a container to mask out other operating system controls (scrollbars, inputs, buttons, etc) when HTML elements are supposed to be above them. |
{String} baseURLThis is the URL that Jx was loaded from, it is automatically calculated from the script tag src property that included Jx. Note that this assumes that you are loading Jx from a js/ or lib/ folder in parallel to the images/ folder that contains the various images needed by Jx components. If you have a different folder structure, you can define Jx’s base by including the following before including the jxlib javascript file: Jx = {
baseURL: 'some/path'
}
applyPNGFilter| Jx.applyPNGFilter = function( | o | ) |
|
Static method that applies the PNG Filter Hack for IE browsers when showing 24bit PNG’s. Used automatically for img tags with a class of png24. The filter is applied using a nifty feature of IE that allows javascript to be executed as part of a CSS style rule - this ensures that the hack only gets applied on IE browsers. The CSS that triggers this hack is only in the ie6.css files of the various themes. Parametersobject {Object} the object (img) to which the filter needs to be applied. addToImgQueue| Jx.addToImgQueue = function( | obj | ) |
|
Request that an image be set to a DOM IMG element src attribute. This puts the image into a queue and there are private methods to manage that queue and limit image loading to 2 at a time. Parameters| obj | {Object} an object containing an element and src property, where element is the element to update and src is the url to the image. |
checkImgQueue| Jx.checkImgQueue = function() |
An internal method that ensures no more than 2 images are loading at a time. loadNextImg| Jx.loadNextImg = function() |
An internal method actually populate the DOM element with the image source. createIframeShim| Jx.createIframeShim = function() |
Creates a new iframe element that is intended to fill a container to mask out other operating system controls (scrollbars, inputs, buttons, etc) when HTML elements are supposed to be above them. Returnsan HTML iframe element that can be inserted into the DOM. ElementElement is a global object provided by the mootools library. The functions documented here are extensions to the Element object provided by Jx to make cross-browser compatibility easier to achieve. Most of the methods are measurement related. While the code in these methods has been converted to use MooTools methods, there may be better MooTools methods to use to accomplish these things. Ultimately, it would be nice to eliminate most or all of these and find the MooTools equivalent or convince MooTools to add them. Summary | | | return the size of the content area of an element. | | return the size of the border area of an element. | | return the size of the margin area of an element. | | set either or both of the width and height of an element to the provided size. | | set either or both of the width and height of an element to the provided size. | | returns the padding for each edge of an element | | returns the border size for each edge of an element | | safely parse a number and return its integer value. | | return the dimensions of the browser client area. | | determines if the element is a descendent of the reference node. | | search the parentage of the element to find an element of the given tag name. |
getContentBoxSize| getContentBoxSize : function() |
return the size of the content area of an element. This is the size of the element less margins, padding, and borders. Parameters| elem | {Object} the element to get the content size of. |
Returns{Object} an object with two properties, width and height, that are the size of the content area of the measured element. getBorderBoxSize| getBorderBoxSize: function() |
return the size of the border area of an element. This is the size of the element less margins. Parameters| elem | {Object} the element to get the border sizing of. |
Returns{Object} an object with two properties, width and height, that are the size of the border area of the measured element. getMarginBoxSize| getMarginBoxSize: function() |
return the size of the margin area of an element. This is the size of the element plus margins. Parameters| elem | {Object} the element to get the margin sizing of. |
Returns{Object} an object with two properties, width and height, that are the size of the margin area of the measured element. setContentBoxSize| setContentBoxSize : function( | size | ) |
|
set either or both of the width and height of an element to the provided size. This function ensures that the content area of the element is the requested size and the resulting size of the element may be larger depending on padding and borders. Parameters| elem | {Object} the element to set the content area of. | | size | {Object} an object with a width and/or height property that is the size to set the content area of the element to. |
setBorderBoxSize| setBorderBoxSize : function( | size | ) |
|
set either or both of the width and height of an element to the provided size. This function ensures that the border size of the element is the requested size and the resulting content areaof the element may be larger depending on padding and borders. Parameters| elem | {Object} the element to set the border size of. | | size | {Object} an object with a width and/or height property that is the size to set the content area of the element to. |
getPaddingSize| getPaddingSize : function () |
returns the padding for each edge of an element Parameters| elem | {Object} The element to get the padding for. |
Returns{Object} an object with properties left, top, right and bottom that contain the associated padding values. getBorderSize| getBorderSize : function() |
returns the border size for each edge of an element Parameters| elem | {Object} The element to get the borders for. |
Returns{Object} an object with properties left, top, right and bottom that contain the associated border values. getNumbersafely parse a number and return its integer value. A NaN value returns 0. CSS size values are also parsed correctly. Parameters| n | {Mixed} the string or object to parse. |
Returns{Integer} the integer value that the parameter represents getPageDimensions| getPageDimensions: function() |
return the dimensions of the browser client area. Returns{Object} an object containing a width and height property that represent the width and height of the browser client area. descendantOf| descendantOf: function( | node | ) |
|
determines if the element is a descendent of the reference node. Parameters| node | {HTMLElement} the reference node |
Returns{Boolean} true if the element is a descendent, false otherwise. findElement| findElement: function( | type | ) |
|
search the parentage of the element to find an element of the given tag name. Parameters| type | {String} the tag name of the element type to search for |
Returns{HTMLElement} the first node (this one or first parent) with the requested tag name or false if none are found. Jx. ContentLoaderContentLoader is a mix-in class that provides a consistent mechanism for other Jx controls to load content in one of four different ways: - using an existing element, by id
- using an existing element, by object reference
- using an HTML string
- using a URL to get the content remotely
Use the Implements syntax in your Class to add Jx.ContentLoader to your class. Summary | | | tracks the load state of the content, specifically useful in the case of remote content. | | | | triggers loading of content based on options set for the current object. |
contentIsLoadedtracks the load state of the content, specifically useful in the case of remote content. loadContent| loadContent: function( | element | ) |
|
triggers loading of content based on options set for the current object. Parameters| element | {Object} the element to insert the content into |
Options| content | {Mixed} content may be an HTML element reference, the id of an HTML element already in the DOM, or an HTML string that becomes the inner HTML of the element. | | contentURL | {String} the URL to load content from |
EventsContentLoader adds the following events to an object. You can register for these events using the addEvent method or by providing callback functions via the on{EventName} properties in the options object | contentLoaded | called when the content has been loaded. If the content is not asynchronous then this is called before loadContent returns. | | contentLoadFailed | called if the content fails to load, primarily useful when using the contentURL method of loading content. |
Jx. AutoPositionMix-in class that provides a method for positioning elements relative to other elements. Summary | | | positions an element relative to another element based on the provided options. |
position| position: function( | element, | | relative, | | options | ) |
|
positions an element relative to another element based on the provided options. Positioning rules are a string with two space-separated values. The first value references the parent element and the second value references the thing being positioned. In general, multiple rules can be considered by passing an array of rules to the horizontal and vertical options. The position method will attempt to position the element in relation to the relative element using the rules specified in the options. If the element does not fit in the viewport using the rule, then the next rule is attempted. If all rules fail, the last rule is used and element may extend outside the viewport. Horizontal and vertical rules are processed independently. Horizontal PositioningHorizontal values are ‘left’, ‘center’, ‘right’, and numeric values. Some common rules are: - ’left left’ is interpreted as aligning the left edge of the element to be positioned with the left edge of the reference element.
- ’right right’ aligns the two right edges.
- ’right left’ aligns the left edge of the element to the right of the reference element.
- ’left right’ aligns the right edge of the element to the left edge of the reference element.
Vertical PositioningVertical values are ‘top’, ‘center’, ‘bottom’, and numeric values. Some common rules are: - ’top top’ is interpreted as aligning the top edge of the element to be positioned with the top edge of the reference element.
- ’bottom bottom’ aligns the two bottom edges.
- ’bottom top’ aligns the top edge of the element to the bottom of the reference element.
- ’top bottom’ aligns the bottom edge of the element to the top edge of the reference element.
Parameters| element | the element to position | | relative | the element to position relative to | | options | the positioning options, see list below. |
Options| horizontal | the horizontal positioning rule to use to position the element. Valid values are ‘left’, ‘center’, ‘right’, and a numeric value. The default value is ‘center center’. | | vertical | the vertical positioning rule to use to position the element. Valid values are ‘top’, ‘center’, ‘bottom’, and a numeric value. The default value is ‘center center’. | | offsets | an object containing numeric pixel offset values for the object being positioned as top, right, bottom and left properties. |
Jx. ChromeA mix-in class that provides chrome helper functions. Chrome is the extraneous visual element that provides the look and feel to some elements i.e. dialogs. Chrome is added inside the element specified but may bleed outside the element to provide drop shadows etc. This is done by absolutely positioning the chrome objects in the container based on calculations using the margins, borders, and padding of the jxChrome class and the element it is added to. Chrome can consist of either pure CSS border and background colors, or a background-image on the jxChrome class. Using a background-image on the jxChrome class creates four images inside the chrome container that are positioned in the top-left, top-right, bottom-left and bottom-right corners of the chrome container and are sized to fill 50% of the width and height. The images are positioned and clipped such that the appropriate corners of the chrome image are displayed in those locations. Summary | | | the DOM element that contains the chrome | | | | create chrome on an element. | | show the chrome on an element. | | removes the chrome from the DOM. |
chromethe DOM element that contains the chrome makeChrome| makeChrome: function( | element | ) |
|
create chrome on an element. Parameters| element | {HTMLElement} the element to put the chrome on. |
showChrome| showChrome: function( | element | ) |
|
show the chrome on an element. This creates the chrome if necessary. If the chrome has been previously created and not removed, you can call this without an element and it will just resize the chrome within its existing element. You can also pass in a different element from which the chrome was previously attached to and it will move the chrome to the new element. Parameters| element | {HTMLElement} the element to show the chrome on. |
hideChromeremoves the chrome from the DOM. If you do this, you can’t call showChrome with no arguments. Jx. AddableA mix-in class that provides a helper function that allows an object to be added to an existing element on the page. Summary | | | adds the object to the DOM relative to another element. | | the HTML element that is inserted into the DOM for this button. | | | | triggered when the user clicks the button, processes the actionPerformed event | | This returns true if the button is enabled, false otherwise | | enable or disable the button. | | For toggle buttons, this returns true if the toggle button is currently active and false otherwise. | | Set the active state of the button | | set the image of this button to a new image URL | | sets the text of the button. | | returns the text of the button. | | sets the tooltip displayed by the button | | capture the keyboard focus on this button | | remove the keyboard focus from this button |
addTo| addTo: function( | reference, | | where | ) |
|
adds the object to the DOM relative to another element. If you use ‘top’ or ‘bottom’ then the element is added to the relative element (becomes a child node). If you use ‘before’ or ‘after’ then the element is inserted adjacent to the reference node. Parameters| reference | {Object} the DOM element or id of a DOM element to append the object relative to | | where | {String} where to append the element in relation to the reference node. Can be ‘top’, ‘bottom’, ‘before’ or ‘after’. The default is ‘bottom’. |
Returnsthe object itself, which is useful for chaining calls together {Object} domObjthe HTML element that is inserted into the DOM for this button. You may reference this object to append it to the DOM or remove it from the DOM if necessary. Jx. Buttoncreate a new button. Parameters| options | {Object} an object containing optional properties for this button as below. |
Options| id | optional. A string value to use as the ID of the button container. | | type | optional. A string value that indicates what type of button this is. The default value is Button. The type is used to form the CSS class names used for various HTML elements within the button. | | image | optional. A string value that is the url to load the image to display in this button. The default styles size this image to 16 x 16. If not provided, then the button will have no icon. | | tooltip | optional. A string value to use as the alt/title attribute of the <A> tag that wraps the button, resulting in a tooltip that appears when the user hovers the mouse over a button in most browsers. If not provided, the button will have no tooltip. | | label | {String} optional, default is no label. A string value that is used as a label on the button. | | toggle | {Boolean} default true, whether the button is a toggle button or not. | | toggleClass | {String} defaults to Toggle, this is class is added to buttons with the option toggle: true | | halign | {String} horizontal alignment of the button label, ‘center’ by default. Other values are ‘left’ and ‘right’. | | valign | {String} vertical alignment of the button label, ‘middle’ by default. Other values are ‘top’ and ‘bottom’. | | active | {Boolean} optional, default false. Controls the initial state of toggle buttons. | | enabled | {Boolean} whether the button is enabled or not. | | container | {String} the tag name of the HTML element that should be created to contain the button, by default this is ‘div’. |
clickedtriggered when the user clicks the button, processes the actionPerformed event Parameters| evt | {Event} the user click event |
isEnabledThis returns true if the button is enabled, false otherwise Returns{Boolean} whether the button is enabled or not setEnabled| setEnabled: function( | enabled | ) |
|
enable or disable the button. Parameters| enabled | {Boolean} the new enabled state of the button |
isActiveFor toggle buttons, this returns true if the toggle button is currently active and false otherwise. Returns{Boolean} the active state of a toggle button setActive| setActive: function( | active | ) |
|
Set the active state of the button Parameters| active | {Boolean} the new active state of the button |
setImageset the image of this button to a new image URL Parameters| path | {String} the new url to use as the image for this button |
setLabel| setLabel: function( | label | ) |
|
sets the text of the button. Only works if a label was supplied when the button was constructed Parameters| label | {String} the new label for the button |
getLabelreturns the text of the button. setTooltip| setTooltip: function( | tooltip | ) |
|
sets the tooltip displayed by the button Parameters| tooltip | {String} the new tooltip |
focuscapture the keyboard focus on this button blurremove the keyboard focus from this button Jx. Button. FlyoutFlyout buttons expose a panel when the user clicks the button. The panel can have arbitrary content. You must provide any necessary code to hook up elements in the panel to your application. When the panel is opened, the ‘open’ event is fired. When the panel is closed, the ‘close’ event is fired. You can register functions to handle these events in the options passed to the constructor (onOpen, onClose). The user can close the flyout panel by clicking the button again, by clicking anywhere outside the panel and other buttons, or by pressing the ‘esc’ key. Flyout buttons implement Jx.ContentLoader which provides the hooks to insert content into the Flyout element. Note that the Flyout element is not appended to the DOM until the first time it is opened, and it is removed from the DOM when closed. It is generally best to specify a width and height for your flyout content area through CSS to ensure that it works correctly across all browsers. You can do this for all flyouts using the .jxFlyout CSS selector, or you can apply specific styles to your content elements. A flyout closes other flyouts when it is opened. It is possible to embed flyout buttons inside the content area of another flyout button. In this case, opening the inner flyout will not close the outer flyout but it will close any other flyouts that are siblings. Examplevar flyout = new Jx.Button.Flyout({
label: 'flyout',
content: 'flyoutContent',
onOpen: function(flyout) {
console.log('flyout opened');
},
onClose: function(flyout) {
console.log('flyout closed');
}
});
Events| open | this event is triggered when the flyout is opened. | | close | this event is triggered when the flyout is closed. |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | the HTML element that contains the flyout content | | | | construct a new instance of a flyout button. | | Override <Jx.Button::clicked> to hide/show the content area of the flyout. | | Closes the flyout if open |
contentthe HTML element that contains the flyout content initialize| initialize: function( | options | ) |
|
construct a new instance of a flyout button. The single options argument takes a combination of options that apply to <Jx.Button>, Jx.ContentLoader, and Jx.AutoPosition. Parameters: {Object} options an options object used to initialize the button, see <Jx.Button::initialize>, Jx.ContentLoader, and Jx.AutoPosition for details. clickedOverride <Jx.Button::clicked> to hide/show the content area of the flyout. ParametershideCloses the flyout if open Jx. Button. MultiMulti buttons are used to contain multiple buttons in a drop down list where only one button is actually visible and clickable in the interface. When the user clicks the active button, it performs its normal action. The user may also click a drop-down arrow to the right of the button and access the full list of buttons. Clicking a button in the list causes that button to replace the active button in the toolbar and performs the button’s regular action. Other buttons can be added to the Multi button using the add method. This is not really a button, but rather a container for buttons. The button structure is a div containing two buttons, a normal button and a flyout button. The flyout contains a toolbar into which all the added buttons are placed. The main button content is cloned from the last button clicked (or first button added). The Multi button does not trigger any events itself, only the contained buttons trigger events. Examplevar b1 = new Jx.Button({
label: 'b1',
onClick: function(button) {
console.log('b1 clicked');
}
});
var b2 = new Jx.Button({
label: 'b2',
onClick: function(button) {
console.log('b2 clicked');
}
});
var b3 = new Jx.Button({
label: 'b3',
onClick: function(button) {
console.log('b3 clicked');
}
});
var multiButton = new Jx.Button.Multi();
multiButton.add(b1, b2, b3);
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | the currently selected button | | {Array} the buttons added to this multi button | | | | construct a new instance of Jx.Button.Multi. | | adds one or more buttons to the Multi button. | | remove a button from a multi button | | update the menu item to be the requested button. | | update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. |
{<Jx. Button>} activeButtonthe currently selected button buttons{Array} the buttons added to this multi button Jx. Button. Multiconstruct a new instance of Jx.Button.Multi. addadds one or more buttons to the Multi button. The first button added becomes the active button initialize. This function takes a variable number of arguments, each of which is expected to be an instance of <Jx.Button>. Parameters| button | {<Jx.Button>} a <Jx.Button> instance, may be repeated in the parameter list |
removeremove a button from a multi button Parameters| button | {<Jx.Button>} the button to remove |
setActiveButton| setActiveButton: function( | button | ) |
|
update the menu item to be the requested button. Parameters| button | {<Jx.Button>} a <Jx.Button> instance that was added to this multi button. |
setButton| setButton: function( | button | ) |
|
update the active button in the menu item, trigger the button’s action and hide the flyout that contains the buttons. Parameters| button | {<Jx.Button>} The button to set as the active button |
Jx. ColorPaletteA Jx.ColorPalette presents a user interface for selecting colors. Currently, the user can either enter a HEX colour value or select from a palette of web-safe colours. The user can also enter an opacity value. A Jx.ColorPalette can be embedded anywhere in a web page using its addTo method. However, a <Jx.Button> subclass is provided (Jx.Button.Color) that embeds a colour panel inside a button for easy use in toolbars. Colour changes are propogated via a change event. To be notified of changes in a Jx.ColorPalette, use the addEvent method. Example
Events| change | triggered when the color changes. | | click | the user clicked on a color swatch (emitted after a change event) |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | the HTML element representing the color panel | | | | initialize a new instance of Jx.ColorPalette | | handle the mouse moving over a colour swatch by updating the preview | | handle mouse click on a swatch by updating the color and hiding the panel. | | handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX. | | handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100). | | set the colour represented by this colour panel | | set the alpha represented by this colour panel | | update the colour panel user interface based on the current colour and alpha values |
{HTMLElement} domObjthe HTML element representing the color panel Jx. ColorPaletteinitialize a new instance of Jx.ColorPalette Parameters| options | {Object} an object containing a variable list of optional initialization parameters. |
Options| parent | an html element to add the color palette to if provided. | | color | a colour to initialize the panel with, defaults to #000000 (black) if not specified. | | alpha | an alpha value to initialize the panel with, defaults to 1 (opaque) if not specified. | | hexColors | an array of hexidecimal values to use for creating entries, the default values create a web safe palette and shouldn’t be changed unless you understand what the code is doing |
swatchOverhandle the mouse moving over a colour swatch by updating the preview Parameters| e | {Event} the mousemove event object |
swatchClickhandle mouse click on a swatch by updating the color and hiding the panel. Parameters| e | {Event} the mouseclick event object |
changedhandle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX. alphaChangedhandle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100). setColor| setColor: function( | color | ) |
|
set the colour represented by this colour panel Parameters| color | {String} the new hex color value |
setAlpha| setAlpha: function( | alpha | ) |
|
set the alpha represented by this colour panel Parameters| alpha | {Integer} the new alpha value (between 0 and 100) |
updateSelected| updateSelected: function() |
update the colour panel user interface based on the current colour and alpha values Jx. Button. ColorA Jx.ColorPalette wrapped up in a Jx.Button. The button includes a preview of the currently selected color. Clicking the button opens the color panel. A color button is essentially a Jx.Button.Flyout where the content of the flyout is a Jx.ColorPalette. Examplevar colorButton = new Jx.Button.Color({
onChange: function(button) {
console.log('color:' + button.options.color + ' alpha: ' + button.options.alpha);
}
});
Events| change | fired when the color is changed. |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | initialize a new colour button. | | show the color panel when the user clicks the button | | | | set the colour represented by this colour panel | | set the alpha represented by this colour panel | | colorChangeListener callback function when the user changes the colour in the panel (just update the preview). | | Update the swatch color for the current color |
Jx. Button. Colorinitialize a new colour button. Parameters| options | {Object} an object containing a variable list of optional initialization parameters. |
Options| color | a colour to initialize the panel with, defaults to #000000 (black) if not specified. | | alpha | an alpha value to initialize the panel with, defaults to 1 (opaque) if not specified. |
showshow the color panel when the user clicks the button setColor| setColor: function( | color | ) |
|
set the colour represented by this colour panel Parameters| color | {String} the new hex color value |
setAlpha| setAlpha: function( | alpha | ) |
|
set the alpha represented by this colour panel Parameters| alpha | {Integer} the new alpha value (between 0 and 100) |
changedcolorChangeListener callback function when the user changes the colour in the panel (just update the preview). updateSwatchUpdate the swatch color for the current color Jx. ButtonSetA ButtonSet manages a set of <Jx.Button> instances by ensuring that only one of the buttons is active. All the buttons need to have been created with the toggle option set to true for this to work. Examplevar toolbar = new Jx.Toolbar('bar');
var buttonSet = new Jx.ButtonSet();
var tab1 = new Jx.Button({label: 'b1', toggle:true, contentID: 'content1'});
var tab2 = new Jx.Button({label: 'b2', toggle:true, contentID: 'content2'});
var tab3 = new Jx.Button({label: 'b3', toggle:true, contentID: 'content3'});
var tab4 = new Jx.Button({label: 'b4', toggle:true, contentURL: 'test_content.html'});
buttonSet.add(b1,b2,b3,b4);
Events| change | the current button has changed |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {Array} array of buttons that are managed by this button set | | | | | | Add one or more <Jx.Button>s to the ButtonSet. | | Remove a button from this Button. | | Set the active button to the one passed to this method | | Handle selection changing on the buttons themselves and activate the appropriate button in response. |
buttons{Array} array of buttons that are managed by this button set Jx. ButtonSetCreate a new instance of Jx.ButtonSet Parameters| options | an options object, only event handlers are supported as options at this time. |
addAdd one or more <Jx.Button>s to the ButtonSet. Parameters| button | {<Jx.Button>} an instance of <Jx.Button> to add to the button set. More than one button can be added by passing extra parameters to this method. |
remove| remove : function( | button | ) |
|
Remove a button from this Button. Parameters| button | {<Jx.Button>} the button to remove. |
setActiveButton| setActiveButton: function( | button | ) |
|
Set the active button to the one passed to this method Parameters| button | {<Jx.Button>} the button to make active. |
selectionChangedHandle selection changing on the buttons themselves and activate the appropriate button in response. Parameters| button | {<Jx.Button>} the button to make active. |
Jx.GridA tabular control that has fixed scrolling headers on the rows and columns like a spreadsheet. Jx.Grid is a tabular control with convenient controls for resizing columns, sorting, and inline editing. It is created inside another element, typically a div. If the div is resizable (for instance it fills the page or there is a user control allowing it to be resized), you must call the resize() method of the grid to let it know that its container has been resized. When creating a new Jx.Grid, you can specify a number of options for the grid that control its appearance and functionality. Jx.Grid renders data that comes from an external source. This external source, called the model, must implement the following interface. Example
Implements| Options | MooTools Class.Extras |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | construct a new instance of Jx.Grid within the domObj | | handle the grid scrolling by updating the position of the headers | | resize the grid to fit inside its container. | | set the model for the grid to display. | | destroy the contents of the grid safely | | create the grid for the current model | | | | called through the grid listener interface when data has changed in the underlying model | | apply the jxGridRowHeaderPrelight style to the header cell of a row. | | apply the jxGridColumnHeaderPrelight style to the header cell of a column. | | apply the jxGridRowPrelight style to row. | | apply the jxGridColumnPrelight style to a column. | | apply the jxGridCellPrelight style to a cell. | | Select a cell and apply the jxGridCellSelected style to it. | | Apply the jxGridRowHeaderSelected style to the row header cell of a selected row. | | Select a row and apply the jxGridRowSelected style to it. | | Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column. | | | | handle the mouse moving over the main grid. | | handle the mouse moving over the row header cells. | | handle the mouse moving over the column header cells. | | handle the user clicking on the grid. | | handle the user clicking on the row header. | | handle the user clicking on the column header. | | retrieve the row and column indexes from an event click. | | This function returns the number of columns of data in the model as an integer value. | | This function returns an HTML string to be placed in the column header for the given column index. | | This function returns an integer which is the height of the column header row in pixels. | | This function returns an integer which is the width of the given column in pixels. | | This function returns an HTML string to be placed in the row header for the given row index | | This function returns an integer which is the width of the row header column in pixels. | | This function returns an integer which is the height of the given row in pixels. | | This function returns the number of rows of data in the model as an integer value. | | This function returns an HTML string which is the text to place in the cell at the given row and column. | | This function returns a boolean value to indicate if a given cell is editable by the user. | | This function is called with a column index and width in pixels when a column is resized. | | This function is called with the row and column of a cell and a new value for the cell. | | This function is called by the grid to indicate that the user has selected a row by clicking on the row header. | | This function is called by the grid to indicate that the user has selected a column by clicking on the column header. | | This function is called by the grid to indicate that the user has selected a cell by clicking on the cell in the grid. |
Jx.Gridconstruct a new instance of Jx.Grid within the domObj Parameters| options | you can specify some options as attributes of a generic object. |
Options| parent | {HTMLElement} the HTML element to create the grid inside. The grid will resize to fill the domObj. | | alternateRowColors | defaults to false. If set to true, then alternating CSS classes are used for rows | | rowHeaders | defaults to false. If set to true, then a column of row header cells are displayed. | | columnHeaders | defaults to false. If set to true, then a column of row header cells are displayed. | | rowSelection | defaults to false. If set to true, allow the user to select rows. | | columnSelection | defaults to false. If set to true, allow the user to select columns. | | cellSelection | defaults to false. If set to true, allow the user to select cells. | | cellPrelight | defaults to false. If set to true, the cell under the mouse is highlighted as the mouse moves. | | rowPrelight | defaults to false. If set to true, the row under the mouse is highlighted as the mouse moves. | | columnPrelight | defaults to false. If set to true, the column under the mouse is highlighted as the mouse moves. |
onScrollhandle the grid scrolling by updating the position of the headers resizeresize the grid to fit inside its container. This involves knowing something about the model it is displaying (the height of the column header and the width of the row header) so nothing happens if no model is set setModel| setModel: function( | model | ) |
|
set the model for the grid to display. If a model is attached to the grid it is removed and the new model is displayed. Parameters| model | {Object} the model to use for this grid |
destroyGriddestroy the contents of the grid safely createGridcreate the grid for the current model setRowHeaderHeight| setRowHeaderHeight: function( | row, | | height | ) |
|
set the height of a row. This is used internally to adjust the height of the row header when cell contents wrap. A limitation of the table structure is that overflow: hidden on a td will work horizontally but not vertically Parameters| row | {Integer} the row to set the height for | | height | {Integer} the height to set the row (in pixels) |
gridChanged| gridChanged: function( | model, | | row, | | col, | | value | ) |
|
called through the grid listener interface when data has changed in the underlying model Parameters| model | {Object} the model that changed | | row | {Integer} the row that changed | | col | {Integer} the column that changed | | value | {Mixed} the new value |
prelightRowHeader| prelightRowHeader: function( | row | ) |
|
apply the jxGridRowHeaderPrelight style to the header cell of a row. This removes the style from the previously pre-lit row header. Parameters| row | {Integer} the row to pre-light the header cell of |
prelightColumnHeader| prelightColumnHeader: function( | col | ) |
|
apply the jxGridColumnHeaderPrelight style to the header cell of a column. This removes the style from the previously pre-lit column header. Parameters| col | {Integer} the column to pre-light the header cell of |
prelightRow| prelightRow: function( | row | ) |
|
apply the jxGridRowPrelight style to row. This removes the style from the previously pre-lit row. Parameters| row | {Integer} the row to pre-light |
prelightColumn| prelightColumn: function( | col | ) |
|
apply the jxGridColumnPrelight style to a column. This removes the style from the previously pre-lit column. Parameters| col | {Integer} the column to pre-light |
TODO: Jx.Grid.prelightColumn Not Yet Implemented. prelightCell| prelightCell: function( | row, | | col | ) |
|
apply the jxGridCellPrelight style to a cell. This removes the style from the previously pre-lit cell. Parameters| row | {Integer} the row of the cell to pre-light | | col | {Integer} the column of the cell to pre-light |
selectCell| selectCell: function( | row, | | col | ) |
|
Select a cell and apply the jxGridCellSelected style to it. This deselects a previously selected cell. If the model supports cell selection, it should implement a cellSelected function to receive notification of the selection. Parameters| row | {Integer} the row of the cell to select | | col | {Integer} the column of the cell to select |
selectRowHeader| selectRowHeader: function( | row, | | selected | ) |
|
Apply the jxGridRowHeaderSelected style to the row header cell of a selected row. Parameters| row | {Integer} the row header to select | | selected | {Boolean} the new state of the row header |
selectRow| selectRow: function( | row, | | selected | ) |
|
Select a row and apply the jxGridRowSelected style to it. If the model supports row selection, it should implement a rowSelected function to receive notification of the selection. Parameters| row | {Integer} the row to select | | selected | {Boolean} the new state of the row |
selectColumnHeader| selectColumnHeader: function( | col, | | selected | ) |
|
Apply the jxGridColumnHeaderSelected style to the column header cell of a selected column. Parameters| col | {Integer} the column header to select | | selected | {Boolean} the new state of the column header |
selectColumn| selectColumn: function( | col, | | selected | ) |
|
Select a column. This deselects a previously selected column. Parameters| col | {Integer} the column to select | | selected | {Boolean} the new state of the column |
onMouseMoveGrid| onMouseMoveGrid: function( | e | ) |
|
handle the mouse moving over the main grid. This pre-lights the cell, and subsquently the row and column (and headers). Parameters| e | {Event} the browser event object |
onMouseMoveRowHeader| onMouseMoveRowHeader: function( | e | ) |
|
handle the mouse moving over the row header cells. This pre-lights the row and subsequently the row header. Parameters| e | {Event} the browser event object |
onMouseMoveColumnHeader| onMouseMoveColumnHeader: function( | e | ) |
|
handle the mouse moving over the column header cells. This pre-lights the column and subsequently the column header. Parameters| e | {Event} the browser event object |
onClickGridhandle the user clicking on the grid. This triggers an event to the model (if a cellSelected function is provided). The following is an example of a function in the model that selects a row when the cellSelected function is called and deselects any rows that are currently selected. cellSelected: function(grid, row,col) {
if (this.selectedRow != null) {
grid.selectRow(this.selectedRow, false);
}
this.selectedRow = row;
grid.selectRow(row, true);
}
Parameters:
e - {Event} the browser event object
onClickRowHeader| onClickRowHeader: function( | e | ) |
|
handle the user clicking on the row header. This triggers an event to the model (if a rowSelected function is provided) which can then select the row if desired. The following is an example of a function in the model that selects a row when the rowSelected function is called and deselects any rows that are currently selected. More complex code could be written to allow the user to select multiple rows. rowSelected: function(grid, row) {
if (this.selectedRow != null) {
grid.selectRow(this.selectedRow, false);
}
this.selectedRow = row;
grid.selectRow(row, true);
}
Parameters| e | {Event} the browser event object |
onClickColumnHeader| onClickColumnHeader: function( | e | ) |
|
handle the user clicking on the column header. This triggers column selection and column (and header) styling changes and an event to the model (if a columnSelected function is provided) The following is an example of a function in the model that selects a column when the columnSelected function is called and deselects any columns that are currently selected. More complex code could be written to allow the user to select multiple columns. colSelected: function(grid, col) {
if (this.selectedColumn != null) {
grid.selectColumn(this.selectedColumn, false);
}
this.selectedColumn = col;
grid.selectColumn(col, true);
}
Parameters| e | {Event} the browser event object |
getRowColumnFromEvent| getRowColumnFromEvent: function( | e | ) |
|
retrieve the row and column indexes from an event click. This function is used by the grid, row header and column header to safely get these numbers. If the event isn’t valid (i.e. it wasn’t on a TD or TH) then the returned values will be -1, -1 Parameters| e | {Event} the browser event object |
@return Object an object with two properties, row and column, that contain the row and column that was clicked getColumnCountThis function returns the number of columns of data in the model as an integer value. getColumnHeaderHTMLThis function returns an HTML string to be placed in the column header for the given column index. getColumnHeaderHeightThis function returns an integer which is the height of the column header row in pixels. getColumnWidthThis function returns an integer which is the width of the given column in pixels. getRowHeaderHTMLThis function returns an HTML string to be placed in the row header for the given row index getRowHeaderWidthThis function returns an integer which is the width of the row header column in pixels. getRowHeightThis function returns an integer which is the height of the given row in pixels. getRowCountThis function returns the number of rows of data in the model as an integer value. getValueAtThis function returns an HTML string which is the text to place in the cell at the given row and column. isCellEditableThis function returns a boolean value to indicate if a given cell is editable by the user. setColumnWidthThis function is called with a column index and width in pixels when a column is resized. This function is only required if the grid allows resizeable columns. setValueAtThis function is called with the row and column of a cell and a new value for the cell. It is mandatory to provide this function if any of the cells in the model are editable. rowSelectedThis function is called by the grid to indicate that the user has selected a row by clicking on the row header. columnSelectedThis function is called by the grid to indicate that the user has selected a column by clicking on the column header. cellSelectedThis function is called by the grid to indicate that the user has selected a cell by clicking on the cell in the grid. Jx. LayoutJx.Layout is used to provide more flexible layout options for applications Jx.Layout wraps an existing DOM element (typically a div) and provides extra functionality for sizing that element within its parent and sizing elements contained within it that have a ‘resize’ function attached to them. To create a Jx.Layout, pass the element or id plus an options object to the constructor. Examplevar myContainer = new Jx.Layout('myDiv', options);
Events| sizeChange | fired when the size of the container changes |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | Create a new instance of Jx.Layout. | | when the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized | | resize the element controlled by this Jx.Layout object. |
Jx. LayoutCreate a new instance of Jx.Layout. Parameters| domObj | {HTMLElement} element or id to apply the layout to | | options | {Object} options can be passed to the Jx.Layout as an object with some, all, or none of the options below. |
Options| propagate | boolean, controls propogation of resize to child nodes. True by default. If set to false, changes in size will not be propogated to child nodes. | | position | how to position the element, either ‘absolute’ or ‘relative’. The default (if not passed) is ‘absolute’. When using ‘absolute’ positioning, both the width and height are controlled by Jx.Layout. If ‘relative’ positioning is used then only the width is controlled, allowing the height to be controlled by its content. | | left | the distance (in pixels) to maintain the left edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the left edge can be any distance from its parent based on other parameters. | | right | the distance (in pixels) to maintain the right edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the right edge can be any distance from its parent based on other parameters. | | top | the distance (in pixels) to maintain the top edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the top edge can be any distance from its parent based on other parameters. | | bottom | the distance (in pixels) to maintain the bottom edge of the element from its parent element. The default value is 0. If this is set to ‘null’, then the bottom edge can be any distance from its parent based on other parameters. | | width | the width (in pixels) of the element. The default value is null. If this is set to ‘null’, then the width can be any value based on other parameters. | | height | the height (in pixels) of the element. The default value is null. If this is set to ‘null’, then the height can be any value based on other parameters. | | minWidth | the minimum width that the element can be sized to. The default value is 0. | | minHeight | the minimum height that the element can be sized to. The default value is 0. | | maxWidth | the maximum width that the element can be sized to. The default value is -1, which means no maximum. | | maxHeight | the maximum height that the element can be sized to. The default value is -1, which means no maximum. |
windowResizewhen the window is resized, any Jx.Layout controlled elements that are direct children of the BODY element are resized resize| resize: function( | options | ) |
|
resize the element controlled by this Jx.Layout object. ParametersJx.MenuA main menu as opposed to a sub menu that lives inside the menu. TODO: Jx.Menu revisit this to see if Jx.Menu and Jx.SubMenu can be merged into a single implementation. Example
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} The HTML element containing the menu. | | {<Jx.Button>} The button that represents this menu in a toolbar and opens the menu. | | {HTMLElement} the HTML element that contains the menu items within the menu. | | {Array} the items in this menu | | | | Create a new instance of Jx.Menu. | | Add menu items to the sub menu. | | Deactivate the menu by hiding it. | | Handle the user moving the mouse over the button for this menu by showing this menu and hiding the other menu. | | determine if an event happened inside this menu or a sub menu of this menu. | | | | | | Set the sub menu that is currently open |
domObj{HTMLElement} The HTML element containing the menu. button{<Jx.Button>} The button that represents this menu in a toolbar and opens the menu. subDomObj{HTMLElement} the HTML element that contains the menu items within the menu. items{Array} the items in this menu Jx.MenuCreate a new instance of Jx.Menu. Parameters| options | {Object} an options object passed directly to the <Jx.Button> when creating the button that triggers this menu. If options is not passed, then no button is created. |
addAdd menu items to the sub menu. Parameters| item | {<Jx.MenuItem>} the menu item to add. Multiple menu items can be added by passing multiple arguments to this function. |
deactivateDeactivate the menu by hiding it. onMouseOverHandle the user moving the mouse over the button for this menu by showing this menu and hiding the other menu. ParameterseventInMenudetermine if an event happened inside this menu or a sub menu of this menu. ParametersReturns{Boolean} true if the event happened in the menu or a sub menu of this menu, false otherwise setVisibleItem| setVisibleItem: function( | obj | ) |
|
Set the sub menu that is currently open Parametersobj- {<Jx.SubMenu>} the sub menu that just became visible Jx. Menu.ItemA menu item is a single entry in a menu. It is typically composed of a label and an optional icon. Selecting the menu item emits an event. Jx.Menu.Item is represented by a <Jx.Button> with type MenuItem and the associated CSS changes noted in <Jx.Button>. The container of a MenuItem is an ‘li’ element. Example
Events| click | fired when the menu item is clicked. |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item. | | | | Create a new instance of Jx.Menu.Item | | Set the owner of this menu item | | | | | | Handle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking | | handle the mouse moving over the menu item |
owner{<Jx.SubMenu> or Jx.Menu} the menu that contains the menu item. Jx. Menu.ItemCreate a new instance of Jx.Menu.Item Parameters| options | {Object} an object containing options for <Jx.Button::initialize> |
setOwnerSet the owner of this menu item Parameters| obj | {Object} the new owner |
clickedHandle the user clicking on the menu item, overriding the <Jx.Button::clicked> method to facilitate menu tracking Parameters| obj | {Object} an object containing an event property that was the user event. |
onmouseoverhandle the mouse moving over the menu item Parameters| e | {Event} the mousemove event |
Jx. Menu. SeparatorA convenience class to create a visual separator in a menu. Example
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} the HTML element that the separator is contained within | | | | | | Create a new instance of a menu separator | | Set the ownder of this menu item | | | | |
domObj{HTMLElement} the HTML element that the separator is contained within Jx. Menu. SeparatorCreate a new instance of a menu separator setOwnerSet the ownder of this menu item Parameters| obj | {Object} the new owner |
Jx. Menu. SubMenuA sub menu contains menu items within a main menu or another sub menu. The structure of a SubMenu is the same as a Jx.Menu.Item with an additional unordered list element appended to the container. Example
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} the HTML container for the sub menu. | | | | {<Jx.MenuItem>} the visible item within the menu | | {Array} the menu items that are in this sub menu. | | | | Create a new instance of Jx.SubMenu | | Set the owner of this sub menu | | | | | | Add menu items to the sub menu. | | Insert a menu item before another menu item. | | Remove a single menu item from the menu. | | | | Indicate if this sub menu is active | | Set the active state of the Jx.Menu that contains this sub menu | | Set a sub menu of this menu to be visible and hide the previously visible one. |
subDomObj{HTMLElement} the HTML container for the sub menu. visibleItem{<Jx.MenuItem>} the visible item within the menu items{Array} the menu items that are in this sub menu. Jx. SubMenuCreate a new instance of Jx.SubMenu Parameters| options | see <Jx.MenuItem::Jx.MenuItem> |
setOwnerSet the owner of this sub menu ParametersaddAdd menu items to the sub menu. Parameters| item | {<Jx.MenuItem>} the menu item to add. Multiple menu items can be added by passing multiple arguments to this function. |
insertBefore| insertBefore: function( | newItem, | | targetItem | ) |
|
Insert a menu item before another menu item. Parameters| newItem | {<Jx.MenuItem>} the menu item to insert | | targetItem | {<Jx.MenuItem>} the menu item to insert before |
removeRemove a single menu item from the menu. Parameters| item | {<Jx.MenuItem} the menu item to remove. |
deactivateDeactivate the sub menu Parameters| e | {Event} the event that triggered the menu being deactivated. |
isActiveIndicate if this sub menu is active Returns{Boolean} true if the Jx.Menu that ultimately contains this sub menu is active, false otherwise. setActive| setActive: function( | isActive | ) |
|
Set the active state of the Jx.Menu that contains this sub menu Parameters| isActive | {Boolean} the new active state |
setVisibleItem| setVisibleItem: function( | obj | ) |
|
Set a sub menu of this menu to be visible and hide the previously visible one. Parameters| obj | {Jx.SubMenu} the sub menu that should be visible |
Jx. Menu. ContextA Jx.Menu that has no button but can be opened at a specific browser location to implement context menus (for instance). Example
Events| TODO | add open/close events? |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | create a new context menu | | Show the context menu at the location of the mouse click |
Jx. ContextMenucreate a new context menu Parameters| id | {HTMLElement} element or id to make this the context menu for. The menu hooks the oncontextmenu event of the element and shows itself at the mouse position where the right-click happened. |
showShow the context menu at the location of the mouse click ParametersJx. PanelA panel is a fundamental container object that has a content area and optional toolbars around the content area. It also has a title bar area that contains an optional label and some user controls as determined by the options passed to the constructor. Example
Events| close | fired when the panel is closed | | collapse | fired when the panel is collapsed | | expand | fired when the panel is opened |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area. | | Set the label in the title bar of this panel | | Get the label of the title bar of this panel | | | | | | set the content of this panel to some HTML | | Set the content of this panel to come from some URL. | | When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns. | | Set the panel as busy or not busy, which displays a loading image in the title bar. | | sets or toggles the collapsed state of the panel. | | Closes the panel (completely hiding it). |
layoutContent| layoutContent: function() |
the sizeChange event of the Jx.Layout that manages the outer container is intercepted and passed through this method to handle resizing of the panel contents because we need to do some calculations if the panel is collapsed and if there are toolbars to put around the content area. setLabelSet the label in the title bar of this panel ParametersgetLabelGet the label of the title bar of this panel Returns{String} the label setContent| setContent : function ( | html | ) |
|
set the content of this panel to some HTML Parameters| html | {String} the new HTML to go in the panel |
setContentURL| setContentURL : function ( | url | ) |
|
Set the content of this panel to come from some URL. Parameters| url | {String} URL to some HTML content for this panel |
panelContentLoaded| panelContentLoaded: function( | r | ) |
|
When the content of the panel is loaded from a remote URL, this method is called when the ajax request returns. Parameters| r | {XmlHttpRequest} the XmlHttpRequest object |
setBusy| setBusy : function( | isBusy | ) |
|
Set the panel as busy or not busy, which displays a loading image in the title bar. Parameters| isBusy | {Boolean} the busy state |
toggleCollapse| toggleCollapse: function( | state | ) |
|
sets or toggles the collapsed state of the panel. If a new state is passed, it is used, otherwise the current state is toggled. Parameters| state | optional, if passed then the state is used, otherwise the state is toggled. |
closeCloses the panel (completely hiding it). Jx. DialogA Jx.Dialog implements a floating dialog. Dialogs represent a useful way to present users with certain information or application controls. Jx.Dialog is designed to provide the same types of features as traditional operating system dialog boxes, including: - dialogs may be modal (user must dismiss the dialog to continue) or non-modal
- dialogs are movable (user can drag the title bar to move the dialog around)
- dialogs may be a fixed size or allow user resizing.
Jx.Dialog uses Jx.ContentLoader to load content into the content area of the dialog. Refer to the Jx.ContentLoader documentation for details on content options. Examplevar dialog = new Jx.Dialog();
Events| open | triggered when the dialog is opened | | close | triggered when the dialog is closed | | change | triggered when the value of an input in the dialog is changed | | resize | triggered when the dialog is resized |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | modal dialogs prevent interaction with the rest of the application while they are open, this element is displayed just under the dialog to prevent the user from clicking anything. | | | | Construct a new instance of Jx.Dialog | | overload panel’s sizeChanged method | | sets or toggles the collapsed state of the panel. | | set the text of the dialog title. | | show the dialog, external code should use the Jx.Dialog::open method to make the dialog visible. | | hide the dialog, external code should use the Jx.Dialog::close method to hide the dialog. | | | | close the dialog and trigger the onClose callback function if necessary | | handle the dialog content being loaded. |
{HTMLElement} blanketmodal dialogs prevent interaction with the rest of the application while they are open, this element is displayed just under the dialog to prevent the user from clicking anything. Jx. DialogConstruct a new instance of Jx.Dialog Parameters| options | {Object} an object containing options for the dialog. |
Options| modal | (optional) {Boolean} controls whether the dialog will be modal or not. The default is to create modal dialogs. | | horizontal | (optional) {String} the horizontal rule for positioning the dialog. The default is ‘center center’ meaning the dialog will be centered on the page. See {Jx.AutoPosition} for details. | | vertical | (optional) {String} the vertical rule for positioning the dialog. The default is ‘center center’ meaning the dialog will be centered on the page. See {Jx.AutoPosition} for details. | | width | (optional) {Integer} the initial width in pixels of the dialog. The default value is 250 if not specified. | | height | (optional) {Integer} the initial height in pixels of the dialog. The default value is 250 if not specified. | | label | (optional) {String} the title of the dialog box. “New Dialog” is the default value. | | content | (optional) {Mixed} passed to Jx.ContentLoader for loading dialog content. | | contentURL | (optional) {String} passed to Jx.ContentLoader for loading dialog content. | | id | (optional) {String} an HTML ID to assign to the dialog, primarily used for applying CSS styles to specific dialogs | | parent | (optional) {HTMLElement} a reference to an HTML element that the dialog is to be contained by. The default value is for the dialog to be contained by the body element. | | resize | (optional) {Boolean} determines whether the dialog is resizeable by the user or not. Default is false. | | move | (optional) {Boolean} determines whether the dialog is moveable by the user or not. Default is true. |
sizeChangedoverload panel’s sizeChanged method toggleCollapse| toggleCollapse: function( | state | ) |
|
sets or toggles the collapsed state of the panel. If a new state is passed, it is used, otherwise the current state is toggled. Parameters| state | optional, if passed then the state is used, otherwise the state is toggled. |
setTitle| setTitle: function( | title | ) |
|
set the text of the dialog title. Parameters| title | {String} the new title |
showshow the dialog, external code should use the Jx.Dialog::open method to make the dialog visible. hidehide the dialog, external code should use the Jx.Dialog::close method to hide the dialog. openopen the dialog. This may be delayed depending on the asynchronous loading of dialog content. The onOpen callback function is called when the dialog actually opens closeclose the dialog and trigger the onClose callback function if necessary onContentLoaded| onContentLoaded : function() |
handle the dialog content being loaded. This triggers processing of inputs and the onContentLoaded callback function (if necessary). Also, if the dialog was previously requested to be opened, this will actually open it. Jx. PanelSetExampleA panel set manages a set of panels within a DOM element. The PanelSet fills its container by resizing the panels in the set to fill the width and then distributing the height of the container across all the panels. Panels can be resized by dragging their respective title bars to make them taller or shorter. The maximize button on the panel title will cause all other panels to be closed and the target panel to be expanded to fill the remaining space. In this respect, PanelSet works like a traditional Accordion control. When creating panels for use within a panel set, it is important to use the proper options. You must override the collapse option and set it to false and add a maximize option set to true. You must also not include options for menu and close. var p1 = new Jx.Panel({collapse: false, maximize: true, content: 'content1'});
var p2 = new Jx.Panel({collapse: false, maximize: true, content: 'content2'});
var p3 = new Jx.Panel({collapse: false, maximize: true, content: 'content3'});
var panelSet = new Jx.PanelSet('panels', [p1,p2,p3]);
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {Array} the panels being managed by the set | | {Integer} the height of the container, cached for speed | | {Boolean} true until the panel set has first been resized | | | | Create a new instance of Jx.PanelSet. | | Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values) |
panels{Array} the panels being managed by the set height{Integer} the height of the container, cached for speed firstLayout{Boolean} true until the panel set has first been resized Jx. PanelSetCreate a new instance of Jx.PanelSet. Parameters| domObj | {HTMLElement} the HTML element that will contain the panels | | panels | {Array} the panels to go into the PanelSet |
TODO: Jx.PanelSet.initialize Remove the panels parameter in favour of an add method. maximizePanel| maximizePanel: function( | panel | ) |
|
Maximize a panel, taking up all available space (taking into consideration any minimum or maximum values) Jx. Button. ComboA drop down list of selectable items. Items can be either a string, an image or both. Examplenew Jx.Button.Combo({
label: 'Choose a symbol',
items: [
{label: 'Star', image: 'images/swatches.png', imageClass: 'comboStar'},
{label: 'Square', image: 'images/swatches.png', imageClass: 'comboSquare'},
{label: 'Triangle', image: 'images/swatches.png', imageClass: 'comboTriangle'},
{label: 'Circle', image: 'images/swatches.png', imageClass: 'comboCircle'},
{label: 'Plus', image: 'images/swatches.png', imageClass: 'comboPlus'},
{label: 'Cross', image: 'images/swatches.png', imageClass: 'comboCross'}
],
onChange: function(combo) { alert('you selected ' + combo.getValue()) }
})
Events| change | triggered when the user selects a new item from the list |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {Object} current selection in the list | | | | create a new instance of Jx.Combo | | enable or disable the combo button. | | invoked when the current value is changed | | Handle the user pressing a key by looking for an ENTER key to set the value. | | add a new item to the pick list | | Remove the item at the given index | | set the value of the Combo | | |
currentSelection{Object} current selection in the list Jx. Combocreate a new instance of Jx.Combo Options| editable | {Boolean} defaults to false. If true, then the selected item is editable. |
setEnabled| setEnabled: function( | enabled | ) |
|
enable or disable the combo button. Parameters| enabled | {Boolean} the new enabled state of the button |
valueChangedinvoked when the current value is changed onKeyPressHandle the user pressing a key by looking for an ENTER key to set the value. Parameters| e | {Event} the keypress event |
addadd a new item to the pick list Parameters| options | {Object} object with properties suitable to be passed to a {Jx.Menu.Item} object. More than one options object can be passed, comma separated or in an array. |
removeRemove the item at the given index Parameters| idx | {Integer} the item to remove. |
setValue| setValue: function( | value | ) |
|
set the value of the Combo Parameters| value | {Object} the new value. May be a string, a text node, or another DOM element. |
getValueReturn the current value Returns{Object} returns the currently selected item Jx. Splittera Jx.Splitter creates two or more containers within a parent container and provides user control over the size of the containers. The split can be made horizontally or vertically. A horizontal split creates containers that divide the space horizontally with vertical bars between the containers. A vertical split divides the space vertically and creates horizontal bars between the containers. Example
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} the element being split | | {Array} an array of elements that are displayed in each of the split areas | | {Array} an array of the bars between each of the elements used to resize the split areas. | | {Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed. | | | | Create a new instance of Jx.Splitter | | Prepare a new, empty element to go into a split area. | | Prepare a new, empty bar to go into between split areas. | | Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area. | | In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar. | | In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar. | | handle the size of the container being changed. | | Resize a horizontally layed-out container | | Resize a vertically layed out container. |
domObj{HTMLElement} the element being split elements{Array} an array of elements that are displayed in each of the split areas bars{Array} an array of the bars between each of the elements used to resize the split areas. firstUpdate{Boolean} track the first resize event so that unexposed Jx things can be forced to calculate their size the first time they are exposed. Jx. SplitterCreate a new instance of Jx.Splitter Parameters| domObj | {HTMLElement} the element or id of the element to split | | options | {Object} optional arguments specified as properties of this object are as below. |
Options| useChildren | {Boolean} if set to true, then the children of the element to be split are used as the elements. The default value is false. If this is set, then the elements and splitInto options are ignored. | | elements | {Array} an array of elements to put into the split areas. If splitInto is not set, then it is calculated from the length of this array. | | splitInto | {Integer} the number of elements to split the domObj into. If not set, then the length of the elements option is used, or 2 if elements is not specified. If splitInto is specified and elements is specified, then splitInto is used. If there are more elements than splitInto specifies, then the extras are ignored. If there are less elements than splitInto specifies, then extras are created. | | containerOptions | {Array} an array of objects that provide options for the Jx.Layout constraints on each element. | | barOptions | {Array} an array of object that provide options for the bars, this array should be one less than the number of elements in the splitter. The barOptions objects can contain a snap property indicating that a default snap object should be created in the bar and the value of ‘before’ or ‘after’ indicates which element it snaps open/shut. | | layout | {String} either ‘horizontal’ or ‘vertical’, indicating the direction in which the domObj is to be split. | | snaps | {Array} an array of objects which can be used to snap elements open or closed. |
prepareElement| prepareElement: function() |
Prepare a new, empty element to go into a split area. Returns{HTMLElement} an HTMLElement that goes into a split area. prepareBarPrepare a new, empty bar to go into between split areas. Returns{HTMLElement} an HTMLElement that becomes a bar. establishConstraints| establishConstraints: function() |
Setup the initial set of constraints that set the behaviour of the bars between the elements in the split area. dragHorizontal| dragHorizontal: function( | obj | ) |
|
In a horizontally split container, handle a bar being dragged left or right by resizing the elements on either side of the bar. Parameters| obj | {HTMLElement} the bar that was dragged |
dragVertical| dragVertical: function( | obj | ) |
|
In a vertically split container, handle a bar being dragged up or down by resizing the elements on either side of the bar. Parameters| obj | {HTMLElement} the bar that was dragged |
sizeChangedhandle the size of the container being changed. horizontalResize| horizontalResize: function() |
Resize a horizontally layed-out container verticalResize| verticalResize: function() |
Resize a vertically layed out container. Jx. Splitter.SnapA helper class to create an element that can snap a split panel open or closed. Example
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} the DOM element of the snap (the thing that gets clicked). | | {HTMLElement} An element of the Jx.Splitter that gets controlled by this snap | | { Jx.Splitter} the splitter that this snap is associated with. | | {String} track the layout of the splitter for convenience. | | | | Create a new Jx.Splitter.Snap | | Snap the element open or closed. | | Handle the size of the element changing to see if the toggle state has changed. |
snap{HTMLElement} the DOM element of the snap (the thing that gets clicked). element{HTMLElement} An element of the Jx.Splitter that gets controlled by this snap splitter{Jx.Splitter} the splitter that this snap is associated with. layout{String} track the layout of the splitter for convenience. Jx. Splitter.SnapCreate a new Jx.Splitter.Snap Parameters| snap | {HTMLElement} the clickable thing that snaps the element open and closed | | element | {HTMLElement} the element that gets controlled by the snap | | splitter | {Jx.Splitter} the splitter that this all happens inside of. |
toggleElement| toggleElement: function() |
Snap the element open or closed. sizeChangedHandle the size of the element changing to see if the toggle state has changed. Jx. TabSetA TabSet manages a set of Jx.Button.Tab content areas by ensuring that only one of the content areas is visible (i.e. the active tab). TabSet does not manage the actual tabs. The instances of Jx.Button.Tab that are to be managed as a set have to be added to both a TabSet and a Jx.Toolbar. The content areas of the Jx.Button.Tabs are sized to fit the content area that the TabSet is managing. Examplevar tabBar = new Jx.Toolbar('tabBar');
var tabSet = new Jx.TabSet('tabArea');
var tab1 = new Jx.Button.Tab('tab 1', {contentID: 'content1'});
var tab2 = new Jx.Button.Tab('tab 2', {contentID: 'content2'});
var tab3 = new Jx.Button.Tab('tab 3', {contentID: 'content3'});
var tab4 = new Jx.Button.Tab('tab 4', {contentURL: 'test_content.html'});
tabSet.add(t1, t2, t3, t4);
tabBar.add(t1, t2, t3, t4);
Events| tabChange | the current tab has changed |
Implements| Events | MooTools Class.Extras | | Options | MooTools Class.Extras |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {Array} array of tabs that are managed by this tab set | | {HTMLElement} The HTML element that represents this tab set in the DOM. | | | | Create a new instance of Jx.TabSet within a specific element of the DOM. | | Resize the tab set content area and propogate the changes to each of the tabs managed by the tab set. | | | | Remove a tab from this TabSet. | | Set the active tab to the one passed to this method |
tabs{Array} array of tabs that are managed by this tab set domObj{HTMLElement} The HTML element that represents this tab set in the DOM. The content areas of each tab are sized to fill the domObj. Jx. TabSetCreate a new instance of Jx.TabSet within a specific element of the DOM. Parameters| domObj | {HTMLElement} an element or id of an element to put the content of the tabs into. | | options | an options object, only event handlers are supported as options at this time. |
resizeTabBoxResize the tab set content area and propogate the changes to each of the tabs managed by the tab set. addAdd one or more Jx.Button.Tabs to the TabSet. Parameters| tab | {<Jx.Tab>} an instance of <Jx.Tab> to add to the tab set. More than one tab can be added by passing extra parameters to this method. |
removeRemove a tab from this TabSet. Note that it is the caller’s responsibility to remove the tab from the Jx.Toolbar. Parameters| tab | {<Jx.Tab>} the tab to remove. |
setActiveTab| setActiveTab: function( | tab | ) |
|
Set the active tab to the one passed to this method ParametersJx. TabBoxA convenience class to handle the common case of a single toolbar directly attached to the content area of the tabs. It manages both a Jx.Toolbar and a Jx.TabSet so that you don’t have to. If you are using a TabBox, then tabs only have to be added to the TabBox rather than to both a Jx.TabSet and a Jx.Toolbar. Examplevar tabBox = new Jx.TabBox('subTabArea', 'top');
var tab1 = new Jx.Button.Tab('Tab 1', {contentID: 'content4'});
var tab2 = new Jx.Button.Tab('Tab 2', {contentID: 'content5'});
tabBox.add(tab1, tab2);
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | | | | | | | Create a new instance of a TabBox. | | Add one or more <Jx.Tab>s to the TabBox. | | Remove a tab from the TabSet. |
tabSet{Jx.TabSet} the tab set for this tab box. Jx. TabBoxCreate a new instance of a TabBox. addAdd one or more <Jx.Tab>s to the TabBox. Parameters| tab | {<Jx.Tab>} an instance of <Jx.Tab> to add to the tab box. More than one tab can be added by passing extra parameters to this method. Unlike Jx.TabSet, tabs do not have to be added to a separate Jx.Toolbar. |
removeRemove a tab from the TabSet. Parameters| tab | {<Jx.Tab>} the tab to remove. |
Jx. Button.TabA single tab in a tab set. A tab has a label (displayed in the tab) and a content area that is displayed when the tab is active. A tab has to be added to both a Jx.TabSet (for the content) and Jx.Toolbar (for the actual tab itself) in order to be useful. Alternately, you can use a Jx.TabBox which combines both into a single control at the cost of some flexibility in layout options. A tab is a Jx.ContentLoader and you can specify the initial content of the tab using any of the methods supported by Jx.ContentLoader::loadContent. You can acccess the actual DOM element that contains the content (if you want to dynamically insert content for instance) via the <Jx.Tab::content> property. A tab is a button of type toggle which means that it emits the up and down events. Examplevar tab1 = new Jx.Button.Tab({
label: 'tab 1',
content: 'content1',
onDown: function(tab) {
console.log('tab became active');
},
onUp: function(tab) {
console.log('tab became inactive');
}
});
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} The content area that is displayed when the tab is active. | | | | Create a new instance of Jx.Button.Tab. | | triggered when the user clicks the button, processes the actionPerformed event |
content{HTMLElement} The content area that is displayed when the tab is active. Jx. Button.TabCreate a new instance of Jx.Button.Tab. Any layout options passed are used to create a Jx.Layout for the tab content area. Parametersclickedtriggered when the user clicks the button, processes the actionPerformed event Jx. ToolbarA toolbar is a container object that contains other objects such as buttons. The toolbar organizes the objects it contains automatically, wrapping them as necessary. Multiple toolbars may be placed within the same containing object. Jx.Toolbar includes CSS classes for styling the appearance of a toolbar to be similar to traditional desktop application toolbars. There is one special object, Jx.ToolbarSeparator, that provides a visual separation between objects in a toolbar. While a toolbar is generally a dumb container, it serves a special purpose for menus by providing some infrastructure so that menus can behave properly. In general, almost anything can be placed in a Toolbar, and mixed with anything else. ExampleThe following example shows how to create a Jx.Toolbar instance and place two objects in it. //myToolbarContainer is the id of a <div> in the HTML page.
function myFunction() {}
var myToolbar = new Jx.Toolbar('myToolbarContainer');
var myButton = new Jx.Button(buttonOptions);
var myElement = document.createElement('select');
myToolbar.add(myButton, new Jx.ToolbarSeparator(), myElement);
Events| add | fired when one or more buttons are added to a toolbar | | remove | fired when on eor more buttons are removed from a toolbar |
ImplementsOptions LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {Array} an array of the things in the toolbar. | | {HTMLElement} the HTML element that the toolbar lives in | | When a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out. | | | | Create a new instance of Jx.Toolbar. | | Add an item to the toolbar. | | remove an item from a toolbar. | | Deactivate the Toolbar (when it is acting as a menu bar). | | Indicate if the toolbar is currently active (as a menu bar) | | Set the active state of the toolbar (for menus) | | For menus, they want to know which menu is currently open. |
items{Array} an array of the things in the toolbar. domObj{HTMLElement} the HTML element that the toolbar lives in isActiveWhen a toolbar contains Jx.Menu instances, they want to know if any menu in the toolbar is active and this is how they find out. Jx. ToolbarCreate a new instance of Jx.Toolbar. Parameters| options | an options object as documented below |
Options| parent | {HTMLElement} object reference or id to place the toolbar in. | | position | one of ‘top’, ‘right’, ‘bottom’, or ‘left’, indicates how the toolbar is being placed in the page and may influence the behaviour of items in the toolbar that open sub panels, they will tend to open them towards the center of the page. Default is top. |
addAdd an item to the toolbar. If the item being added is a Jx component with a domObj property, the domObj is added. If the item being added is an LI element, then it is given a CSS class of jxToolItem. Otherwise, the thing is wrapped in a <Jx.ToolbarItem>. Parameters| thing | {Object} the thing to add. More than one thing can be added by passing multiple arguments. |
removeremove an item from a toolbar. If the item is not in this toolbar nothing happens Parameters| item | {Object} the object to remove |
Returns{Object} the item that was removed, or null if the item was not removed. deactivateDeactivate the Toolbar (when it is acting as a menu bar). isActiveIndicate if the toolbar is currently active (as a menu bar) Returns{Boolean} setActiveSet the active state of the toolbar (for menus) ParameterssetVisibleItem| setVisibleItem: function( | obj | ) |
|
For menus, they want to know which menu is currently open. Parameters| obj | {Jx.Menu} the menu that just opened. |
Jx. Toolbar.ItemA helper class to provide a container for something to go into a Jx.Toolbar. LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} an element to contain the thing to be placed in the toolbar. | | | | Create a new instance of Jx.Toolbar.Item. |
domObj{HTMLElement} an element to contain the thing to be placed in the toolbar. Jx. Toolbar.ItemCreate a new instance of Jx.Toolbar.Item. Parameters| jxThing | {Object} the thing to be contained. |
Jx. Toolbar. SeparatorA helper class that represents a visual separator in a Jx.Toolbar Example
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} The DOM element that goes in the Jx.Toolbar | | | | Create a new Jx.Toolbar.Separator |
domObj{HTMLElement} The DOM element that goes in the Jx.Toolbar Jx. Toolbar. SeparatorCreate a new Jx.Toolbar.Separator Jx. Toolbar. ContainerA toolbar container contains toolbars. A single toolbar container fills the available space horizontally. Toolbars placed in a toolbar container do not wrap when they exceed the available space. Events| add | fired when one or more toolbars are added to a container | | remove | fired when one or more toolbars are removed from a container |
ImplementsOptions Events {Jx.Addable} LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} the HTML element that the container lives in | | | | Create a new instance of Jx.Toolbar.Container | | Add a toolbar to the container. | | remove an item from a toolbar. | | scrolls an item in one of the toolbars into the currently visible area of the container if it is not already fully visible |
domObj{HTMLElement} the HTML element that the container lives in Jx. Toolbar. ContainerCreate a new instance of Jx.Toolbar.Container Parameters| options | an options object as documented below |
Options| id | {String} the ID to give the main DIV element created by the container | | parent | {HTMLElement} object reference or id to place the toolbar in. |
addAdd a toolbar to the container. Parameters| toolbar | {Object} the toolbar to add. More than one toolbar can be added by passing multiple arguments. |
removeremove an item from a toolbar. If the item is not in this toolbar nothing happens Parameters| item | {Object} the object to remove |
Returns{Object} the item that was removed, or null if the item was not removed. scrollIntoView| scrollIntoView: function( | item | ) |
|
scrolls an item in one of the toolbars into the currently visible area of the container if it is not already fully visible ParametersJx. TreeItemAn item in a tree. An item is a leaf node that has no children. Jx.TreeItem supports selection via the click event. The application is responsible for changing the style of the selected item in the tree and for tracking selection if that is important. Example
Events| click | triggered when the tree item is clicked |
Implements| Events | MooTools Class.Extras | | Options | MooTools Class.Extras |
LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} a reference to the HTML element that is the TreeItem in the DOM | | {Object} the folder or tree that this item belongs to | | | | Create a new instance of Jx.TreeItem with the associated options | | Clean up the TreeItem and remove all DOM references | | Clean up the TreeItem and remove all DOM references | | Create a clone of the TreeItem | | Update the CSS of the TreeItem’s DOM element in case it has changed position | | Called when the DOM element for the TreeItem is clicked, the node is selected. | | Called when the DOM element for the TreeItem is right-clicked. | | Get the label associated with a TreeItem | | A property of an object has changed, synchronize the state of the TreeItem with the state of the object |
domObj{HTMLElement} a reference to the HTML element that is the TreeItem in the DOM owner{Object} the folder or tree that this item belongs to Jx. TreeItemCreate a new instance of Jx.TreeItem with the associated options Parameters| options | {Object} an object containing the below optional attributes that control how the TreeItem functions. |
Options| label | {String} the label to display for the TreeItem | | data | {Object} any arbitrary data to be associated with the TreeItem | | contextMenu | {<Jx.ContextMenu>} the context menu to trigger if there is a right click on the node | | image | {String} URL to an image to use as the icon next to the label of this TreeItem | | enabled | {Boolean} the initial state of the TreeItem. If the TreeItem is not enabled, it cannot be clicked. |
finalizeClean up the TreeItem and remove all DOM references finalizeItemClean up the TreeItem and remove all DOM references cloneCreate a clone of the TreeItem Returns{Jx.TreeItem} a copy of the TreeItem update| update : function( | shouldDescend | ) |
|
Update the CSS of the TreeItem’s DOM element in case it has changed position Parameters| shouldDescend | {Boolean} propagate changes to child nodes? |
selectedCalled when the DOM element for the TreeItem is clicked, the node is selected. ParametersshowMenuCalled when the DOM element for the TreeItem is right-clicked. The node is selected and the context menu displayed (if there is one). ParametersgetNameGet the label associated with a TreeItem Returns{String} the name propertyChanged| propertyChanged : function( | obj | ) |
|
A property of an object has changed, synchronize the state of the TreeItem with the state of the object Parameters| obj | {Object} the object whose state has changed |
Jx. TreeFolderA Jx.TreeFolder is an item in a tree that can contain other items. It is expandable and collapsible. Example
ExtendsJx.TreeItem LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | {HTMLElement} an HTML container for the things inside the folder | | {Array} an array of references to the javascript objects that are children of this folder | | | | Create a new instance of Jx.TreeFolder | | | | Internal method to clean up folder-related stuff. | | Create a clone of the TreeFolder | | Indicates if a node is the last thing in the folder. | | Update the CSS of the TreeFolder’s DOM element in case it has changed position. | | append a node at the end of the sub-tree | | insert a node after refNode. | | remove the specified node from the tree | | Replace a node with another node | | handle the user clicking on this folder by expanding or collapsing it. | | | | | | Get a reference to a child node by recursively searching the tree |
subDomObj{HTMLElement} an HTML container for the things inside the folder nodes{Array} an array of references to the javascript objects that are children of this folder Jx. TreeFolderCreate a new instance of Jx.TreeFolder Parameters| options | {Object} an object containing any of the options of a Jx.TreeItem (see Jx.TreeItem::Jx.TreeItem) plus the following optional attributes that control how the TreeFolder functions. |
Options| openImage | {String} a URL to an image for opening the folder | | closeImage | {String} a URL to an image for closing the folder | | folderCloseImage | {String} a URL to an image to represent the folder when it is closed | | folderOpenImage | {String} a URL to an image to represent the folder when it is open |
finalizeFolder| finalizeFolder: function() |
Internal method to clean up folder-related stuff. cloneCreate a clone of the TreeFolder Returns{Jx.TreeFolder} a copy of the TreeFolder isLastNode| isLastNode : function( | node | ) |
|
Indicates if a node is the last thing in the folder. Parameters| node | {Jx.TreeItem} the node to check |
Returns{Boolean} update| update : function( | shouldDescend | ) |
|
Update the CSS of the TreeFolder’s DOM element in case it has changed position. Parameters| shouldDescend | {Boolean} propagate changes to child nodes? |
appendappend a node at the end of the sub-tree Parameters| node | {Object} the node to append. |
insert| insert : function( | node, | | refNode | ) |
|
insert a node after refNode. If refNode is null, insert at beginning Parameters| node | {Object} the node to insert | | refNode | {Object} the node to insert before |
removeremove the specified node from the tree Parameters| node | {Object} the node to remove |
replace| replace: function( | newNode, | | refNode | ) |
|
Replace a node with another node Parameters| newNode | {Object} the node to put into the tree | | refNode | {Object} the node to replace |
Returns{Boolean} true if the replacement was successful. clickedhandle the user clicking on this folder by expanding or collapsing it. Parameters| e | {Event} the event object |
findChild| findChild : function( | path | ) |
|
Get a reference to a child node by recursively searching the tree Parameters| path | {Array} an array of labels of nodes to search for |
Returns{Object} the node or null if the path was not found Jx.TreeJx.Tree displays hierarchical data in a tree structure of folders and nodes. Example
Extends: Jx.TreeFolder LicenseCopyright © 2008, DM Solutions Group Inc. This file is licensed under an MIT style license Summary | | | Create a new instance of Jx.Tree | | Clean up a Jx.Tree instance | | Clear the tree of all child nodes | | Update the CSS of the Tree’s DOM element in case it has changed position | | Append a node at the end of the sub-tree |
Jx.TreeCreate a new instance of Jx.Tree Parameters| id | {String} the id of the DOM element to create the tree inside. |
finalizeClean up a Jx.Tree instance clearClear the tree of all child nodes update| update: function( | shouldDescend | ) |
|
Update the CSS of the Tree’s DOM element in case it has changed position Parameters| shouldDescend | {Boolean} propagate changes to child nodes? |
appendAppend a node at the end of the sub-tree Parameters| node | {Object} the node to append. |
|