To implement advanced JavaScript functionality in your navigation elements, you can use the JSPortalmenu framework. The JSPortalmenus framework provides native JavaScript objects to create menu tabs and dropdown menus. The framework uses common jscomponent functionality in jsutil, reducing the size of JavaScript files downloaded by the browser. The total download size of the JSPortalmenus JavaScript and CSS files is approximately 85 KB.
The major feature of the JSPortalmenus framework is that form elements do not burn through the dropdown menus in Internet Explorer browsers, a typical problem with most other dropdown menu frameworks. This behavior is not an issue in Netscape 7.x and Firefox browsers. The JSPortalmenus framework also supports older Netscape browsers, (4.x and 6.x) but burn-through of form elements does happen in these browsers.
The portal uses JSPortalmenus in main portal navigation and in portlet title bars.
To create a single tab with a dropdown menu, follow the steps below:
Include JavaScript files on the page. JSPortalmenu files must be included through the jsincluder component.
On the server side,
as in a navigation scheme, use ConfigHelper.GetJSIncluderJSComponentInclude
with ConfigHelper.JSCOMPONENT_JSPORTALMENU as the component
name.
In a portlet, use
the jsincluder adaptive tag: <pt:ui.include pt:name="jsportalmenus"/>
Both methods will generate JavaScript to include the jsportalmenus. Manually adding the generated JavaScript is not supported since it might change in future releases.
Define an HTML Container element with an ID where the menu should be displayed. For example:
<table><tr><td
ID="menuCell1"></td></tr></table>
Create a menu object, add entries to the menu, add the menu to a menu tab object, and associate the HTML block ID with the menu tab object.
Create a menu object:
var
menu = new PTPMMenuContainer();
Add entries to the menu (container menuItems is an array):
for
(var j = 0; j < somearray.length; j++)
{
var strTitle = ...;
var strImgSrc = ...;
var strImgWidth = ...;
var strURL = ...;
menu.menuItems[j] = new PTPMSimpleMenuItem();
menu.menuItems[j].text = strTitle;
menu.menuItems[j].image = new PTPMImage();
menu.menuItems[j].image.imgSrc = strImgSrc;
menu.menuItems[j].image.imgWidth = strImgWidth;
menu.menuItems[j].action = new PTPMJavaScriptAction();
menu.menuItems[j].action.js = 'window.location = "'+strURL+'"';
}
Set tab content (HTML is allowed):
var
buttonText = "My Menu";
Add the menu to a menu tab object (static call). Assign tab content and provide the ID of the HTML element where the tab HTML should be inserted.
PTPMSelectMenu.init(menu,
strDivID, buttonText);
This function should only be called after the HTML container has been rendered on the page.
For information on how the JSPortalmenus framework is used in standard portal navigation, see the Knowledge Base article Plumtree Portal JSPortal Menu Framework.