利用Mootools给Joomla模板添加样式切换【一】

由于一直处于忙碌状态，很多朋友希望能把Joomla178.com的建站过程分享出来，本站将在今后开始讲解以Joomla178.com为实例的建站教程。今天先给大家分享一下如何在Joomla模板的前台添加样式切换功能。（原创文章转载请标明出处，请引用本文地址）
Joomla模板的一些知名开发团队，都在模板前台添加了多样式选择器，无非是通过JS、服务端程序这两种方法实现，由于这些团队开发的模板大多为商业版权，我们就自己动手用Mootools这个JS库来实现样式切换，首先需要介绍这款德国人开发的基于Mootools1.12的Styleswitcher方法（下载，演示）
第一步，下载好Styleswitcher，把其原理弄清楚。
1、先看一下JS方法的代码

注意上述代码的
第4行var stylepath = './style/'; 和第9行的if(a.getAttribute("rel").indexOf('style') != -1 ，这两处的sytle均要换成Joomla的模板CSS目录，也就是：
/templates/jk_fm101/css/ （将jk_Joomla178替换成你使用的模板名）
2、再看body部分的表现代码：

Style1
// Erzeugen eines Link-Elements
// Beim Anklicken wird die Funktion
// Styleswitch ausgelöst

Style2
// Zweiter Style

Style3
// Dritter Style

非常简单的引用，三个鼠标点击事件分别产生切换style1.css，sytle2.css和style3.css，_blank" href="/joomla-templates.html">Joomla模板上！</strong>
1、通常模板主要文件是/templates/jk_Joomla178/index.php （将jk_Joomla178替换成你使用的模板名），打开该文件，添加JS调用，由于Joomla模板开发时有个声明为：，即引用了mootools1.12等多个库，所以无需额外添加mootools1.12的调用，剩下的就是在前面加入修改路径后的代码：

2、制作三个样式表green.css、blue.css、yellow.css，内容分别填入 body{background:green;}、body{background:blue;}、body{background:yellow;}，注意一定要去除template.css中的body背景色，否则template.css的背景色优先级较高，可能不会产生样式切换效果，做好了三个样式表保存在/templates/jk_Joomla178/css/下（将jk_Joomla178替换成你使用的模板名），三个样式表还需要设定其中一个为默认样式，否则初次进入网站无默认背景色！以green.css为默认背景色示例，在样式引用

green
yellow
blue

4、注意事项，该mootools方法是基于mootools1.11，兼容mootools1.12，所以Joomla后台中的mootools upgrade不可开启，开启后mootools的版本会变成mootools1.24，另外测试支持cookies时一定要清除浏览器的cookies。