P.S. 最近在测试这个脚本的时候还真的见过不少“高楼”的，超过一页的也不少…

既然功能类似，为什么要独立成一个新的脚本呢。主要原因是新的这个脚本修改了源消息链接的默认点击事件，可能会有人不喜欢，所以独立开来，那些没有“看楼”需求的同学可以选择原来的那个简单的脚本。

使用方法：

1、移动至源消息链接上时自动预览之前的所有相关消息；
2、移出源消息链接后则隐藏预览的消息；
3、点击源消息链接后则预览的消息不会自动隐藏，需要点击预览的消息或者预览其他的消息来使当前的预览消息隐藏；增加这个操作主要是由于某些“楼”比较高，需要滚动页面才能看全；
4、双击源消息链接后转到源消息页面。

使用效果：

下载安装：

fanfou Thread Status for Opera

fanfou Thread Status for Firefox (Greasemonkey)

*注意：此脚本不和我之前的预览饭否的回复消息脚本同时安装使用，请在两者中选择一个安装使用。

有问题和建议的话欢迎留言，也可以在饭否上找我。

虽然我的破手机没法安装(T_T)，但是我的饭否好友还是有很多发照片的。不过饭否消息发的是缩略图，手机拍的照片本来就质量不高，一缩略就更看不清了，没办法只能一个一个点开看。为了结束这种痛苦的状态，就写了下面这个 User JS，主要功能是以 Thick Box的方式在当前页面预览消息中图片的大图。

使用效果如下：
点击消息中的图片缩略图，就可以在当前页面预览大图，点击大图或者周围的灰色背景则返回页面

下载安装：

fanfou Thick Pic for Opera

fanfou Thick Pic for Firefox (Greasemonkey)

有问题和建议的话欢迎留言，也可以在饭否上找我。

我写的这个 User JS 的功能就是给饭否页面加上预览源消息的功能，这个功能的灵感来自于 dofy 给 Twitter 写的 TwittSeven 脚本。

使用效果如下：
把鼠标移至源消息的链接上就会显示源消息

下载安装：

fanfou Reply Status for Opera

同样，我也修改了一个给Firefox 用 Greasemonkey 的版本

fanfou Reply Status for Firefox

更新记录：

• 2009/05/11 v0.1 初始版本
• 2009/05/12 v0.2 更新预览消息框的 CSS ，解决长消息的时间戳显示不整齐的问题

有问题和建议的话欢迎留言，也可以在饭否上找我。

但是如果每次 RF 时手动复制粘贴还要加用户名挺麻烦的，所以就写了这样一个 Opera 的 userJS 脚本。这个脚本没什么其他的作用，就是给 home 页面的每条消息增加一个 RF 的按钮，点击后就可以自动 RF 该条消息了。按钮的样式上偷了个懒，采用的是饭否已经撤销掉的“分享”按钮的样式，不过这样看起来风格也比较一致。

使用方法：

1、在自己的 home 页，点击消息右侧的“分享”按钮，则会将当前消息加上 “RF @XX” 粘贴至发表消息框，并将页面定位至发表框，如果不需要修改则直接点击“发送”按钮转发消息；
2、在其他页面，点击消息右侧的“分享”按钮，则会转到自己的 home 页，同时已经将要转发的内容填至发表框，只需点击“发送”按钮即可转发消息。

使用效果如下：

下载安装：

fanfourf.js for Opera

其实 Opera 的 userJS 和 Firefox 的 Greasemonkey 脚本部分兼容，所以我就顺便改了一个 Greasemonkey 的版本，可以用在 Firefox 上。

fanfourf.user.js for Firefox

更新记录：

• 2009/05/11 v0.1 初始版本
• 2009/05/14 v0.2 将转发消息的范围扩大至所有页面；不在自己的消息上显示 RF 按钮；默认不自动发送消息，可以在发送前修改消息；修正对自动截断的链接的读取；修正对用户名链接的处理；

有问题和建议的话欢迎留言，也可以在饭否上找我。

这个方法相比于原来直接添加 “input” 元素的值为提示文字的办法，提升了可用性和可访问性，不过也存在两个缺点。一个是 mg12 自己也提到的不方便国际化的问题；另一个则是，如果用户要搜索的关键词和默认的文字提示相同时，则无法进行搜索。当然，你也可以认为第二个问题是我钻牛角尖，也许根本没有人会用默认的文字提示作为搜索关键词。其实我也认为不会出现这种情况，我只是想提出另一种思路来实现搜索框的文字提示，这个办法应该可以解决上面提到的两个问题。

下面是我修改我这个主题的搜索框提示的方法：

首先我需要对搜索框部分的主题文件做一点小小的修改

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" title="<?php _e('Type text to search here...'); ?>" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

