欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery 前臺(tái)切換網(wǎng)站的樣式實(shí)現(xiàn)

 更新時(shí)間：2009年06月22日 13:22:42   作者：  
本文說的是在WordPress中怎樣利用JQuery在網(wǎng)站的前臺(tái)切換樣式的方法?；蛘哌@篇文章的方法大家可能不是太需要，因?yàn)槲矣X得這是解決我被主題樣式折騰到差不多分裂的原因及結(jié)果的最后手段。
但如果你想為網(wǎng)站添加多一些樣式，讓訪客選擇；又或者你想調(diào)整一下網(wǎng)站的樣式，而在決定前讓訪客先體現(xiàn)的話，這也是一個(gè)很好的辦法，省去總是切換主題的痛苦。
切換效果參照本站。
1. 切換樣式的按鈕代碼：
復(fù)制代碼 代碼如下:

<div id="style-switch">
<ul>
<li><a href="#?style=white" rel="white" class="styleswitch white">Day</a></li>
<li><a href="#?style=black" rel="black" class="styleswitch black">Night</a></li>
</ul>
</div>

上面的按鈕代碼請(qǐng)根據(jù)你的網(wǎng)站設(shè)計(jì)放置。比如在我這里是放到header.php文件中的。
2. 樣式引用代碼：
復(fù)制代碼 代碼如下:

<?php if($_COOKIE['style'] == 'black') : ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" />
<?php else : ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/white.css" title="white" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/black.css" title="black" media="screen" />
<?php endif; ?>

在這里我簡(jiǎn)單說明一下：
因?yàn)樵诤竺娴膉s代碼中會(huì)于瀏覽器的cookie部分寫入一個(gè)cookie記錄“style”，所以在這里我會(huì)讓瀏覽器根據(jù)記錄進(jìn)行樣式的調(diào)用（這里為兩個(gè)樣式，一個(gè)“white”，另一個(gè)“black”）。
當(dāng)瀏覽器存在“style”的cookie記錄，并記錄為“black”時(shí)候，則先讀取black.css文件，這可以說是主樣式文件；及后再讀取輔助樣式（就是供需要切換的樣式），white.css。
如果瀏覽器沒有任何“style”的樣式cookie記錄，或者“style”的樣式cookie記錄為“white”時(shí)候，則主題先讀取white.css文件，再讀取black.css文件。
在這里需要補(bǔ)充的是，使用PHP的cookie讀取會(huì)比使用js的cookie讀取更為有效。因?yàn)槲以瓉硎抢胘s進(jìn)行cookie的讀取動(dòng)作，但由于js的加載還是需要那么一點(diǎn)時(shí)間，所以在切換樣式后的頁面瀏覽中并不完美。如果你以前發(fā)現(xiàn)選擇黑色主題后，再瀏覽頁面，會(huì)出現(xiàn)先是一瞬間的白色主題，然后才是黑色主題的現(xiàn)象。這就是我要說明的情況了。現(xiàn)在使用PHP代碼則不再存在這個(gè)不足。
3. Javascript部分代碼：（注意前提是你已經(jīng)在網(wǎng)站中調(diào)用了JQuery庫）
復(fù)制代碼 代碼如下:

(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function() {
$('body').append('<div id="overlay" />');
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '2000%',
zIndex: 1000,
background: 'black'
})
.fadeIn(500);
switchStylestyle(this.getAttribute("rel"));
$('#overlay').fadeOut(500);
return false;
});
});
function switchStylestyle(styleName)
{setTimeout(function() {
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});}, 500);
createCookie('style', styleName, 365);
}
})(jQuery);

上面的部分是點(diǎn)擊動(dòng)作部分。我在中間添加了一段#overlay的塊樣式是為了在切換過程中制作一個(gè)燈箱效果，這樣會(huì)比突然的切換來得更為自然。
然后還需要添加產(chǎn)生cookie記錄的功能代碼：
復(fù)制代碼 代碼如下:

function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

還有添加刪除cookie記錄的功能代碼：
復(fù)制代碼 代碼如下:

function eraseCookie(name)
{
createCookie(name,"",-1);
}

到此，完成上面三部后就可以了，希望大家看得明白。

相關(guān)文章

最新評(píng)論