Set the active menu option in an (Extension Library) Navigator control

Language

JavaScript (Client)

Tags

Author

Mark Leusink

Submitted on

November 20, 2012 at 9:44 AM

Rating

Downloads

Notes

If you use the Navigator control from the Extension Library in combination with the Dynamic Content control, you'll want to use a partial refresh of that Dynamic Content control when the user clicks a menu option. The problem then is that the selected menu option from the Navigator control isn't highlighted (since only the Dynamic Content is refreshed).

This snippet fixes that by calling a clientside Javascript function when clicking a menu option that sets the required lotusSelected class.

To use this code: add it to an Output Script control on a page that uses the Navigator and the Dynamic Content control. I've created it for a OneUI layout, but you can probably adapt it for other frameworks too.

//add a clientside onclick event to all navigator options that sets the active option
//replace 'navigator1' with the id of your navigator
dojo.addOnLoad( function() {
	dojo.query("li", dojo.byId("#{id:navigator1}") ).forEach( function(navNode) {
		dojo.query("a", navNode).connect("onclick", function() {
		
			//clear lotusSelected class from all navigation options
			dojo.query("li", dojo.byId("#{id:navigator1}") ).removeClass("lotusSelected");
			
			//mark current node as selected
			dojo.addClass(navNode, "lotusSelected"); 
		});
	});
});

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...