Archive for the ‘WebDevelop’ Category
星期天, 五月 10th, 2009
搜索框里显示文字提示是目前常见的一种技术了，但是实现的方法有很多种，mg12 介绍一个使用 jQuery 添加文字提示的方法。
这个方法相比于原来直接添加 "input" 元素的值为提示文字的办法，提升了可用性和可访问性，不过也存在两个缺点。一个是 mg12 自己也提到的不方便国际化的问题；另一个则是，如果用户要搜索的关键词和默认的文字提示相同时，则无法进行搜索。当然，你也可以认为第二个问题是我钻牛角尖，也许根本没有人会用默认的文字提示作为搜索关键词。其实我也认为不会出现这种情况，我只是想提出另一种思路来实现搜索框的文字提示，这个办法应该可以解决上面提到的两个问题。
下面是我修改我这个主题的搜索框提示的方法：
首先我需要对搜索框部分的主题文件做一点小小的修改
[code lang="php"]
<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>
[/code]
以上是我这个主题文件的 searchform.php 文件的内容，我做的修改只是给 "input" 元素添加了一个属性
title="<?php _e('Type text to search here...'); ?>"
这样就解决了提示文字的国际化问题，如果在语言文件里有定义就可以直接使用了。
然后就是 jQuery 的部分
[code lang="js"]
jQuery(document).ready(function(){
...
Posted in JavaScript, WebDevelop | 1 Comment »
星期天, 五月 10th, 2009
最近看了一些基于 jQuery 的好玩的导航菜单，然后就想到了这样一个效果的菜单，其实我也不知道该叫它什么效果，就叫旗帜效果 (flag style) 吧。
先来看看最终效果是什么样的： 演示(Demo)
一个导航菜单，最重要的是可访问性，其他的效果都是为了锦上添花的，所以首先我们要做一个纯 CSS 的纵向导航菜单，这样即使用户关闭了 JavaScript 也能无障碍的访问。
第一步： 一个语义化的 HTML 结构
[code lang="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 ...
Posted in JavaScript, WebDevelop | 2 Comments »
星期一, 四月 27th, 2009
前天在饭否上看到有些人在玩一个 Twitter 应用，这个应用可以查出你加入 Twitter 的时间。觉得蛮好玩的，因为我用 Twitter 很少（主要是觉得网页版速度不够快，又不想再开一个客户端），所以想看看能不能移植到饭否来。虽然饭否的 API 和 Twitter 的基本相同，但是在用户信息这部分稍有不同，饭否并没有提供用户的创建时间这个字段。
没办法，只好曲线救国了... 我用了搜索用户消息的办法来查找用户的第一条消息，虽然这和用户的创建时间不一定一样，不过这也算是另一种应用吧 ^_^
第一次使用 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 ...
Posted in JavaScript, WebDevelop | 9 Comments »
星期三, 十一月 26th, 2008
最近在看John Resig的《精通JavaScript》，作为JQuery的作者之一，技术实力自然不在话下。不过如果仔细看某些源代码的话，还是有些小问题的，也许是作者比较粗心吧，这里是中文版的勘误页面，再版的时候估计会好很多。
趁着读书时的热情，做了一些小的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属性来存储我需要的值，没办法，妥协一下吧。
Posted in WebDevelop | 3 Comments »
星期四, 十一月 20th, 2008
FlashFXP是windows下常用也是很流行的一款ftp下载软件，不过它是收费软件，很多人用的应该都是它的盗版产品吧。
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或者有什么意见可以直接留言给我 :)
Posted in WebDevelop, 编程 | 7 Comments »
