* * If you want to create an object of this class manually, remember to name it "DHTMLSuite.configObj" * This object should then be created before any other objects. This is nescessary if you want * the other objects to use the values you have put into the object.
* @version 1.0 * @version 1.0 * @author Alf Magne Kalleland(www.dhtmlgoodies.com) **/ DHTMLSuite.config = function() { var imagePath; // Path to images used by the classes. var cssPath; // Path to CSS files used by the DHTML suite. var defaultCssPath; var defaultImagePath; } DHTMLSuite.config.prototype = { // {{{ init() /** * Initializes the config object - the config class is used to store global properties used by almost all widgets * * @public */ init : function() { this.imagePath = './'; // Path to images this.cssPath = './'; // Path to images this.defaultCssPath = this.cssPath; this.defaultImagePath = this.imagePath; } // }}} , // {{{ setCssPath() /** * This method will save a new CSS path, i.e. where the css files of the dhtml suite are located(the folder). * * @param string newCssPath = New path to css files(folder - remember to have a slash(/) at the end) * @public */ setCssPath : function(newCssPath) { this.cssPath = newCssPath; } // }}} , // {{{ resetCssPath() /** * Resets css path back to default value which is ../css_dhtmlsuite/ * * @public */ resetCssPath : function() { this.cssPath = this.defaultCssPath; } // }}} , // {{{ resetImagePath() /** * Resets css path back to default path which is ../images_dhtmlsuite/ * * @public */ resetImagePath : function() { this.imagePath = this.defaultImagePath; } // }}} , // {{{ setImagePath() /** * This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located * * @param string newImagePath = New path to image files (remember to have a slash(/) at the end) * @public */ setImagePath : function(newImagePath) { this.imagePath = newImagePath; } // }}} } DHTMLSuite.globalVariableStorage = function() { var menuBar_highlightedItems; // Array of highlighted menu bar items this.menuBar_highlightedItems = new Array(); var arrayOfDhtmlSuiteObjects; // Array of objects of class menuItem. this.arrayOfDhtmlSuiteObjects = new Array(); var ajaxObjects; this.ajaxObjects = new Array(); } DHTMLSuite.globalVariableStorage.prototype = { } /************************************************************************************************************ * A class with general methods used by most of the scripts * * Created: August, 19th, 2006 * Purpose of class: A class containing common method used by one or more of the gui classes below, * example: loadCSS. * An object("DHTMLSuite.commonObj") of this class will always be available to the other classes. * Update log: * ************************************************************************************************************/ /** * @constructor * @class A class containing common method used by one or more of the gui classes below, example: loadCSS. An object("DHTMLSuite.commonObj") of this class will always be available to the other classes. * @version 1.0 * @author Alf Magne Kalleland(www.dhtmlgoodies.com) **/ DHTMLSuite.common = function() { var loadedCSSFiles; // Array of loaded CSS files. Prevent same CSS file from being loaded twice. var cssCacheStatus; // Css cache status var eventElements; var isOkToSelect; // Boolean variable indicating if it's ok to make text selections this.okToSelect = true; this.cssCacheStatus = true; // Caching of css files = on(Default) this.eventElements = new Array(); } DHTMLSuite.common.prototype = { // {{{ init() /** * This method initializes the DHTMLSuite_common object. * This class contains a lot of useful methods used by most widgets. * * @public */ init : function() { this.loadedCSSFiles = new Array(); } // }}} , // {{{ loadCSS() /** * This method loads a CSS file(Cascading Style Sheet) dynamically - i.e. an alternative to tag in the document. * * @param string cssFileName = Name of css file. It will be loaded from the path specified in the DHTMLSuite.common object * @public */ loadCSS : function(cssFileName) { if(!this.loadedCSSFiles[cssFileName]){ this.loadedCSSFiles[cssFileName] = true; var linkTag = document.createElement('LINK'); if(!this.cssCacheStatus){ if(cssFileName.indexOf('?')>=0)cssFileName = cssFileName + '&'; else cssFileName = cssFileName + '?'; cssFileName = cssFileName + 'rand='+ Math.random(); // To prevent caching } linkTag.href = DHTMLSuite.configObj.cssPath + cssFileName; linkTag.rel = 'stylesheet'; linkTag.media = 'screen'; linkTag.type = 'text/css'; document.getElementsByTagName('HEAD')[0].appendChild(linkTag); } } // }}} , // {{{ getTopPos() /** * This method will return the top coordinate(pixel) of an HTML element/tag * * @param Object inputObj = Reference to HTML element * @public */ getTopPos : function(inputObj) { var returnValue = inputObj.offsetTop; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML'){ returnValue += (inputObj.offsetTop - inputObj.scrollTop); if(document.all)returnValue+=inputObj.clientTop; } } return returnValue; } // }}} , // {{{ __setOkToMakeTextSelections() /** * Is it ok to make text selections ? * * @param Boolean okToSelect * @private */ __setOkToMakeTextSelections : function(okToSelect){ this.okToSelect = okToSelect; } // }}} , // {{{ __setOkToMakeTextSelections() /** * Returns true if it's ok to make text selections, false otherwise. * * @return Boolean okToSelect * @private */ __getOkToMakeTextSelections : function() { return this.okToSelect; } // }}} , // {{{ setCssCacheStatus() /** * Specify if css files should be cached or not. * * @param Boolean cssCacheStatus = true = cache on, false = cache off * * @public */ setCssCacheStatus : function(cssCacheStatus) { this.cssCacheStatus = cssCacheStatus; } // }}} , // {{{ getLeftPos() /** * This method will return the left coordinate(pixel) of an HTML element * * @param Object inputObj = Reference to HTML element * @public */ getLeftPos : function(inputObj) { var returnValue = inputObj.offsetLeft; while((inputObj = inputObj.offsetParent) != null){ if(inputObj.tagName!='HTML'){ returnValue += inputObj.offsetLeft; if(document.all)returnValue+=inputObj.clientLeft; } } return returnValue; } // }}} , // {{{ getCookie() /** * * These cookie functions are downloaded from * http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm * * This function returns the value of a cookie * * @param String name = Name of cookie * @param Object inputObj = Reference to HTML element * @public */ getCookie : function(name) { var start = document.cookie.indexOf(name+"="); var len = start+name.length+1; if ((!start) && (name != document.cookie.substring(0,name.length))) return null; if (start == -1) return null; var end = document.cookie.indexOf(";",len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len,end)); } // }}} , // {{{ setCookie() /** * * These cookie functions are downloaded from * http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm * * This function creates a cookie. (This method has been slighhtly modified) * * @param String name = Name of cookie * @param String value = Value of cookie * @param Int expires = Timestamp - days * @param String path = Path for cookie (Usually left empty) * @param String domain = Cookie domain * @param Boolean secure = Secure cookie(SSL) * * @public */ setCookie : function(name,value,expires,path,domain,secure) { expires = expires * 60*60*24*1000; var today = new Date(); var expires_date = new Date( today.getTime() + (expires) ); var cookieString = name + "=" +escape(value) + ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + ( (path) ? ";path=" + path : "") + ( (domain) ? ";domain=" + domain : "") + ( (secure) ? ";secure" : ""); document.cookie = cookieString; } // }}} , // {{{ deleteCookie() /** * * This function deletes a cookie. (This method has been slighhtly modified) * * @param String name = Name of cookie * @param String path = Path for cookie (Usually left empty) * @param String domain = Cookie domain * * @public */ deleteCookie : function( name, path, domain ) { if ( this.getCookie( name ) ) document.cookie = name + "=" + ( ( path ) ? ";path=" + path : "") + ( ( domain ) ? ";domain=" + domain : "" ) + ";expires=Thu, 01-Jan-1970 00:00:01 GMT"; } // }}} , // {{{ cancelEvent() /** * * This function only returns false. It is used to cancel selections and drag * * * @public */ cancelEvent : function() { return false; } // }}} , // {{{ addEvent() /** * * This function adds an event listener to an element on the page. * * @param Object whichObject = Reference to HTML element(Which object to assigne the event) * @param String eventType = Which type of event, example "mousemove" or "mouseup" (NOT "onmousemove") * @param functionName = Name of function to execute. * * @public */ addEvent : function(whichObject,eventType,functionName,suffix) { if(!suffix)suffix = ''; if(whichObject.attachEvent){ whichObject['e'+eventType+functionName+suffix] = functionName; whichObject[eventType+functionName+suffix] = function(){whichObject['e'+eventType+functionName+suffix]( window.event );} whichObject.attachEvent( 'on'+eventType, whichObject[eventType+functionName+suffix] ); } else whichObject.addEventListener(eventType,functionName,false); this.__addEventElement(whichObject); } // }}} , // {{{ removeEvent() /** * * This function removes an event listener from an element on the page. * * @param Object whichObject = Reference to HTML element(Which object to assigne the event) * @param String eventType = Which type of event, example "mousemove" or "mouseup" * @param functionName = Name of function to execute. * * @public */ removeEvent : function(whichObject,eventType,functionName) { if(whichObject.detachEvent){ whichObject.detachEvent('on'+eventType, whichObject[eventType+functionName]); whichObject[eventType+functionName] = null; } else whichObject.removeEventListener(eventType,functionName,false); } // }}} , // {{{ __clearMemoryGarbage() /** * * This function is used for Internet Explorer in order to clear memory when the page unloads. * * * @private */ __clearMemoryGarbage : function() { /* Example of event which causes memory leakage in IE DHTMLSuite.commonObj.addEvent(expandRef,"click",function(){ window.refToMyMenuBar[index].__changeMenuBarState(this); }) We got a circular reference. */ if(!DHTMLSuite.clientInfoObj.isMSIE)return; for(var no in DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects){ DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[no] = false; } for(var no=0;no
*/ DHTMLSuite.tableWidgetPageHandler = function() { var tableRef; // Reference to object of class DHTMLSuite.tableWidget var targetRef; // Where to insert the pagination. var txtPrevious; // Label - "Previous" var txtNext; // Label - "Next" var txtFirst; // Label - "First" var txtLast; // Label - "last" var txtResultPrefix; // Prefix : result - default = "Result: " var txtResultTo; // Text label Result: 1 "to" 10 of 51 - default value = "to" var txtResultOf; // Text label Result: 1 to 10 "of" 51 - default value = "of" var totalNumberOfRows; // Total number of rows in dataset var rowsPerPage; // Number of rows per page. var layoutCSS; // Name of CSS file for the table widget. var activePageNumber; // Active page number var mainDivElement; // Reference to main div for the page handler var resultDivElement; // Reference to div element which is parent for the result var pageListDivElement; // Reference to div element which is parent to pages [1],[2],[3]...[Next] var objectIndex; // Index of this widget in the arrayOfDhtmlSuiteObjects array var linkPagePrefix; // Text in front of each page link var linkPageSuffix; // Text behind each page link var maximumNumberOfPageLinks; // Maximum number of page links. var callbackOnAfterNavigate; // Callback function - executed when someone navigates to a different page this.txtPrevious = 'Previous'; // Default label this.txtNext = 'Next'; // Default label this.txtResultPrefix = 'Result: '; // Default label this.txtResultTo = 'to'; // Default label this.txtResultOf = 'of'; // Default label this.txtFirst = 'First'; this.txtLast = 'Last'; this.tableRef = false; this.targetRef = false; this.totalNumberOfRows = false; this.activePageNumber = 1; this.layoutCSS = 'table-widget-page-handler.css'; this.linkPagePrefix = ''; this.linkPageSuffix = ''; this.maximumNumberOfPageLinks = false; this.callbackOnAfterNavigate = false; this.objectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length; DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[this.objectIndex] = this; } DHTMLSuite.tableWidgetPageHandler.prototype = { // {{{ setTableRef() /** * Connect to a tableWidget object. * * @param Object tableRef = An object of class DHTMLSuite.tableWidget. It makes it possible for the tableWidget and this object to communicate. * * @public */ setTableRef : function(tableRef) { this.tableRef = tableRef; this.tableRef.setPageHandler(this); } // }}} , // {{{ setTargetId() /** * Where do you want to insert the navigation links for the table * * @param String idOfHTMLElement = Id of HTML Element on your page. * * @public */ setTargetId : function(idOfHTMLElement) { if(!document.getElementById(idOfHTMLElement)){ alert('ERROR IN tableWidgetPageHandler.setTargetId:\nElement with id ' + idOfHTMLElement + ' does not exists'); return; } this.targetRef = document.getElementById(idOfHTMLElement); } // }}} , // {{{ setTxtPrevious() /** * Set text label (previous page link) * * @param String newText = Text previous page link * * @public */ setTxtPrevious : function(newText) { this.txtPrevious = newText; } // }}} , // {{{ setLinkPagePrefix() /** * Set text/characters in front of each page link, example "[" to get page number in brackets * * @param String linkPagePrefix = Character(s) in front of page links * * @public */ setLinkPagePrefix : function(linkPagePrefix) { this.linkPagePrefix = linkPagePrefix; } // }}} , // {{{ setLinkPageSuffix() /** * Set text/characters in front of each page link, example "[" to get page number in brackets * * @param String linkPageSuffix = Character(s) in front of page links * * @public */ setLinkPageSuffix : function(linkPageSuffix) { this.linkPageSuffix = linkPageSuffix; } // }}} , // {{{ setTxtNext() /** * Set text label (next page link) * * @param String newText = Text next page link * * @public */ setTxtNext : function(newText) { this.txtNext = newText; } // }}} , // {{{ setTxtResultOf() /** * Set text label ("of" - result) * * @param String txtResultOf = Result of search, the "of" label ( Result: 1 to 10 "of" 51 ) * * @public */ setTxtResultOf : function(txtResultOf) { this.txtResultOf = txtResultOf; } // }}} , // {{{ setTxtResultTo() /** * Set text label ("to" - result) * * @param String txtResultTo = Result of search, the "to" label ( Result: 1 "to" 10 of 51 ) * * @public */ setTxtResultTo : function(txtResultTo) { this.txtResultTo = txtResultTo; } // }}} , // {{{ setTxtResultPrefix() /** * Set text label (prefix - result) * * @param String txtResultPrefix = Text next page link * * @public */ setTxtResultPrefix : function(txtResultPrefix) { this.txtResultPrefix = txtResultPrefix; } // }}} , // {{{ setTxtFirstPage() /** * Set text label ("Last" page) * * @param String txtFirst = Label of link to "First" page ( default = "First" ) .This option is only used when you are limiting the number of pages shown. * * @public */ setTxtFirstPage : function(txtFirst) { this.txtFirst = txtFirst; } // }}} , // {{{ setTxtLastPage() /** * Set text label ("First" page) * * @param String txtLast = Label of link to "Last" page ( default = "Last" ) .This option is only used when you are limiting the number of pages shown. * * @public */ setTxtLastPage : function(txtLast) { this.txtLast = txtLast; } // }}} , // {{{ setTotalNumberOfRows() /** * Specify total number of rows in the entire dataset * * @param Integer totalNumberOfRows = Total number of rows in the entire dataset. * * @public */ setTotalNumberOfRows : function(totalNumberOfRows) { this.totalNumberOfRows = totalNumberOfRows; } // }}} , // {{{ setCallbackOnAfterNavigate() /** * Specify call back function to execute after page navigatoin * * @param String callbackOnAfterNavigate - name of javascript function. * * @public */ setCallbackOnAfterNavigate : function(callbackOnAfterNavigate) { this.callbackOnAfterNavigate = callbackOnAfterNavigate; } // }}} , // {{{ setLayoutCss() /** * set new CSS file * * @param String cssFileName - name of new css file(example: drag-drop.css). Has to be set before init is called. * * @public */ setLayoutCss : function(layoutCSS) { this.layoutCSS = layoutCSS; } // }}} , // {{{ setMaximumNumberOfPageLinks() /** * Set maximum number of page links displayed below the table, i.e. if you have 50 pages, you can limit number of page links to 10 by sending 10 to this method. * * @param Integer maximumNumberOfPageLinks - (0 or false means = no limitation) * * @public */ setMaximumNumberOfPageLinks : function(maximumNumberOfPageLinks) { this.maximumNumberOfPageLinks = maximumNumberOfPageLinks; } // }}} , // {{{ init() /** * Initializes the script widget. Set methods should be called before your call this method. * * * @public */ init : function() { this.rowsPerPage = this.tableRef.getServersideSortNumberOfRows(); DHTMLSuite.commonObj.loadCSS(this.layoutCSS); this.__createMainDivElements(); this.setHTMLOfResultList(); this.__createPageLinks(); } // }}} , // {{{ __createMainDivElements() /** * Create main div elements for the page handler * * * @private */ __createMainDivElements : function() { if(!this.targetRef){ alert('Error creating table widget page handler. Remember to specify targetRef'); return; } this.mainDivElement = document.createElement('DIV'); this.mainDivElement.className = 'DHTMLSuite_tableWidgetPageHandler_mainDiv'; this.targetRef.appendChild(this.mainDivElement); this.resultDivElement = document.createElement('DIV'); this.resultDivElement.className = 'DHTMLSuite_tableWidgetPageHandler_result'; this.mainDivElement.appendChild(this.resultDivElement); this.pageListDivElement = document.createElement('DIV'); this.pageListDivElement.className = 'DHTMLSuite_tableWidgetPageHandler_pageList'; this.mainDivElement.appendChild(this.pageListDivElement); } , // {{{ setHTMLOfResultList() /** * * Create result list div * * * * @public */ setHTMLOfResultList : function() { this.resultDivElement.innerHTML = ''; var html = this.txtResultPrefix + (((this.activePageNumber-1) * this.rowsPerPage) + 1) + ' ' + this.txtResultTo + ' ' + Math.min(this.totalNumberOfRows,(this.activePageNumber * this.rowsPerPage)) + ' ' + this.txtResultOf + ' ' + this.totalNumberOfRows; this.resultDivElement.innerHTML = html; } // }}} , // {{{ __createPageLinks() /** * * Create page links * * * * @private */ __createPageLinks : function() { var ind = this.objectIndex; this.pageListDivElement.innerHTML = ''; // Clearing the div element if it allready got content. var numberOfPages = Math.ceil(this.totalNumberOfRows/this.rowsPerPage); /* link to first page */ if(this.maximumNumberOfPageLinks && this.maximumNumberOfPageLinks
<ul id="menuModel">
<li id="50000" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
<ul width="150">
<li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif"><a href="#" title="Save your work">Save</a></li>
<li id="500002"><a href="#">Save As</a></li>
<li id="500004" itemType="separator"></li>
<li id="500003"><a href="#">Open</a></li>
</ul>
</li>
<li id="50001"><a href="#">View</a>
<ul width="130">
<li id="500011"><a href="#">Source</a></li>
<li id="500012"><a href="#">Debug info</a></li>
<li id="500013"><a href="#">Layout</a>
<ul width="150">
<li id="5000131"><a href="#">CSS</a>
<li id="5000132"><a href="#">HTML</a>
<li id="5000133"><a href="#">Javascript</a>
</ul>
</li>
</ul>
</li>
<li id="50003" itemType="separator"></li>
<li id="50002"><a href="#">Tools</a></li>
</ul> * * @param String ulId = ID of
- tag on your page.
*
* @public
*/
addItemsFromMarkup : function(ulId)
{
if(!document.getElementById(ulId)){
alert('
- .
/* Checking type */
var type = liTags[no].getAttribute('itemType');
if(!type)type = liTags[no].itemType;
if(type=='separator'){ // Menu item of type "separator"
this.menuItems[id].setAsSeparator(id,parentId);
continue;
}
if(parentId)type='sub'; else type = 'top';
var aTag = liTags[no].getElementsByTagName('A')[0]; // Get a reference to sub tag
if(!aTag){
continue;
}
if(aTag)var itemText = aTag.innerHTML; // Item text is set to the innerHTML of the tag.
var itemIcon = liTags[no].getAttribute('itemIcon'); // Item icon is set from the itemIcon attribute of the
- tag. var url = aTag.href; // url is set to the href attribute of the tag if(url=='#' || url.substr(url.length-1,1)=='#')url=''; // # = empty url. var jsFunction = liTags[no].getAttribute('jsFunction'); // jsFunction is set from the jsFunction attribute of the
- tag. var submenuWidth = false; // Not set from the
- tag. var helpText = aTag.getAttribute('title'); if(!helpText)helpText = aTag.title; this.menuItems[id].setMenuVars(id,itemText,itemIcon,url,parentId,helpText,jsFunction,type,submenuWidth); } var subUls = ulObj.getElementsByTagName('UL'); for(var no=0;no
'; iconDiv.id = 'menuItemIcon' + this.modelItemRef.id parentEl.appendChild(iconDiv); } if(this.modelItemRef.itemText){ var div = document.createElement('DIV'); div.innerHTML = this.modelItemRef.itemText; div.className = this.cssPrefix + 'menuItem_textContent'; div.id = 'menuItemText' + this.modelItemRef.id; parentEl.appendChild(div); } /* Create div for the arrow -> Show sub items */ var div = document.createElement('DIV'); div.className = this.cssPrefix + 'menuItem_top_arrowShowSub'; div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id; parentEl.appendChild(div); this.expandElement = div; if(!this.modelItemRef.hasSubs)div.style.display='none'; } // }}} , // {{{ __createMenuElementsOfTypeSub() /** * Creates the different parts of a menu item of type "sub". * * @param menuModelItem menuModelItemObj = Object of type menuModelItemObj * @param Object parentEl = Reference to parent element * * @private */ __createMenuElementsOfTypeSub : function(parentEl){ if(this.modelItemRef.itemIcon){ parentEl.style.backgroundImage = 'url(\'' + this.modelItemRef.itemIcon + '\')'; parentEl.style.backgroundRepeat = 'no-repeat'; parentEl.style.backgroundPosition = 'left center'; } if(this.modelItemRef.itemText){ var div = document.createElement('DIV'); div.className = 'DHTMLSuite_textContent'; div.innerHTML = this.modelItemRef.itemText; div.className = this.cssPrefix + 'menuItem_textContent'; div.id = 'menuItemText' + this.modelItemRef.id; parentEl.appendChild(div); } /* Create div for the arrow -> Show sub items */ var div = document.createElement('DIV'); div.className = this.cssPrefix + 'menuItem_sub_arrowShowSub'; parentEl.appendChild(div); div.id = 'DHTMLSuite_menuBar_arrow' + this.modelItemRef.id; this.expandElement = div; if(!this.modelItemRef.hasSubs){ div.style.display='none'; }else{ div.previousSibling.style.paddingRight = '15px'; } } // }}} , // {{{ setCssPrefix() /** * Set css prefix for the menu item. default is 'DHTMLSuite_'. This is useful in case you want to have different menus on a page with different layout. * * @param String cssPrefix = New css prefix. * * @public */ setCssPrefix : function(cssPrefix) { this.cssPrefix = cssPrefix; } // }}} , // {{{ setMenuIcon() /** * Replace menu icon. * * @param String newPath - Path to new icon (false if no icon); * * @public */ setIcon : function(newPath) { this.modelItemRef.setIcon(newPath); if(this.modelItemRef.type=='top'){ // Menu item is of type "top" var div = document.getElementById('menuItemIcon' + this.modelItemRef.id); // Get a reference to the div where the icon is located. var img = div.getElementsByTagName('IMG')[0]; // Find the image if(!img){ // Image doesn't exists ? img = document.createElement('IMG'); // Create new image div.appendChild(img); } img.src = newPath; // Set image path if(!newPath)img.parentNode.removeChild(img); // No newPath defined, remove the image. } if(this.modelItemRef.type=='sub'){ // Menu item is of type "sub" this.divElement.style.backgroundImage = 'url(\'' + newPath + '\')'; // Set backgroundImage for the main div(i.e. menu item div) } } // }}} , // {{{ setText() /** * Replace the text of a menu item * * @param String newText - New text for the menu item. * * @public */ setText : function(newText) { this.modelItemRef.setText(newText); document.getElementById('menuItemText' + this.modelItemRef.id).innerHTML = newText; } // }}} , // {{{ __clickMenuItem() /** * Effect - click on menu item * * * @private */ __clickMenuItem : function() { this.className = this.className.replace('_regular','_click'); this.className = this.className.replace('_over','_click'); } // }}} , // {{{ __rolloverMenuItem() /** * Roll over effect * * * @private */ __rolloverMenuItem : function() { this.className = this.className.replace('_regular','_over'); this.className = this.className.replace('_click','_over'); } // }}} , // {{{ __rolloutMenuItem() /** * Roll out effect * * * @private */ __rolloutMenuItem : function() { this.className = this.className.replace('_over','_regular'); } // }}} , // {{{ setState() /** * Set state of a menu item. * * @param String newState = New state for the menu item * * @public */ setState : function(newState) { this.divElement.className = this.cssPrefix + 'menuItem_' + this.modelItemRef.type + '_' + newState; this.modelItemRef.setState(newState); } // }}} , // {{{ getState() /** * Return state of a menu item. * * * @public */ getState : function() { var state = this.modelItemRef.getState(); if(!state){ if(this.divElement.className.indexOf('_over')>=0)state = 'over'; if(this.divElement.className.indexOf('_click')>=0)state = 'click'; this.modelItemRef.setState(state); } return state; } // }}} , // {{{ __setHasSub() /** * Update the item, i.e. show/hide the arrow if the element has subs or not. * * * @private */ __setHasSub : function(hasSubs) { this.modelItemRef.hasSubs = hasSubs; if(!hasSubs){ document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='none'; }else{ document.getElementById(this.cssPrefix +'menuBar_arrow' + this.modelItemRef.id).style.display='block'; } } // }}} , // {{{ hide() /** * Hide the menu item. * * * @public */ hide : function() { this.modelItemRef.setVisibility(false); this.divElement.style.display='none'; } , // {{{ show() /** * Show the menu item. * * * @public */ show : function() { this.modelItemRef.setVisibility(true); this.divElement.style.display='block'; } // }}} , // {{{ __hideGroup() /** * Hide the group the menu item is a part of. Example: if we're dealing with menu item 2.1, hide the group for all sub items of 2 * * * @private */ __hideGroup : function() { if(this.modelItemRef.parentId){ this.divElement.parentNode.style.visibility='hidden'; if(DHTMLSuite.clientInfoObj.isMSIE){ try{ var tmpId = this.divElement.parentNode.id.replace(/[^0-9]/gi,''); document.getElementById('DHTMLSuite_menuBarIframe_' + tmpId).style.visibility = 'hidden'; }catch(e){ // IFRAME hasn't been created. } } } } // }}} , // {{{ __navigate() /** * Navigate after click on a menu item. * * * @private */ __navigate : function(e) { /* Check to see if the expand sub arrow is clicked. if it is, we shouldn't navigate from this click */ if(document.all)e = event; if(e){ var srcEl = DHTMLSuite.commonObj.getSrcElement(e); if(srcEl.id.indexOf('arrow')>=0)return; } if(this.modelItemRef.state=='disabled')return; if(this.modelItemRef.url){ location.href = this.modelItemRef.url; } if(this.modelItemRef.jsFunction){ try{ eval(this.modelItemRef.jsFunction); }catch(e){ alert('Defined Javascript code for the menu item( ' + this.modelItemRef.jsFunction + ' ) cannot be executed'); } } } } /*[FILE_START:dhtmlSuite-menuBar.js] */ /************************************************************************************************************ * DHTML menu bar class * * Created: October, 21st, 2006 * @class Purpose of class: Creates a top bar menu * * Css files used by this script: menu-bar.css * * Demos of this class: demo-menu-bar.html * * Update log: * ************************************************************************************************************/ /** * @constructor * @class Purpose of class: Creates a top bar menu strip. Demos:
*-
*
- (A menu with a detailed description on how it is created) *
- (Demo with lots of menus on the same page) *
- (Two menus with different layout) *
- (One menu with custom layout/css.) *
* * @version 1.0 * @author Alf Magne Kalleland(www.dhtmlgoodies.com) */ DHTMLSuite.menuBar = function() { var menuItemObj; var layoutCSS; // Name of css file var menuBarBackgroundImage; // Name of background image var menuItem_objects; // Array of menu items - html elements. var menuBarObj; // Reference to the main dib var menuBarHeight; var menuItems; // Reference to objects of class menuModelItem var highlightedItems; // Array of currently highlighted menu items. var menuBarState; // Menu bar state - true or false - 1 = expand items on mouse over var activeSubItemsOnMouseOver; // Activate sub items on mouse over (instead of onclick) var submenuGroups; // Array of div elements for the sub menus var submenuIframes; // Array of sub menu iframes used to cover select boxes in old IE browsers. var createIframesForOldIeBrowsers; // true if we want the script to create iframes in order to cover select boxes in older ie browsers. var targetId; // Id of element where the menu will be inserted. var menuItemCssPrefix; // Css prefix of menu items. var cssPrefix; // Css prefix for the menu bar var menuItemLayoutCss; // Css path for the menu items of this menu bar var objectIndex; // Global index of this object - used to refer to the object of this class outside this.cssPrefix = 'DHTMLSuite_'; this.menuItemLayoutCss = false; // false = use default for the menuItem class. this.layoutCSS = 'menu-bar.css'; this.menuBarBackgroundImage = 'menu_strip_bg.jpg'; this.menuItem_objects = new Array(); DHTMLSuite.variableStorage.menuBar_highlightedItems = new Array(); this.menuBarState = false; this.menuBarObj = false; this.menuBarHeight = 26; this.submenuGroups = new Array(); this.submenuIframes = new Array(); this.targetId = false; this.activeSubItemsOnMouseOver = false; this.menuItemCssPrefix = false; this.createIframesForOldIeBrowsers = true; try{ if(!standardObjectsCreated)DHTMLSuite.createStandardObjects(); }catch(e){ alert('You need to include the dhtmlSuite-common.js file'); } this.objectIndex = DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects.length;; DHTMLSuite.variableStorage.arrayOfDhtmlSuiteObjects[this.objectIndex] = this; } DHTMLSuite.menuBar.prototype = { // {{{ init() /** * Initilizes the script - This method should be called after your set methods. * * * @public */ init : function() { DHTMLSuite.commonObj.loadCSS(this.layoutCSS); this.__createMainMenuDiv(); // Create general divs this.__createMenuItems(); // Create menu items this.__setBasicEvents(); // Set basic events. window.refToThismenuBar = this; } // }}} , // {{{ setTarget() /** * Specify where this menu bar will be inserted. the element with this id will be parent of the menu bar. * * @param String idOfHTMLElement = Id of element where the menu will be inserted. * * @public */ setTarget : function(idOfHTMLElement) { this.targetId = idOfHTMLElement; } // }}} , // {{{ setLayoutCss() /** * Specify the css file for this menu bar * * @param String nameOfNewCssFile = Name of new css file. * * @public */ setLayoutCss : function(nameOfNewCssFile) { this.layoutCSS = nameOfNewCssFile; } // }}} , // {{{ setMenuItemLayoutCss() /** * Specify the css file for the menu items * * @param String nameOfNewCssFile = Name of new css file. * * @public */ setMenuItemLayoutCss : function(nameOfNewCssFile) { this.menuItemLayoutCss = nameOfNewCssFile; } // }}} , // {{{ setCreateIframesForOldIeBrowsers() /** * This method specifies if you want to the script to create iframes behind sub menu groups in order to cover eventual select boxes. This * is needed if you have users with older IE browsers(prior to version 7) and when there's a chance that a sub menu could appear on top * of a select box. * * @param Boolean createIframesForOldIeBrowsers = true if you want the script to create iframes to cover select boxes in older ie browsers. * * @public */ setCreateIframesForOldIeBrowsers : function(createIframesForOldIeBrowsers) { this.createIframesForOldIeBrowsers = createIframesForOldIeBrowsers; } // }}} , // {{{ addMenuItems() /** * Add menu items * * @param DHTMLSuite.menuModel menuModel Object of class DHTMLSuite.menuModel which holds menu data * * @public */ addMenuItems : function(menuItemObj) { this.menuItemObj = menuItemObj; this.menuItems = menuItemObj.getItems(); } // }}} , // {{{ setActiveSubItemsOnMouseOver() /** * Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is). * * @param Boolean activateSubOnMouseOver - Specify if sub menus should be activated on mouse over(i.e. no matter what the menuState property is). * * @public */ setActiveSubItemsOnMouseOver : function(activateSubOnMouseOver) { this.activeSubItemsOnMouseOver = activateSubOnMouseOver; } // }}} , // {{{ setMenuItemState() /** * This method changes the state of the menu bar(expanded or collapsed). This method is called when someone clicks on the arrow at the right of menu items. * * @param Number menuItemId - ID of the menu item we want to switch state for * @param String state - New state(example: "disabled") * * @public */ setMenuItemState : function(menuItemId,state) { this.menuItem_objects[menuItemId].setState(state); } // }}} , // {{{ setMenuItemCssPrefix() /** * Specify prefix of css classes used for the menu items. Default css prefix is "DHTMLSuite_". If you wish have some custom styling for some of your menus, * create a separate css file and replace DHTMLSuite_ for the class names with your new prefix. This is useful if you want to have two menus on the same page * with different stylings. * * @param String newCssPrefix - New css prefix for menu items. * * @public */ setMenuItemCssPrefix : function(newCssPrefix) { this.menuItemCssPrefix = newCssPrefix; } // }}} , // {{{ setCssPrefix() /** * Specify prefix of css classes used for the menu bar. Default css prefix is "DHTMLSuite_" and that's the prefix of all css classes inside menu-bar.css(the default css file). * If you want some custom menu bars, create and include your own css files, replace DHTMLSuite_ in the class names with your own prefix and set the new prefix by calling * this method. This is useful if you want to have two menus on the same page with different stylings. * * @param String newCssPrefix - New css prefix for the menu bar classes. * * @public */ setCssPrefix : function(newCssPrefix) { this.cssPrefix = newCssPrefix; } // }}} , // {{{ replaceSubMenus() /** * This method replaces existing sub menu items with a new subset (To replace all menu items, pass 0 as idOfParentMenuItem) * * * @param Number idOfParentMenuItem - ID of parent element ( 0 if top node) - if set, all sub elements will be deleted and replaced with the new menu model. * @param menuModel newMenuModel - Reference to object of class menuModel * * @private */ replaceMenuItems : function(idOfParentMenuItem,newMenuModel) { this.hideSubMenus(); // Hide all sub menus this.__deleteMenuItems(idOfParentMenuItem); // Delete old menu items. this.menuItemObj.__appendMenuModel(newMenuModel,idOfParentMenuItem); // Appending new menu items to the menu model. this.__clearAllMenuItems(); this.__createMenuItems(); } // }}} , // {{{ deleteMenuItems() /** * This method deletes menu items from the menu dynamically * * @param Number idOfParentMenuItem - Parent id - parent id of the elements to delete. * @param Boolean deleteParentElement - Should parent element also be deleted, or only sub elements? * * @public */ deleteMenuItems : function(idOfParentMenuItem,deleteParentElement) { this.hideSubMenus(); // Hide all sub menus this.__deleteMenuItems(idOfParentMenuItem,deleteParentElement); this.__clearAllMenuItems(); this.__createMenuItems(); } // }}} , // {{{ appendMenuItems() /** * This method appends menu items to the menu dynamically * * @param Integer idOfParentMenuItem - Parent id - where to append the new items. * @param menuModel newMenuModel - Object of type menuModel. This menuModel will be appended as sub elements of defined idOfParentMenuItem * * @public */ appendMenuItems : function(idOfParentMenuItem,newMenuModel) { this.hideSubMenus(); // Hide all sub menus this.menuItemObj.__appendMenuModel(newMenuModel,idOfParentMenuItem); // Appending new menu items to the menu model. this.__clearAllMenuItems(); this.__createMenuItems(); } // }}} , // {{{ hideMenuItem() /** * This method doesn't delete menu items. it hides them only. * * @param Number menuItemId - Id of the item you want to hide. * * @public */ hideMenuItem : function(menuItemId) { this.menuItem_objects[menuItemId].hide(); } // }}} , // {{{ showMenuItem() /** * This method shows a menu item. If the item isn't hidden, nothing is done. * * @param Number menuItemId - Id of the item you want to show * * @public */ showMenuItem : function(menuItemId) { this.menuItem_objects[menuItemId].show(); } // }}} , // {{{ setText() /** * Replace the text for a menu item * * @param Integer menuItemId - Id of menu item. * @param String newText - New text for the menu item. * * @public */ setText : function(menuItemId,newText) { this.menuItem_objects[menuItemId].setText(newText); } // }}} , // {{{ setIcon() /** * Replace menu icon for a menu item. * * @param Integer menuItemId - Id of menu item. * @param String newPath - Path to new menu icon. Pass blank or false if you want to clear the menu item. * * @public */ setIcon : function(menuItemId,newPath) { this.menuItem_objects[menuItemId].setIcon(newPath); } // }}} , // {{{ __clearAllMenuItems() /** * Delete HTML elements for all menu items. * * @private */ __clearAllMenuItems : function() { for(var prop=0;prop - tag. var url = aTag.href; // url is set to the href attribute of the tag if(url=='#' || url.substr(url.length-1,1)=='#')url=''; // # = empty url. var jsFunction = liTags[no].getAttribute('jsFunction'); // jsFunction is set from the jsFunction attribute of the
- tag with id ' + ulId + ' does not exist');
return;
}
var ulObj = document.getElementById(ulId);
var liTags = ulObj.getElementsByTagName('LI');
for(var no=0;no
- tree
var id = liTags[no].id.replace(/[^0-9]/gi,''); // Get id of item.
if(!id)id = this.__getUniqueId();
try{
this.menuItems[id] = new DHTMLSuite.menuModelItem(); // Creating new menuModelItem object
}catch(e){
alert('Error: You need to include dhtmlSuite-menuModel.js in your html file');
}
this.menuItemsOrder[this.menuItemsOrder.length] = id;
// Get the attributes for this new menu item.
var parentId = 0; // Default parent id
if(liTags[no].parentNode!=ulObj)parentId = liTags[no].parentNode.parentNode.id; // parent node exists, set parentId equal to id of parent