靈感來自牛逼的 Shawn，他博客上面的他自己的評論都是在左側加了空心的星星，但是他的最後回覆則是綠色的星星，這樣給訪客的感覺就是作者只回覆到了這裡，或者換種理解的意思就是“已閱到這個評論”，有點類似論壇裡面可能常看到的“已閱至此樓”的插件功能。當然你也可能會覺得這個功能無足輕重，但是我覺得還是挺有意思的，可以讓訪客知道作者有多久沒來過了，因為一般來說，看到自己的博客有人評論的話肯定會先回覆的吧。

本人的 jQuery 也都是些皮毛功夫，代碼寫得不好也見笑了，歡迎批評指正。

如果還不是很明白這個功能所表達的意思的話，你可以先看看下面這個截圖。

就如截圖種的這樣，只是給某篇日誌該作者的最後評論回覆加一個標註，可以是一個圖片也可以是一些提醒文字，本文講的是用圖片來標註的。請接著往下看。

準備工作：

首先得確定你的主題中評論頁面裡面，作者的評論和訪客的評論是否具有不同的樣式，比如我的評論區域訪客的 class=”comments”，而作者的評論樣式是 class=”comments”，不然下文就不能判斷並篩選出作者的評論了。如果發現自己的主題並沒有這樣的設計，那麽你可以 google 下怎麽設計這個功能代碼，或者可以參考我提供給你的方法。

區分作者評論和訪客評論的樣式方法：
打開 comments.php 頁面，在任意処加入以下代碼(必須在評論輸出的代碼片段之前)，比如我的每一個評論都是用 li 標簽來包裹的，那麽你可以選擇加在以下代碼之前

1

<li class="<?php echo $oddcomment; ?> comments ?>" id="comment-<?php comment_ID() ?>">

修改後的代碼

1
2
3
4
5
6
7

<?php
	$isByAuthor = false;
	if($comment->comment_author_email == 'xxxxxx@gmail.com' ) {
		$isByAuthor = true;
	}
?>
<li class="<?php echo $oddcomment; ?> comments<?php if($isByAuthor ) { echo "-author"; } ?>" id="comment-<?php comment_ID() ?>">

將上面的代碼中的email地址修改為你自己的 email，代碼的作用就是判斷你填寫的 email 來區別你的評論與訪客的評論。

完成了以上的準備工作之後下面就開始進入本文的重點了。請看以下這段代碼：

1
2
3
4
5
6

<script type="text/javascript">
$(document).ready(function(){
var lastbyauthor = $('ol.thecomments').find('.comments-author:last');
$(lastbyauthor).css({"background":"#FAFAFA url(images/lastbyauthor.png) right 10px no-repeat"}).attr('name','lastbyauthor').find('div.commentcount a').attr({title:"作者最後的評論回覆"});
})
</script>

將以上的代碼加入到你模板文件的 或者 之前即可，當然你也可以加入到自己的 js文件裏。

我大致講解下這段 jQuery 代碼，我這裏定義一個變量 lastbyauthor，$(‘ol.thecomments’) 就是你的評論顯示區域的外面所包裹的標記，大部分主題都是用 ol 標記的，然後在這段 ol 所包裹著的代碼中用 find() 函數查找出最後的一個 樣式為 class=”comments-author” 的那段評論。然後對這段評論的樣式進行特殊的 css。懂的人可能看出來了我這裏還定義了一個 name 屬性，名字為 lastbyauthor，這是為了給作者最後的評論添加錨標簽用的，不用 id 是因為每一個評論都已經擁有一個數據庫生成的評述數了。

比如你可以在評論模板的任何地方添加以下代碼：

追蹤作者<a href="#lastbyauthor" style="color:red">最後的軌跡</a>!

效果：點擊後面的紅色文字追蹤作者最後的軌跡!

當然，你還需要準備一張類似如下的醒目提醒圖片：

