Joomla!中如何使用switcher.js实现一个位置上div层的切换显示 【转】

事实上switch.js在后台使用的场合不少，比如global site configuration页面，在"站点配置","系统配置","服务器配置"这三个页面中切换的时候，就使用的这项功能，我们现在来看看在自己的代码中如何使用这项功能。

首先要引入switcher.js，只需要一行代码：

<?php JHTML::_('behavior.switcher');?>
 

接下来，我们通过实例来看看如何使用，以下是示例代码：

<ul id="submenu">
 <li><a id="site" class="active">Site</a></li>
 <li><a id="system">System</a></li>
 <li><a id="server">Server</a></li>
</ul>
  
<div id="config-document">
 <div id="page-site" style="background-color:red" mce_style="background-color:red">
  site!!!!!!!!!
 </div>  
 <div id="page-system" style="background-color:gray" mce_style="background-color:gray">
  system!!!!!!!!!
 </div>  
 <div id="page-server" style="background-color:blue" mce_style="background-color:blue">
  server!!!!!!!!!
  </div> 
</div>
 

1-5行代码，定义了切换的菜单，而7行以后的代码则定义了切换页面的容器以及三个需要切换的页面，请注意一下这里的元素命名，如果要直接使用switcher.js ，那么这些元素的命名规则应该遵守，规则如下：

1、ul 命名 id为 submenu
2、页面容器 命名 id 为config-document
3、每一个 <a> 对应一个切换页面 div ，命名规则：切换页面的div id是"page-"加上 <a>的 id

遵守以上规则，Joomla!使用switcher.js就特别简单了。

好像com_jam中就使用了switcher.js，不过使用的方式稍有不同，有兴趣的朋友可以看看代码。