这个方法相比于原来直接添加 “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 参数则表示在菜单消失时是否使用动画效果，默认值是不使用。

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

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

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

第一次使用 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 ，可以很方便的得到缩短网址。

趁着读书时的热情，做了一些小的demo来练习，在上一个demo中发现opera浏览器在处理xhtml标签的”disabled”属性时有一个bug。

事情是这样的，我在页面中有一个button元素，我希望它只能被点击一次，所以我在button的click事件中将它的”disabled”属性置为true。这样，点击一次之后，这个button就变成了灰色的不可用状态，我也确实无法再通过鼠标直接点击它了。事情到此都是没有问题的，接下来我希望能用键盘快捷键来控制这个button，于是我给它添加了”accesskey”属性，然后问题就来了，在我点击一次使得button变为不可用状态后，我还是可以通过accesskey来点击它。
我在其他的浏览器上进行了同样的实验，结果表明在我现有的浏览器 (FireFox3, IE8, Safari3/win, Chrome0.4) 上都没有这个bug，除了opera。我目前使用的是opera 9.61版，不过我估计opera以前的版本也存在同样的bug。

进一步实验后，发现opera不只是在处理”accesskey”的点击时有bug，而是在处理除了鼠标直接点击之外的所有其他方式时都存在这个bug。比如在另一个JavaScript脚本里调用这个已经被禁用的button的click函数，甚至通过tab获取button焦点之后连续点击回车，都可以绕过button的disabled属性而触发它的click事件。

我写了一个demo页面来演示这个bug：Button & accesskey

还有要注意的一点就是accesskey在不同的浏览器中的使用方法并不一样。Opera中是通过shift+esc调出accesskey菜单再按相应的accesskey，IE8、Safari3/win以及Chrome0.4则都是使用alt+accesskey。FireFox3中则默认是alt+shift+accesskey，这避免了与浏览器菜单快捷键的冲突，不过可以通过修改about:config的ui.key.contentAccess键值来更改，这个键值的具体含义如下：

• 1 = Shift
• 2 = Ctrl
• 3 = Shift + Ctrl
• 4 = Alt
• 5 = Shift + Alt
• 6 = Alt + Ctrl
• 7 = Ctrl + Shift + Alt

另外，在做这个demo的时候还发现了IE在处理button按钮时和其他浏览器的不同。在JavaScript脚本中通过element.value来获取button的value属性的值，在IE中得到的是button的innerHTML值，而在其他浏览器中得到的是正确的value属性的值。在网上搜了一下，这个问题有不少人问，解决办法也有不少，有的人建议改用input标签，不过我觉得不符合语义化的要求。还有通过Javascript和xml来解决的，感觉太麻烦了。最后我决定使用button的title属性来存储我需要的值，没办法，妥协一下吧。

FileZilla则是一款开源的ftp下载软件，对于普通的ftp下载来说完全可以代替FlashFXP来使用，而且FileZilla可以跨平台并且支持IPv6的站点下载。

对于想从FlashFXP迁移到FileZilla的用户来说，站点列表的迁移是个主要的问题。FlashFXP没有提供站点文件导出的功能，不过它的站点文件是保存在安装目录的Sites.dat文件中的，可以很容易找到。FileZilla则提供了完善的导入和导出功能，而且支持的格式是开放的xml格式。

前几天在水源上有人问这两个站点转换的方法，搜到一个CCF的附件，不过没法下载。所以在网上找了些资料，用php写了一个。其中主要的麻烦在于FlashFXP站点文件的格式解析，还有两种站点文件的密码加解密。不过好在已经有人研究过了，只要参考他们的写一个php版本的就行了。

在线转换地址：
FlashFXP V3.0站点文件 <=> FileZilla V2.x、V3.x站点文件

写这个在线版的时候顺便学习使用了一下Blueprint CSS Framework，很方便 ^_^

如果担心自己的站点密码安全性，可以用下面这个CLI版本的，不过需要先安装PHP 5.0以上的版本。
CLI版：
FlashFXP2FileZilla CLI版

目前这个转换程序已经实现站点基本信息以及注释的相互转换，其他的一些诸如PASV模式之类的设置没有去考虑，转换之后是默认的设置。另外在FlashFXP转到FileZilla时，将站点的默认连接数设置成了1，这样对于很多只能1 connection/ip的站点就不会有问题了。