是不是覺得很簡單。不知道對於新手的話我說得是不是夠詳細了，如果還有不明白的可以給我回復，我都將一一耐心講解回復，謝謝惠顧！

本文地址:http://leeiio.me/jquery-last-by-author/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 升级版！Cookies 记录你的 Wordpress 侧边栏关闭/显示的状态 (34)
• 关闭/显示你的 Wordpress 侧边栏，享受阅读快感 (75)
• jQuery 1.4 发布，一些更新和改进，性能大幅度提升！ (33)
• 美化 Wordpress 标题，个性字体生成图片标题插件推荐！ (106)
• Sweet Titles for jQuery (美妙的标题提示) ! (50)
• 新书《锋利的 jQuery》 (22)
• 改善网站体验小细节，点击改变链接的文本! (30)

讓頁面頭部最後加載，說到底就是控制網頁內容的加載順序，好處 5key 已經在他的博文里提過了，但是我覺得好處不單單是他提到的那些，我再歸納一下吧。因為考慮到你的網頁可能會調用很多外部的 js 文件，主要來自與各大服務商的各大服務調用，比如 Feedsky 的訂閱數圖標，比如一款叫做鲜果推荐按钮的 WP 插件(以前我的 blog 經常因為鮮果網站當機而導致加載卡在一個地方好久下不來)，又比如現在很流行的 Twitter 的 Api 輸出狀態信息以及 google friend connect 的掛件等等等諸如此類的服務，因為都是外部調用的，誰也無法保證服務商隨時當機的可能性。而同時我們又知道網頁默認的加載順序都是從上至下加載的。所以這時候通過 css 絕對定位那些外部調用的服務就顯得很有用處，把那些調用寫到網頁的底部去，這樣網頁加載的時候就不會卡住了，然後通過 css 的 position:absolute 絕對定位到網頁的顯示位置去，此法不錯，這時候 Evance 同學說話了，他認為 css 的絕對定位不應該被用作排版而该用来结构内容，我的觀點是絕對定位雖然定位很精確，但是如果你需要定位的那些東西都是很零散地分佈在網頁各處的話，我想這有得你忙的了。

當然改變網頁內容的加載順序的好處還沒有說完，他同時也可以 SEO 你的頁面，可能有些同學已經抱著這個目的在各自的網站實施了，對那些還沒明白過來的同學們我這里就說說吧。

因為你知道網頁的加載順序是從上往下的，而搜索引擎爬蟲爬取你的網頁的順序也是從上往下的。
所以讓一些不想出現在網頁頭部而遮擋了頁面正文的那些網頁內容我們統統可以移到頁面底部去，這樣爬蟲爬你網頁的時候最先獲取的才有可能是你的頁面正文內容。當然你可能要說我有在 head 里加入 description 啊，並且正文標題也是 H1 標記的，搜索引擎應該會先考慮這些吧，我只想說的是任何 SEO 的技巧都是拿來參考的，并不是那麼絕對的事情，除非你是某家搜索引擎公司的核心技術開發，隨時可以掌握搜索引擎的脾氣。

目前我的博客的做法是頂部導航以及頭部 banner 因為是一整個 DIV 包著的，並且在頁面頂部，所以很容易就用 css 絕對定位搞定了。至於文章頁面的標題下面的 meta 信息(發佈時間及分類等)，我是用另外一種方法實現的。那就是 jQuery。

標題未加載完全

標題加載完全

先看這個 Demo 框架，比較簡陋，主要說說 jQuery 實現的原理。

1
2
3
4
5
6
7
8

<div id="header">啦啦啦</div>
<div id="main">
	<div class="title"></div>  
	<div class="meta"></div> //這裡是先佈局定位好，然後jQuery會將放在footer的meta複製到class="meta"的div裡面 
        </div>  
<div id="footer">  
<div class="metac">我是文章的meta信息</div>  
</div>

jQuery 代碼：

1
2
3

<script type="text/javascript">
$('.metac').children().clone().appendTo('.meta');
</script>

