com_admin组件-系统信息功能 效果 关键代码 (HTML_admin_misc代码) function system_info( ) { global $mainframe; //Load switcher behavior //加载切换Js,用户点击二级模块,切换不同信息显示 JHTML::_('behavior.switcher'); $db =& JFactory::getDBO(); $contents = ''; ob_start(); //包含二级菜单信息 require_once(JPATH_COMPONENT.DS.'tmpl'.DS.'navigation.php'); $contents = ob_get_contents(); ob_clean(); $document =& JFactory::getDocument(); // 二级模块内容 $document->setBuffer($contents, 'modules', 'submenu'); ?> <form action="index.php" method="post" name="adminForm"> <div id="config-document"> //对应二级菜单page-相应id <div id="page-site"> <table class="noshow"> <tr> <td> <?php require_once(JPATH_COMPONENT.DS.'tmpl'.DS.'sysinfo_system.php'); ?> </td> </tr> </table> </div> //对应二级菜单page-相应id <div id="page-phpsettings"> <table class="noshow"> <tr> <td> <?php require_once(JPATH_COMPONENT.DS.'tmpl'.DS.'sysinfo_phpsettings.php'); ?> </td> </tr> </table> </div> //对应二级菜单page-相应id <div id="page-config"> <table class="noshow"> <tr> <td> <?php require_once(JPATH_COMPONENT.DS.'tmpl'.DS.'sysinfo_config.php'); ?> </td> </tr> </table> </div> //对应二级菜单page-相应id <div id="page-directory"> <table class="noshow"> <tr> <td> <?php require_once(JPATH_COMPONENT.DS.'tmpl'.DS.'sysinfo_directory.php'); ?> </td> </tr> </table> </div> //对应二级菜单page-相应id <div id="page-phpinfo"> <table class="noshow"> <tr> <td> <?php require_once(JPATH_COMPONENT.DS.'tmpl'.DS.'sysinfo_phpinfo.php'); ?> </td> </tr> </table> </div> </div> <div class="clr"></div> <?php } ?> 二级菜单 关键代码 (navigation.php代码) <div class="submenu-box"> <div class="submenu-pad"> <ul id="submenu" class="information"> <li> <!-- 如果此处id为site, 那么对应的切换div层id则为page-site(导入的switcher.js中设置) 同理如下--> <a id="site" class="active"> <?php echo JText::_( 'System Info' ); ?></a> </li> <li> <!-- 如果此处id为phpsettings, 那么对应的切换div层id则为page-phpsettings(导入的switcher.js中设置)--> <a id="phpsettings"> <?php echo JText::_( 'PHP Settings' ); ?></a> </li> <li> <a id="config"> <?php echo JText::_( 'Configuration File' ); ?></a> </li> <li> <a id="directory"> <?php echo JText::_( 'Directory Permissions' ); ?></a> </li> <li> <a id="phpinfo"> <?php echo JText::_( 'PHP Information' ); ?></a> </li> </ul> <div class="clr"></div> </div> </div> 导入switcher.js库 关键代码 (switcher.js代码,前提要导入mootools.js库) var JSwitcher = new Class({ toggler : null, //holds the active toggler page : null, //holds the active page options : { cookieName: 'switcher' }, initialize: function(toggler, element, options) { this.setOptions(options); var self = this; togglers = $ES('a', toggler); for (i=0; i < togglers.length; i++) { //指定二级菜单相应链接点击事件处理函数,this看清楚,是当前事件中,所以this表示单个二级菜单项 togglers[i].addEvent( 'click', function() { self.switchTo(this); } ); } //hide all elements = element.getElements('div[id^=page-]'); for (i=0; i < elements.length; i++) { //隐藏所有切换层 this.hide(elements[i]) } //返回默认展示二级菜单 this.toggler = $E('a.active', toggler); //返回相应切换层 this.page = $('page-'+ this.toggler.id); //显示当前激活的层 this.show(this.page); if (this.options.cookieName) { //如果在cookie中存在,则显示cookie中值 if((page = Cookie.get(this.options.cookieName))) { this.switchTo($(page)); } } }, //切换函数,此处toggler代表单个二级菜单项对象 switchTo: function(toggler) { page = $chk(toggler) ? $('page-'+toggler.id) : null; //如果当前要显示层,不等于已经显示的层 if(page && page != this.page) { //hide old element //隐藏已经显示层 if(this.page) { this.hide(this.page); } //show new element //显示新层 this.show(page); //二级菜单样式操作 toggler.addClass('active'); if (this.toggler) { this.toggler.removeClass('active'); } this.page = page; this.toggler = toggler; Cookie.set(this.options.cookieName, toggler.id); } }, //隐藏函数 hide: function(element) { element.setStyle('display', 'none'); }, //显示函数 show: function (element) { element.setStyle('display', 'block'); } }); JSwitcher.implement(new Options); document.switcher = null; window.addEvent('domready', function(){ //二级菜单层对象 toggler = $('submenu') //切换层对象 element = $('config-document') if(element) { document.switcher = new JSwitcher(toggler, element, {cookieName: toggler.getAttribute('class')}); } });