以上是我这个主题文件的 searchform.php 文件的内容，我做的修改只是给 “input” 元素添加了一个属性

title=”<?php _e(’Type text to search here…’); ?>”

这样就解决了提示文字的国际化问题，如果在语言文件里有定义就可以直接使用了。

然后就是 jQuery 的部分

jQuery(document).ready(function(){
    // DOM 加载完毕时添加搜索提示
    // 修改搜索框的背景色为透明，以便显示其下方的文字
    $("input#s").css({backgroundColor:"transparent"});

    $("input#s")
        // 将搜索框的上层元素改为相对定位
        .parent().css({position:"relative"})
        // 添加一个绝对定位的 span 至搜索框的下方来显示文字提示
        .append('<span id="searchtip" style="position:absolute; top:2px; left:10px; color:#999; display:none; z-index:-1;">' + $("input#s").attr("title") + '</span>');

    // 如果搜索框内容为空则显示提示
    if($("input#s").val() == "") {
        $("#searchtip").show();
    }

    // 当鼠标聚焦在搜索框
    $("input#s").focus(function(){
        // 如果搜索框内容为空则隐藏提示
        if($(this).val() == "") {
            $("#searchtip").hide();
        }
    }).blur(function(){
        // 如果搜索框内容为空则显示提示
        if($(this).val() == "") {
            $("#searchtip").show();
        }
    });

    // 当搜索表单提交时
    $("#searchform").submit(function(){
        // 如果搜索框内容为空则不提交
        if($("input#s").val() == "") {
            return false;
        }
        return true;
    });

    // 解决 IE 8 透明背景色的问题
    $("#searchtip").click(function(){$("input#s").trigger("focus");});
});

这个方法的原理也很简单，就是在搜索框的后面加入一个绝对定位的 “span” 元素来显示文字提示，文字提示的内容则是通过获取搜索框的 title 值来添加。

以上就完成了搜索框文字提示的添加，下面是我在这个过程中遇到的一个问题。

注意到上面的最后一行代码了吗，是为了解决在 IE 8 下的一个问题的，本来可以不需要这行代码的，就是为了万恶的 IE …

问题是这样的，当一个绝对定位的元素位于一个 “input” 元素的下方时，在 IE 8 下你依旧可以用鼠标访问到这个元素，导致点击搜索框时无法获得焦点，在其他我测试的浏览器中都没有这个问题。所以在 IE 8 下，需要为提示文字的 “span” 元素额外的绑定一个监听事件。而且有点奇怪的是，把 “input” 元素换成 “div” 元素后，IE 8 下的表现又和其他浏览器一致了。

关于这个问题我做了一个简单的演示 Demo 页面，有兴趣的可以去看看，我手头没有 IE 7 和 IE 6 ，不知道这两个浏览器是不是存在同样的问题，另外如果你有解决这个问题的办法，也请多多指教。

先来看看最终效果是什么样的： 演示(Demo)

一个导航菜单，最重要的是可访问性，其他的效果都是为了锦上添花的，所以首先我们要做一个纯 CSS 的纵向导航菜单，这样即使用户关闭了 JavaScript 也能无障碍的访问。

第一步： 一个语义化的 HTML 结构

<h2>Flag Navigation</h2>
<ul id="nav" class="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a>
        <ul>
            <li><a href="#">2.1 CSS 2</a></li>
            <li><a href="#">2.2 CSS 3</a></li>
        </ul>
    </li>
    <li><a href="#">3 JavaScript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

一般来说，我们都使用一个嵌套的无序列表来表示一个多级导航菜单。

第二步： 给这段 HTML 加上一些样式

body {font: 15px "Arial"}
h2 {font: 18px "Arial"; font-weight: bold; }
.nav, .nav ul{
    width:140px; /* 定义每级菜单的宽度 */
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative; /* 采用相对定位，为子菜单的绝对定位提供基准元素 */
    line-height:30px;  /* 定义每条菜单的行高 */
}
.nav a:link, .nav a:visited{ /* 定义链接的基本样式 */
    display:block;
    width:130px; /* 这里的宽度和下面的 padding 加起来是 140px */
    padding:0px 5px;
    color:#fff;
    text-decoration:none;
    background:url(bg.png) no-repeat -261px 0px; /* 背景图片定位，采用 CSS Sprites 技术 */
}
.nav a:hover,a:active{ /* 定义链接的悬停和点击时的样式 */
    background-position:-79px 0px;  /* 修改背景图片定位 */
    color:#333;
}
.nav li{  /* 每条菜单的定位方式为相对定位 */
    position:relative;
}
.nav ul {  /* 子菜单的样式 */
    position:absolute; /* 采用绝对定位 */
    top:0px; /* 子菜单和上一级菜单上部平齐 */
    left:140px; /* 子菜单显示在上一级菜单右侧 */
    display:none; /* 子菜单不显示 */
}
.nav li:hover>ul{
    display:block; /* 当 list 悬停时，显示它的下一级子菜单 */
}

