A colourful bubble?

My Del.icio.us [2009-10-15]:wuxipaopao @ del.icio.us

Thu, 15 Oct 2009 00:00:00 +0800

Open Source E-Commerce Shopping Carts – Best Of

My Del.icio.us [2009-10-15]:wuxipaopao @ del.icio.us

Thu, 15 Oct 2009 00:00:00 +0800

Open Source E-Commerce Shopping Carts – Best Of

My Del.icio.us [2009-06-13]:wuxipaopao @ del.icio.us

Sat, 13 Jun 2009 00:00:00 +0800

Tucia shoutout ! | redferret.net

My Del.icio.us [2009-06-13]:wuxipaopao @ del.icio.us

Sat, 13 Jun 2009 00:00:00 +0800

Tucia shoutout ! | redferret.net

在饭否上“盖楼”

paopao — Thu, 14 May 2009 15:55:20 +0800

不要被我这个标题给骗啦，其实这还是一个饭否上的 User JS — fanfou Thread Status。这次的功能其实和上一次的预览饭否的回复消息的 User JS功能类似，只是更进了一步：不只是预览被回复的消息，还能同时回溯预览之前的所有消息，这样看起来的效果就像是“盖楼”咯

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

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

使用方法：

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

使用效果：

下载安装：

fanfou Thread Status for Opera

fanfou Thread Status for Firefox (Greasemonkey)

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

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

预览饭否消息图片的 User JS

paopao — Thu, 14 May 2009 01:30:03 +0800

饭否拍拍是饭否上个月推出的手机客户端，可以很方便的拍照上传。推出后广受好评，顿时涌现出许多“通过饭否拍拍”发出的消息。

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

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

下载安装：

fanfou Thick Pic for Opera

fanfou Thick Pic for Firefox (Greasemonkey)

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

预览饭否的回复消息的 User JS

paopao — Mon, 11 May 2009 18:25:28 +0800

最近饭否添加了一个新的功能，就是在显示 @ 回复别人的消息时，会同时显示被回复消息的链接，也就是是类似会话的功能。但是，如果需要看到源消息的话需要转到源消息的页面来查看，有点不方便。

我写的这个 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 按钮

paopao — Mon, 11 May 2009 08:30:24 +0800

玩 Twitter 的同学应该都知道 RT 吧，是 retweet 或 retweeting 之意，也就是引用或者重复别人的信息。我不怎么用 Twitter，但是一直在用饭否，饭否上也有人经常进行 RT ，我觉得这个词用在饭否上好像不太对，应该用 RF 嘛，代表 refanfou，哈哈

但是如果每次 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 按钮；默认不自动发送消息，可以在发送前修改消息；修正对自动截断的链接的读取；修正对用户名链接的处理；

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

WordPress 搜索框添加文字提示

paopao — Sun, 10 May 2009 19:29:51 +0800

搜索框里显示文字提示是目前常见的一种技术了，但是实现的方法有很多种，mg12 介绍一个使用 jQuery 添加文字提示的方法。

这个方法相比于原来直接添加 “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 ，不知道这两个浏览器是不是存在同样的问题，另外如果你有解决这个问题的办法，也请多多指教。

基于 jQuery 的旗帜效果纵向多级导航菜单

paopao — Sun, 10 May 2009 12:55:28 +0800

最近看了一些基于 jQuery 的好玩的导航菜单，然后就想到了这样一个效果的菜单，其实我也不知道该叫它什么效果，就叫旗帜效果 (flag style) 吧。

先来看看最终效果是什么样的：演示(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 参数则表示在菜单消失时是否使用动画效果，默认值是不使用。

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

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