如果发现什么bug或者有什么意见可以直接留言给我

首先的是默认皮肤有了很大的改变，用惯了以前版本的会突然感觉很不适应。而且左边侧边栏的打开/关闭按钮跑到标签栏边上去了，害得我还是习惯性的去点左边缘，然后发现什么反应都没有…

然后最大的感觉就是速度确实又提升了不少，不过对我来说最大的好处则是兼容性更好了。Opera 9.25最让我困扰的问题就是不能正确的浏览space空间和在space及新浪blog留言，因为我有不少朋友是用的space和新浪blog作为bsp，导致我每次想要留言的时候都得换浏览器，现在Opera 9.5解决了这两个问题，非常禶，这样就基本不用换浏览器了。

最后Opera 9.5还有一个新东西就是Opera Dragonfly，一个开发者工具，不过我到现在还没Loading完，不知道啥时候才能看到…

以下是下载地址：

[仅英文版]：
http://ftp.opera.com/pub/opera/win/950/en/Opera_950_classic_Setup.exe

Windows MSI [国际版]：
http://ftp.opera.com/pub/opera/win/950/int/Opera_950_in_Setup.exe

1、双空白边浮动 bug

测试结果：已修复

2、3像素文本偏移 bug

测试结果：已修复

3、IE 6 重复字符 bug

测试结果：未修复

4、IE 6 躲猫猫 bug

测试结果：已修复

5、相对容器中的绝对定位

测试结果：已修复

关于 IE 7 修复的其他 bug 列表可以看看这里。

Apache 2.2系列是一个新的stable brach，所以安装前先要卸载原来的2.0.54版，卸载之前我先备份了配置文件。

然后就是安装Apache 2.2.3，我安装到了原来那个目录下。安装完之后我先试着把2.0版的配置文件放到conf文件夹下，结果无法启动。看来是不能直接使用原来的httpd.conf文件。

我发现2.2.3版的conf文件夹下除了httpd.conf文件外还多了default和extra两个文件夹，仔细看看后才知道2.2版已经把httpd.conf文件拆分开来了，除了主要的配置信息还保留在httpd.conf外都分成了一个个httpd-xxx.conf放在extra文件夹下，然后在httpd.conf文件中通过include包含进来，这样提供了更多的选择性和便利性。

刚才无法启动Apache的主要原因应该是一些module load不正确，2.2和2.0的modules相差比较大，所以我就拿2.2.3的默认的httpd.conf参照2.0的来修改了，至于那些httpd-xxx.conf文件我按照自己的需求选择了一部分include了，不过要注意在httpd-xxx.conf文件中需求的modules必须在httpd.conf中load正确，否则也会无法启动。

经过一番折腾，配置文件都修改好了，Apache也正常启动了。打开opera测试一下，发现静态网页可以正常浏览，但是php文件都直接显示的源码。我明明load了php5_module了，Apache也可以启动了，其他相应设置也写了，奇怪。

上网google了一把，发现不是只有我有这个问题，原来PHP5压缩包里的php5apache2.dll只适用于apache2.0.*

解决方法:
下载http://www.apachelounge.com/download/mods/php5apache2.dll-php5.1.x.zip这个补丁并解压,共有三个文件：
vcredist_x86.exe
php5apache2.dll
httpd.exe.manifest

1.将php5apache2.dll拷贝到PHP5的根目录下覆盖原来的文件；
2.将httpd.exe.manifest文件复制到apache2.2.3安装目录下的bin文件夹下；
3.双击运行vcredist_x86.exe安装(如果系统里已安装了.NET framework 2，就可以省掉这一步)。

我的机子已经安装了.NET framework 2，完成以上两步后重启Apache，可以正常解析PHP文件了。

升级完成 ^_^

今天看了一下php的Image图像函数(需要GD 库支持)，自己仿照着做了一个YSSY的Signature，当然源图片是直接从水源的主页上面的logo处理而来的，在这里对图片作者表示感谢，不要找我要版权费啊。。。^_^

原来是准备做成png格式的，结果做好后发现水源好像不支持png格式的直接显示，就又改成jpg格式的了。

可以去我的网站生成你自己的哦^_^ (我开机的时候才可以登录=,=)

http://paopao.ftpun.com/test/YSSY_logo/