在 “ul” 的样式中使用 line-height 是为了让菜单文字能纵向居中，同时这个值在我们后面的 jQuery flagNav 插件中有使用到。
这样我们就得到了一个纯 CSS 的纵向多级导航菜单，具体效果可以看看 Demo 页面的第一个菜单。
*这个菜单的效果在 IE6 及其之前的浏览器中是表现不出来的，因为 IE6 不支持 “a” 元素之外的其他元素的 hover 伪类，这个可以通过一些复杂的 CSS Hack 来进行兼容，不过我这里就不管它了，感兴趣的同学可以自行 Google 之。

第三步： 用 jQuery 来添加我们的旗帜动画效果

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="jquery.flagNav.min.js"></script>

我们将 jQuery 库和 jQuery Easing 插件载入，并载入自己的 jQuery flagNav 插件。

<script type="text/javascript">
    $(document).ready(function(){
        $("#nav1").flagNav({bgposout:"-261px 0px", bgposover:"-79px 0px"});
        $("#nav2").flagNav({bgposout:"-261px 0px", bgposover:"-79px 0px", rollback:true});
    });
</script>

再在页面载入后对我们的菜单进行初始化，其中 flagNav 函数的参数中 bgposout 和 bgposover 的值分别和前面 CSS 中 “a:link” 和 “a:hover” 的 background-position 值相对应，rollback 参数则表示在菜单消失时是否使用动画效果，默认值是不使用。

这样我们就完成了一个带旗帜动画效果的纵向多级导航菜单，是不是挺简单的？

这个菜单在所有我使用的浏览器上都测试通过了，如果你有任何问题或建议，欢迎给我留言。

*演示(Demo)
*下载(Download)

这个效果是基于 jQuery 编写的，也用到了 GSGD 的 Easing Plugin (如果选择使用 jQuery 自带的 “linear” 或者 “swing” 效果的话则不需要包含此插件)。

首先需要一个适当的 html 结构：

<h2>Circle Tag Cloud</h2>
<div id="tag_cloud">
    <a id="tag1" href="#1" style="font-size: 20pt; color:blueviolet">UED</a>
    <a id="tag2" href="#2" style="font-size: 10pt; color:maroon">JavaScript</a>
    <a id="tag3" href="#3" style="font-size: 15pt; color:dodgerblue">Jquery</a>
    <a id="tag4" href="#4" style="font-size: 8pt; color:violet">paopao</a>
    <a id="tag5" href="#5" style="font-size: 12pt; color:lightseagreen">demo</a>
</div>

然后给这段 html 加上一些必须的样式：

h2 {font: 13pt/15pt "Arial"; font-weight: bold; }
#tag_cloud{position:relative;width:300px;height:300px;background-color:#eee;overflow:hidden;}
#tag_cloud a{position:absolute;text-decoration:none;white-space:nowrap;}
#tag_cloud a:hover{border:1px solid #000}

当然还要载入一些必需的 js 文件：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.circletag.min.js"></script>

最后，在页面里加入如下的初始化 js 代码就 ok 了：

<script type="text/javascript">
    $(document).ready(function(){
        $("#tag_cloud").circleTag({ speed: 300 });
    });
</script>

下载地址在此

需求：
* jQuery 1.3 or higher
* jQuery Easing Plugin 1.3

没办法，只好曲线救国了… 我用了搜索用户消息的办法来查找用户的第一条消息，虽然这和用户的创建时间不一定一样，不过这也算是另一种应用吧 ^_^

第一次使用 Google App Engine 来部署应用，不过没用到 Python (因为不会 =,= )，只是直接使用了静态文件：

你在饭否的第一条消息？
不幸的发现饭否的 API 也有同样的限制，虽然没有在文档里写明，但是经过测试，只能得到最多 3,200 条用户消息…
Update 了一个新的版本，现在应该可以查询所有人的第一条消息了，即使你是消息数超过 3,200 的饭否狂人

Your First Twitter?
Twitter 这个版本有点问题，由于 API 的限制，只能得到最多 3,200 条用户消息，所以消息数超过 3,200 的目前还无法查到第一条消息…

Rest API Limit
Clients may request up to 3,200 statuses via the page and count parameters for timeline REST API methods.

Your First Twitter? (Search Version)
Twitter 消息数超过 3,200 的 Twitter 狂人们可以尝试这个版本，通过 google 搜索来查找的，不一定能成功

另外第一次用到了 JSONP 技术，和 Jquery 结合起来使用的话，很好很方便。

感谢 James Padolsey 的 TinyURL JSONP API ，可以很方便的得到缩短网址。