星期天, 五月 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 »
星期一, 五月 4th, 2009
昨天看到某个 blog 上一个 3D Tag Cloud 插件，效果很炫，是用 Flash 写的。很想把它移植到 JavaScript 来，不过尝试失败，最后得到的效果不甚理想，不过还是记录下来吧，也算是一个学习的过程。
*演示(Demo)
*下载(Download)
这个效果是基于 jQuery 编写的，也用到了 GSGD 的 Easing Plugin (如果选择使用 jQuery 自带的 "linear" 或者 "swing" 效果的话则不需要包含此插件)。
首先需要一个适当的 html 结构：
[sourcecode language="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>
...
Posted in JavaScript | 2 Comments »