當然也可以這樣寫:

1
2
3
4

<script type="text/javascript">
var clonemeta = $('.metac').html();
$(clonemeta).appendTo($('.meta'));
</script>

其實，還可以寫成這種簡潔的形式( xiaorsz提供 )

1
2
3

<script type="text/javascript">
$('meta').html($('#metac').html());
</script>

當然還需要一個 css，不然底部的 class=”metac” 的 Div 圖層也會顯示出來了。

1

.metac{ display:none }

實現原理:

正如那個簡陋的 demo 代碼所示，本來在 class=”title” 的下面有個 class=”meta” 的 div，但是他是空的，他的作用就是佔位佈局並且接收放在 id=”footer” 的 div 裡面的 class=”metac” 的 div 里的內容。當然 class=”metac” 的 div 是可以隨意擺放的，這樣就達到了改變網頁內容的加載及顯示順序的目的。

是不是很簡單。只消用 jQuery 的 clone() 函數就可以搞定這個效果。

此法的弊病就是加入瀏覽器不支持 js 或者禁用 js 的話那就玩兒完了。另外改變了網頁內容的加載順序之後，可能會造成頁面加載的時候給客戶帶來不美觀的感受，畢竟一塊一塊的空白給人的感覺肯定不會很好。

本人是 jQuery 初學者，代碼寫的如果不是最好的表達方式，請指正。

本文地址:http://leeiio.me/jquery-changes-divsorder/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• jQuery 1.4 发布，一些更新和改进，性能大幅度提升！ (33)
• Sweet Titles for jQuery (美妙的标题提示) ! (50)
• 新书《锋利的 jQuery》 (22)
• 改善网站体验小细节，点击改变链接的文本! (30)
• 用 jQuery 制作模拟下拉框，改变你的下拉框样式 (24)
• 升级版！Cookies 记录你的 Wordpress 侧边栏关闭/显示的状态 (34)
• 关闭/显示你的 Wordpress 侧边栏，享受阅读快感 (75)

本文地址:http://leeiio.me/maczine-2009/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 放飛你的MAC (8)

任何的平鋪直敘都抵不住你我的激動人心以及非比尋常。
LOGO V1成品，此致敬礼。
敬请期待。

本文地址:http://leeiio.me/flymac/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 每天都有新的故事。 (1)
• 一個公益廣告。 (1)
• 幸福大街網樂第二期:蔚藍了天，飄散夢想。 (0)
• 幸福大街網樂第一期:祗是天空褪了色。 (1)
• MacZine In Jan 30TH, 2009 (17)
• PHP判斷客戶端瀏覽器的語言，加強後續用戶體驗 (16)
• jQuery滑動伸縮導航改善你的側邊欄 (20)

因為本站使用的是繁體漢字，而我們大陸的大部分人都是使用的簡體漢字，所以我在頂端導航處加了“繁簡切換”功能。考慮到更好的用戶體驗，所以我決定在正文部分加上一些警示文字。但是呢，如果來訪的用戶如果是台灣或者香港地區的，那麼警示文字顯得有些多餘且沒必要，所以需要對其進行語言判斷。網上很多用到的方法大都是對來訪的ip進行判斷，但是如果用戶使用了代理或者在外等一些情況，那麼可能會顯得有些不准確。所以我考慮了下通過瀏覽器的語言設置進行判斷，雖然說不能排除某一小部分人可能喜歡用英文的語言設置，但是大部分還是奏效的。

實現的原理：

瀏覽器發給web服務器的 HTTP Headers Information 中包含了這樣一個信息 Accept-Language這個信息就是，瀏覽器中 工具->Internet選項->常規 下的 語言，它就是用來設置瀏覽器可接受的語言首選項的， 它可以是多種可接受語言的優先排序列。
　　以PHP為例，用戶可接受的語言信息，放在$_SERVER['HTTP_ACCEPT_LANGUAGE']裏，變量信息是類似這樣的 “zh-cn”，如果是多語言列，是類似 “zh-cn,en;q=0.8,ko;q=0.5,zh-tw;q=0.3″這樣的情況。

