KD.library.util.PanelBuilder
This utility provides a simple to use strategy for building up YUI panels (see screenshots for examples). The KD.library.util.PanelBuilder is a very small, basic wrapper for the YUI container widget. The code within this library can easily be copied into a Kinetic Request service item or other web application when direct YUI widget interaction is desired.
-
Applies the yui-skin-sam css class to the body element (required to utilize the YUI container css; IE things like the page masking of a dialog) on load of the page.
-
Defaults many of the common options used to generate panels/dialogs.
-
Stores a reference to each panel so that future calls to the same panel element refresh the content without rebuilding the actual container elements.
Requirements
- YUI DOM Event Library
-
YUI DragDrop Library (only when configuring panels/dialogs to be draggable)
- YUI Container Library
- YUI Container CSS
<!-- Include the YUI dependencies --> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/container/container-min.js"></script> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/container/assets/skins/sam/container.css">
<!-- Include the YUI dependencies --> <script type="text/javascript" src="/kinetic/resources/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="/kinetic/resources/js/yui/build/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="/kinetic/resources/js/yui/build/container/container-min.js"></script> <link rel="stylesheet" type="text/css" href="/kinetic/resources/js/yui/build/container/assets/skins/sam/container.css">
Example Usage
KD.library.util.PanelBuilder.renderPanel( // PanelBuilder options { // Required parameter; this needs to be a valid element Id or the panel will not display containerId: 'panelContainer', // Required parameter; panelId: 'modalPanel', // Optional parameter; this sets the header of the panel. panelHeader: "Modal Panel", // Optional parameter; panelBody: "Go <a href="http://www.google.com">Google</a>!", // Optional parameter; panelFooter: "This is a panel footer!", // Optional parameter; this sets the type of panel to use, which can be any subclass of YAHOO.widget.Panel. // YAHOO.widget.Dialog is handy to automatically create buttons (see http://developer.yahoo.com/yui/container/dialog/) // YAHOO.widget.ResizePanel is a custom developed YUI Panel extension in the resorces/js/extensions directory of Kinetic Request. panelClass: YAHOO.widget.ResizePanel }, // YAHOO.widget.Panel configuration options (merged with defaults and passed directly to the panel object constructor) {modal: true} );