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

本文主要是介绍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，不过使用的方式稍有不同，有兴趣的朋友可以看看代码。

 

这篇关于Joomla!中如何使用switcher.js实现一个位置上div层的切换显示 【转】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---