由于一直处于忙碌状态,很多朋友希望能把Joomla178.com的建站过程分享出来,本站将在今后开始讲解以Joomla178.com为实例的建站教程。今天先给大家分享一下如何在Joomla模板的前台添加样式切换功能。(原创文章转载请标明出处,请引用本文地址)

Joomla模板的一些知名开发团队,都在模板前台添加了多样式选择器,无非是通过JS、服务端程序这两种方法实现,由于这些团队开发的模板大多为商业版权,我们就自己动手用Mootools这个JS库来实现样式切换,首先需要介绍这款德国人开发的基于Mootools1.12的Styleswitcher方法(下载演示

第一步,下载好Styleswitcher,把其原理弄清楚。

1、先看一下JS方法的代码

<script type="text/javascript">
function styleswitch(mode, setstyle){
var i, a;
var stylepath = './style/';
// setting the path to the CSS directory
var cookstyle = Cookie.get('Stylesheet');
// getting current cookie value for the stylesheet
if (cookstyle == false ) {
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf('style') != -1
&& a.getAttribute("media").indexOf('screen') != -1
&& a.getAttribute("title")
// find default stylesheet, which is defined in the head section of the document
) {
cookstyle = a.getAttribute("title");
Cookie.set('Stylesheet', cookstyle, {duration:365, path:"/"});
//set the default stylesheet as cookie value
}
}
}

switch (mode) {
case 'set' :
new Asset.css(stylepath + setstyle +'.css', {id: setstyle});
// loads the new stylesheet
Cookie.set('Stylesheet', setstyle, {duration:365, path: "/"});
// sets the stylesheet into a cookie value
break;
case 'noset' :
new Asset.css(stylepath + setstyle +'.css', {id: setstyle});
// only apply the new stylesheet, without saving it in a cookie value
break;
default :
new Asset.css(stylepath + cookstyle +'.css', {id: cookstyle});
/ sets the current cookie value as active stylesheet
break;
}
return null;         
}
window.addEvent('domready', styleswitch);
</script>

注意上述代码的

第4行var stylepath = './style/'; 和第9行的if(a.getAttribute("rel").indexOf('style') != -1 ,这两处的sytle均要换成Joomla的模板CSS目录,也就是:

<?php echo $this->baseurl ?>/templates/jk_fm101/css/ 
(将jk_Joomla178替换成你使用的模板名)

2、再看body部分的表现代码:

<body>
<a href="#" onclick="styleswitch('set', 'style1'); return false;">Style1</a>
// Erzeugen eines Link-Elements
// Beim Anklicken wird die Funktion
// Styleswitch ausgelöst

<a href="#" onclick="styleswitch('set', 'style2'); return false;">Style2</a>
// Zweiter Style

<a href="#" onclick="styleswitch('set', 'style3'); return false;">Style3</a>
// Dritter Style
</body>

非常简单的引用,三个鼠标点击事件分别产生切换style1.css,sytle2.css和style3.css,onclick="styleswitch('set',style1')  这里的set作者给的解释便是支持cookies,如果希望不支持cookies,就将三个set换成noset即可!

第二步,装到Joomla模板上!

1、通常模板主要文件是/templates/jk_Joomla178/index.php (将jk_Joomla178替换成你使用的模板名),打开该文件,添加JS调用,由于Joomla模板开发时有个声明为:<jdoc:include type="head" />,即引用了mootools1.12等多个库,所以无需额外添加mootools1.12的调用,剩下的就是在</head>前面加入修改路径后的代码:

<script type="text/javascript">
function styleswitch(mode, setstyle){
var i, a;
var stylepath = 'baseurl ?>/templates/jk_Joomla178/css/';
// setting the path to the CSS directory
var cookstyle = Cookie.get('Stylesheet');
// getting current cookie value for the stylesheet
if (cookstyle == false ) {
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf('baseurl ?>/templates/jk_Joomla178/css/') != -1
&& a.getAttribute("media").indexOf('screen') != -1
&& a.getAttribute("title")
// find default stylesheet, which is defined in the head section of the document
) {
cookstyle = a.getAttribute("title");
Cookie.set('Stylesheet', cookstyle, {duration:365, path:"/"});
//set the default stylesheet as cookie value
}
}
}

switch (mode) {
case 'set' :
new Asset.css(stylepath + setstyle +'.css', {id: setstyle});
// loads the new stylesheet
Cookie.set('Stylesheet', setstyle, {duration:365, path: "/"});
// sets the stylesheet into a cookie value
break;
case 'noset' :
new Asset.css(stylepath + setstyle +'.css', {id: setstyle});
// only apply the new stylesheet, without saving it in a cookie value
break;
default :
new Asset.css(stylepath + cookstyle +'.css', {id: cookstyle});
/ sets the current cookie value as active stylesheet
break;
}
return null;         
}
window.addEvent('domready', styleswitch);
</script>

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为默认背景色示例,在样式引用

<link rel="stylesheet" href="/baseurl ?>/templates/jk_Joomla178/css/template.css" type="text/css" />

下方加入

<link rel="stylesheet" href="/baseurl  ?>/templates/jk_Joomla178/css/green.css" title="green" type="text/css" media="screen" />

这里的title="green"是关键

3、做完JS,就需要在body部分加入表现代码(以支持cookies为例,不支持cookies请将下述代码中的set换成noset即可)


<a href="#" onclick="styleswitch('set', 'green'); return false;">green</a>
<a href="#" onclick="styleswitch('set', 'yellow'); return false;">yellow</a>
<a href="#" onclick="styleswitch('set', 'blue'); return false;">blue</a>

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

除特殊标明文章转自第三方网站,文章均由JOOMLASK.COM原创提供
欢迎友情转载,请务必保留本文出处并引用本文链接: 利用Mootools给Joomla模板添加样式切换【一】