戳我進入判斷當前使用的瀏覽器的語言設置

因為本人對php幾乎一竅不通，當時就直接用if語句寫個個判斷，如下:

1
2
3
4
5
6

<?
if($_SERVER['HTTP_ACCEPT_LANGUAGE']=="zh-cn" )
{
echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，謝謝 !";//当是簡體中文的时候
}
?>

但是你的瀏覽器可能并不是只有一種語言設置，例如firefox默認的語言設置就是zh-cn,zh;q=0.5,opera國際版的是zh-CN,en;q=0.9,fr;q=0.8,ja;q=0.7,de;q=0.6,es;q=0.5,it;q=0.4,pt;q=0.3,pt-PT;q=0.2,nl;q=0.1,sv;q=0.1,nb;q=0.1,da;q=0.1,fi;q=0.1,ru;q=0.1,pl;q=0.1,zh-TW;q=0.1,ko;q=0.1，所以此法並不可取。google了近半個小時，查到了php的preg_match()函數，大體就是可以自定義一個規則來和某一個參數進行匹配，所以判斷的語句修改成如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
error_reporting(E_ALL ^ E_NOTICE);
 
preg_match('/^([a-z\-]+)/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $matches);// 分析 HTTP_ACCEPT_LANGUAGE 的屬性
$lang = $matches[1];// 取第一語言設置
 
switch ($lang) {
        case 'zh-cn' :
                echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，谢谢 !";
                break;
        default:
                echo "經雷達探測，您使用的語言目前超出本站的想像範圍，您確定您看得懂中文?";
                break;
}
?>

部分瀏覽器的語言顯示大小寫可能有問題，比如我所使用的opera顯示的是zh-CN，所以我們要繼續完善它，成品如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?php
error_reporting(E_ALL ^ E_NOTICE);
 
preg_match('/^([a-z\-]+)/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $matches);// 分析 HTTP_ACCEPT_LANGUAGE 的屬性
$lang = $matches[1];// 這裏只取第一語言設置 （其他可根據需要增強功能，這裏只做簡單的方法演示）
 
switch ($lang) {
        case 'zh-cn' :
                echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，谢谢 !";
                break;
        case 'zh-CN' :
                echo "经雷达探测，您使用的语言为新中国的简体汉字，为避免晕车，请使用顶端导航的繁简切换功能，谢谢 !";
                break;
        case 'zh-hk' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'zh-HK' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'zh-tw' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'zh-TW' :
                echo "經雷達探測，您使用的語言為中國傳統繁體漢字，為本站所推崇文字，祝您旅途愉快!";
                break;
        case 'en-us' :
                echo "經雷達探測，您使用的語言為英文，您確定你看得懂中文?";
                break;
        default:
                echo "經雷達探測，您使用的語言目前超出本站的想像範圍，您確定您看得懂中文?";
                break;
}
 
?>

具體的效果可見本blog的文章上端的提示文字，或者把代碼存成php放在自己網絡空間測試。如發現顯示不準確，請訪問http://guaniu.com/test/lang.php探測你的瀏覽器的語言設置，然後給我回覆，謝謝！

本文地址:http://leeiio.me/php-browser-lang/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 放飛你的MAC (8)
• 更換WP的永久鏈接不用怕，教你如何跳轉 (14)
• jQuery滑動伸縮導航改善你的側邊欄 (20)
• 我是一個404小機器人。 (19)
• 每天都有新的故事。 (1)
• 一個公益廣告。 (1)
• 兩個小消遣。 (0)

下面切入正題，先看看這段代碼:

1
2
3
4
5

$(document).ready(function(){
	$(".title").click(function(){
		$(".content").slideToggle("slow");$(this).toggleClass("off")
	});
});

很簡單的一段代碼，功能也能簡單。實現的原理就是當鼠標點擊樣式為.title的元素後，對樣式為.content的元素進行伸或縮的操作，並且改變原來被點擊的元素的樣式，這樣的用戶感受度就不錯了，可以讓用戶對哪些是可以點擊伸縮的元素一目了然。

下面的是一個sample的完整代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>伸縮導航</title>
<style type="text/css">
body{background:#000}
div,h2{padding:0px;margin:0}
.title{width:180px;background:#ccc;height:20px;line-height: 20px; font-size:12px;text-align:center;}
.off {background:#777;color:#fff}
.content{width:170px;height:300px;font-size:12px;background:#fff;padding:5px;}
</style>
<script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".title").click(function(){$(".content").slideToggle("slow");$(this).toggleClass("off")});
});
</script>
</head>
<body>
 
 
<h2 class="title">我是一个可点击标题</h2>
<div class="content">
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。<br />
<strong>返回值:</strong>jQuery<br />
<strong>参数:</strong><br />
speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
callback (Function) : (可选) 在动画完成时执行的函数
</div>
</body>
</html>

代碼很簡單，本人的處子jQuery，多謝捧場！～

本文地址:http://leeiio.me/jquery-sidebar-list/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• jQuery 1.4 发布，一些更新和改进，性能大幅度提升！ (33)
• 5个插件让你的 Wordpress 成为一个多语种网站 (27)
• 两个免费的Wordpress Cheat Sheet [PDF] (16)
• Sweet Titles for jQuery (美妙的标题提示) ! (50)
• 新书《锋利的 jQuery》 (22)
• 改善网站体验小细节，点击改变链接的文本! (30)
• 用 jQuery 制作模拟下拉框，改变你的下拉框样式 (24)

只是一個flash試驗作品。僅供個人娛樂

本文地址:http://leeiio.me/404-robot/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 放飛你的MAC (8)
• PHP判斷客戶端瀏覽器的語言，加強後續用戶體驗 (16)
• jQuery滑動伸縮導航改善你的側邊欄 (20)
• 每天都有新的故事。 (1)
• 一個公益廣告。 (1)
• 兩個小消遣。 (0)
• 論壇新風格搞定！ (2)

該插件的原作者是Taha Paksu,原版本的音樂封面圖片碩大，可能並不適合有些wordpress的sidebar比較窄的，所以我就修改了圖片尺寸為32px,但是圖片修改小了之後，原來的本來三行的信息就擺起來不好看了，於是我一併修改了插件。音樂曲目名考慮到有些歌名太長，把div擠坏，所以我就去掉了，況且鼠標移動到圖片上是可以顯示該首歌信息的。調整了一些小細節，具體效果可以看我的右側。原版本的Demo是這樣的。喜歡原版的也可以前往此處下載！謝謝惠顧!

PS:Widgets設置裡面推薦不要開啟個人信息顯示，也就是不要Show Badge,因為那裡的碩大的個人圖標以及信息調整我還沒有修改，有修改需求的可以自行修改，也可在下留言，我會考慮進行調整。

戳我下載

本文地址:http://leeiio.me/lastfmrps-modify/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 更換WP的永久鏈接不用怕，教你如何跳轉 (14)
• 5个插件让你的 Wordpress 成为一个多语种网站 (27)
• 两个免费的Wordpress Cheat Sheet [PDF] (16)
• 美化 Wordpress 标题，个性字体生成图片标题插件推荐！ (106)
• 升级版！Cookies 记录你的 Wordpress 侧边栏关闭/显示的状态 (34)
• 关闭/显示你的 Wordpress 侧边栏，享受阅读快感 (75)
• Canonical tag 规范化 Wordpress 的 URL 来提升页面权重 (15)

也就那麼一做 你就那麼一看

本文地址:http://leeiio.me/beautiful-germination/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 年度曖昧文章

本文地址:http://leeiio.me/a-todo-color/

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

• 年度曖昧文章