Created
April 11, 2012 19:47
-
-
Save joebrislin/2361850 to your computer and use it in GitHub Desktop.
Secondary Navigation Generation for ColdFusion and Twitter Bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <cfoutput> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Bootstrap, from Twitter</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <!-- Le styles --> | |
| <link href="../assets/css/bootstrap.css" rel="stylesheet"> | |
| <link href="../assets/css/secondaryNav.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ | |
| } | |
| </style> | |
| <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> | |
| <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <!-- Le fav and touch icons --> | |
| <link rel="shortcut icon" href="../assets/ico/favicon.ico"> | |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png"> | |
| <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png"> | |
| </head> | |
| <body> | |
| <div class="navbar navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container"> | |
| <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </a> | |
| <a class="brand" href="#">Project name</a> | |
| <div class="nav-collapse"> | |
| <ul class="nav"> | |
| <li class="active"><a href="#">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div><!--/.nav-collapse --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <cfscript> | |
| variables.subItems = []; | |
| arrayAppend( variables.subItems, { title="Parent Level 1", link="/level1" }); | |
| arrayAppend( variables.subItems, { title="Parent Level 2", link="/level2" }); | |
| variables.nestedItems = []; | |
| arrayAppend( variables.nestedItems, { title="Sub Level 1", link="/sublevel1" }); | |
| arrayAppend( variables.nestedItems, { title="Sub Level 2", link="/sublevel2" }); | |
| arrayAppend( variables.nestedItems, { title="Sub Level 3", link="/sublevel3" }); | |
| arrayAppend( variables.subItems, { title="Nested", subItems=variables.nestedItems }); | |
| variables.utilityService = createObject("component", "utility"); | |
| variables.subNav = variables.utilityService.dspSubNavigation( navItems=variables.subItems, selectedItem = cgi.path_info ); | |
| </cfscript> | |
| <div class="subnav subnav-fixed">#variables.subNav#</div> | |
| <h1>Bootstrap starter template</h1> | |
| <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p> | |
| </div> <!-- /container --> | |
| <!-- Le javascript | |
| ================================================== --> | |
| <!-- Placed at the end of the document so the pages load faster --> | |
| <script src="../assets/js/jquery.js"></script> | |
| <script src="../assets/js/bootstrap-transition.js"></script> | |
| <script src="../assets/js/bootstrap-alert.js"></script> | |
| <script src="../assets/js/bootstrap-modal.js"></script> | |
| <script src="../assets/js/bootstrap-dropdown.js"></script> | |
| <script src="../assets/js/bootstrap-scrollspy.js"></script> | |
| <script src="../assets/js/bootstrap-tab.js"></script> | |
| <script src="../assets/js/bootstrap-tooltip.js"></script> | |
| <script src="../assets/js/bootstrap-popover.js"></script> | |
| <script src="../assets/js/bootstrap-button.js"></script> | |
| <script src="../assets/js/bootstrap-collapse.js"></script> | |
| <script src="../assets/js/bootstrap-carousel.js"></script> | |
| <script src="../assets/js/bootstrap-typeahead.js"></script> | |
| </body> | |
| </html> | |
| </cfoutput> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| component{ | |
| /* | |
| * | |
| * @author J. Brislin | |
| * @company BlueRidge Interactive | |
| * @hint Generates the display for sub navigation - required to pass in an array of navItems with the following structure | |
| * | |
| * var subItems = []; | |
| * | |
| arrayAppend( subItems, { title="Parent Level 1", link="/level1" }); | |
| arrayAppend( subItems, { title="Parent Level 2", link="/level2" }); | |
| var nestedItems = []; | |
| arrayAppend( nestedItems, { title="Sub Level 1", link="/sublevel1" }); | |
| arrayAppend( nestedItems, { title="Sub Level 2", link="/sublevel2" }); | |
| arrayAppend( nestedItems, { title="Sub Level 3", link="/sublevel3" }); | |
| arrayAppend( subItems, { title="Nested", subItems=nestedItems }); | |
| subNav = variables.utilityService.dspSubNavigation( navItems=subItems, selectedItem = cgi.path_info ); | |
| * | |
| */ | |
| public string function dspSubNavigation( required array navItems, numeric level = 1, string mainClass="", string activeClass="active", string DDLClass = "", string DDLLinkClass="", string DDLListClass="", string selectedItem = "none", boolean useBootstrap = true ){ | |
| // variable initialization | |
| var cssClass = ""; | |
| var navHtml = ""; | |
| // if using bootstrap - set default classes | |
| if( arguments.useBootstrap ){ | |
| arguments.mainClass = "nav nav-pills"; | |
| arguments.DDLClass = "dropdown"; | |
| arguments.DDLLinkClass = "dropdown-toggle"; | |
| arguments.DDLListClass = "dropdown-menu"; | |
| } | |
| if( arguments.level gt 1 ){ | |
| arguments.mainClass = ""; // only utilize main class for top level of navigation | |
| if( len( trim( arguments.DDLListClass ) ) ) arguments.mainClass = arguments.DDLListClass; // nested levels use Dropdown Class as main class if present | |
| } | |
| // check to see if css class is needed | |
| if( len( trim( arguments.mainClass )) ){ | |
| cssClass = ' class="' & arguments.mainClass & '"'; | |
| } | |
| if( arrayLen( arguments.navItems ) ){ | |
| navHtml &= '<ul' & cssClass & '>'; // open main ul | |
| for( var i=1; i lte arrayLen(arguments.navItems); i++ ){ | |
| var item = arguments.navItems[i]; | |
| // check to see if sub items exist | |
| var hasSubItems = false; // variable reset | |
| if( structKeyExists( item, "subItems" ) ) hasSubItems = true; | |
| /* Open Nav Item */ | |
| navHtml &= '<li'; // open nav item | |
| if( ( hasSubItems && len( trim( arguments.DDLClass ) ) ) || ( structKeyExists( item, "link" ) && arguments.selectedItem contains item.link ) ){ // add necessary css classes - Active & Dropdown | |
| navHtml &= ' class="'; | |
| if( structKeyExists( item, "link" ) && arguments.selectedItem contains item.link ) navHtml &= arguments.activeClass & ' '; | |
| if( hasSubItems && len( trim( arguments.DDLClass ) ) ) navHtml &= arguments.DDLClass & ' '; // append class to generate dropdown if necessary | |
| navHtml &= '"'; | |
| } | |
| navHtml &= '>'; // open nav item - closing bracket | |
| /* Nav Item Link */ | |
| navHtml &= '<a'; | |
| if( hasSubItems && len( trim( arguments.DDLLinkClass ) ) ) navHtml &= ' class="' & arguments.DDLLinkClass & '" data-toggle="dropdown"'; // append class to generate dropdown if necessary | |
| if( structKeyExists( item, "link" ) && len( trim( item.link ) ) ) navHtml &= ' href="' & item.link & '"'; | |
| navHtml &= '>' & item.title; | |
| if( hasSubItems) navHtml &= ' <b class="caret"></b>'; // append caret for dropdown navigation if necessary | |
| navHtml &= '</a>'; | |
| /* SubItem Navigation - recursively build dropdowns n levels */ | |
| if( hasSubItems ){ | |
| navHtml &= THIS.dspSubNavigation( | |
| item.subItems, | |
| arguments.level + 1, | |
| "", | |
| arguments.activeClass, | |
| arguments.DDLClass, | |
| arguments.DDLLinkClass, | |
| arguments.DDLListClass, | |
| arguments.selectedItem | |
| ); | |
| } | |
| /* Close Nav Item */ | |
| navHtml &= '</li>'; // close nav item | |
| } | |
| navHtml &= "</ul>"; // close main ul | |
| } | |
| return navHtml; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment