eddie.Yang's creative » jquery http://www.ediyang.com Creative change lives Wed, 14 Jul 2010 02:06:12 +0000 http://wordpress.org/?v=2.8 en hourly 1 提升密码输入框易用性，2个jQuery插件 http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/ http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/#comments Tue, 25 Aug 2009 10:02:36 +0000 eddie http://www.ediyang.com/?p=778 密码输入框，或者说表单是我们普通网民需要经常接触的网页元素之一。但是密码输入框的用户易用性却一直没有没有列入到设计者的考虑中去。
我今天介绍这2个jQuery插件分别是Chroma-Hash以及跟iPhone一样的密码输入框，他们功能不同，但却一样提升了密码输入的易用性。

1.Chroma-Hash

首先介绍Chroma-Hash，它可以实时用3条色块（可以更多）来形象化你的密码。试试demo演示，或看下图你就明白：
chroma-hash

可以看到在密码输入框的右边有3个色块表示你的密码，这么做的好处有2个：

  • 登录时，用户可以通过颜色判断密码是否输入正确
  • 注册时，用户可以通过对比2次密码输入的色块，判断2个密码是否一致

而完成以上步骤是实时完成，更不用通过将数据输送到服务器端，因为用户可以提前知道自己的密码是否有误。

如何使用

1.首先到http://github.com/mattt/Chroma-Hash/tree/master下载chroma-hash.js
2.html代码如下：

<fieldset>
<label>Username</label>
 <input id="username" name="username" type="text" />
 <label>Password</label>
 <input id="password" name="password" type="password" />

 <label>Confirm Password</label>
 <input id="confirm-password" name="confirm-password" type="password" />
 </fieldset>

2.接着在我们的html 文件中引入jQuery以及chrome-hash.js


<script src="http://www.google.com/jsapi"></script>
 <script type="text/javascript" charset="utf-8">
 google.load("jquery", "1.3.2");
 </script>
<script src="chroma-hash.js" type="text/javascript" charset="utf-8"></script>

3.调用函数


<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("input:password").chromaHash({bars: 3});
$("#username").focus();
});
</script>

详细信息可以浏览作者的网站

2.像iPhone一样的密码输入框

如果你没有用过iPhone可能并不会明白这个插件的功能，简单的说，就是在密码输入框键入一个字符时它并不会马上变成星号，只有再键入下一个字符时它才会变成星号。
还是看看demo演示好了吧，或者看下图：
iphone password 提升密码输入框易用性，2个jQuery插件

这样做的好处是：

  • 用户可以及时知道自己输错密码

如何使用

1.到http://dpassword.googlecode.com/svn/trunk/lib/jQuery.dPassword.js下载jQuery.dPassword.js文件

2.在我们的html文件中引入jQuery与jQuery.dPassword.js并调用


<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jQuery.dPassword.js"></script>
<script type="text/javascript">
	$(document).ready( function() {
		$('input:password').dPassword();
	});
</script>

详细信息可以浏览作者的网站

]]> http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/feed/ 9 jQuery制作淡入淡出的网站导航栏 http://www.ediyang.com/jquery-fade-in-and-out-menu/ http://www.ediyang.com/jquery-fade-in-and-out-menu/#comments Fri, 20 Mar 2009 17:37:29 +0000 eddie http://www.ediyang.com/?p=441 前些天有朋友问我关于如何用jQuery制作淡入淡出的效果,就像本网上方的导航栏一样的效果.
借助jQuery的帮助,我们只需要几行代码就可以实现这样的效果.
当然这样的效果不止可以用来制作网站导航栏,同时也可以用来用在其他有鼠标悬停的地方.这就需要发挥各位的想象力了.

在线DEMO
下载源文件

XHTML的代码

首先,我们需要在之间把jQuery引用进来,这里我们使用Google CDN提供的jQuery.



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

首先让我们看看本例子中用做导航栏的背景图片
nav jQuery制作淡入淡出的网站导航栏
每个按钮的尺寸都是一样大:125*52px.
jfm jQuery制作淡入淡出的网站导航栏
接下来我们要看看导航栏的代码,这里我使用ul来进行布局(较常用的方法),代码如下:


<ul class="nav">
	<li class="home"><a href="#">主页</a><div class="hoverHome"></div></li>
	<li class="work"><a href="#">作品</a><div class="hoverWOrk"></div></li>
	<li class="about"><a href="#">关于</a><div class="hoverAbout"></div></li>
	<li class="contact"><a href="#">联系</a><div class="hoverContact"></div></li>
</ul>

各位可以看到每个li中还包含了

这样的空div,而这个空div就是本例子中用于鼠标悬停时显示的div.在后面我们可以看到它的作用.继续..

CSS的代码


ul.nav{
	height:52px;
	text-indent:-9999px;
	list-style:none;
	}

这里text-indent:-9999px;是把xhtml里的文字缩进到我们看不到的地方.


ul.nav li{
	float:left;
	position:relative;
	}

注意这里position:relative;的设置是为了hoverHome等层进行相对定位做准备.


ul.nav a{
	display:block;
	width:125px;
	height:52px;
	}

这里把宽度与高度设置为按钮的尺寸,即125*52px.


.hoverHome,.hoverWork,.hoverAbout,.hoverContact{
	position:absolute;
	top:0;
	left:0;
	width:125px;
	height:52px;
	cursor:pointer;
	}

CSS部分的重点就在这,使用position:absolute;后这4个层就会以ul.nav li为基点进行定位,这里我们需要让.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个div与每个li完全重叠,所以我们设置top与left都为0.
接下来我们定义导航栏的背景图片


.home a{
	background:url(images/nav.gif) no-repeat 0 0;
	}
.work a{
	background:url(images/nav.gif) no-repeat -125px 0;
	}
.about a{
	background:url(images/nav.gif) no-repeat -250px 0;
	}
.contact a{
	background:url(images/nav.gif) no-repeat -375px 0;
	}

我们会特别注意到背景图片的偏移位置.例如“home”的背景图片在距离左边0px,距离上边0. 而第2个按钮”work”距离左边125px,所以我们设置为-125px(记住是负号).距离上边为0;以此类推.


.hoverHome{
	background:url(images/nav.gif) no-repeat 0 -52px;
	}
.hoverWork{
	background:url(images/nav.gif) no-repeat -125px -52px;
	}
.hoverAbout{
	background:url(images/nav.gif) no-repeat -250px -52px;
	}
.hoverContact{
	background:url(images/nav.gif) no-repeat -375px -52px;
	}

这里我们依然用的是同一张背景图片,而我们这一次需要的是图片下方蓝色的部分,也就是距离上边52px的线以下的部分.所以我们看到每个层的背景图偏移位置第2个属性都是-52px,这就让背景图从距上边52px的地方开始.

现在刷新你的页面,如果你的代码没错,你应该可以看到一条蓝色的导航栏了.但是它没有任何鼠标悬停的变动效果.没有淡入淡出,轮到jQuery出场了.

jQuery代码

请依然把代码写在<head>里面.


<script type="text/javascript">
$(document).ready(function(){
		$(".hoverHome,.hoverWork,.hoverAbout,.hoverContact").css("opacity","0");
		$(".hoverHome,.hoverWork,.hoverAbout,.hoverContact").hover(function () {
			$(this).stop().animate({
				opacity: 1
			}, "slow");
		},
		function () {
			$(this).stop().animate({
				opacity: 0
			}, "slow");
		});
		});
</script>

这段代码很容易理解,首先把.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个层设置透明度opacity为0,即隐藏.接着当鼠标悬停在按钮上时,我们再将这4个层以淡入的效果显示出来,而当把鼠标移开时,这4个层就淡出.

总结一下

这个例子中的代码都很好理解,其核心就是利用jQuery中的animate()函数以淡入淡出的效果改变div的css属性.参考jQuery API关于animate的使用方法.而CSS最需要留意的就是position:relative与Position:absolute的位置.
好吧,对于jQuery与Javascript这方面我也是一个小小的菜鸟,经常都是看看别人的代码然后自己胡乱写,所以如果你有更好的方法,请你留言给我,同时也帮助其他看到这篇文章的朋友呵呵.谢谢

最后呼吁一下转载的朋友,请尊重本人的劳动成果,留一个小小的链接给我.谢谢！

]]> http://www.ediyang.com/jquery-fade-in-and-out-menu/feed/ 24 jQuery 1.3新版API浏览器,包括Adobe AIR离线版 http://www.ediyang.com/new-jquery-v13-api-browser-and-air-edition/ http://www.ediyang.com/new-jquery-v13-api-browser-and-air-edition/#comments Tue, 03 Mar 2009 15:55:16 +0000 eddie http://www.ediyang.com/?p=317 jQuery在推出jQuery 1.3的同时也向外界正式展示了全新制作的API浏览器，这使得我们查阅jQuery相关函数与应用更加方便.
访问新版API: http://api.jquery.com/
同时jQuery也推出了API的Adobe AIR离线版,你需要先下载并安装AIR,然后再下载离线版API进行安装.
AIR离线版的jQuery API功能与在线版几乎一样,菜单滑动效果也很好(得益于AIR).如果你的网速较慢,使用AIR版API是比较好的选择.
jqapi01 jQuery 1.3新版API浏览器,包括Adobe AIR离线版
根据jQuery官方Blog描述,新版API浏览器有以下特性：
1.最新的jQuery与jQuery UI使用文档
2.可以标示为“favourite”以便以后回访
3.实例中代码高亮
4.在浏览器中实时运行
5.可以对实例进行编辑及试验

如果你比较倾向于阅读汉字,虽然没有官方的中文API,但是我们仍然可以从jQueryAPI参考文档中文版翻译下载到jQuery 1.3 API的CHM电子书.
jqapi02 jQuery 1.3新版API浏览器,包括Adobe AIR离线版

希望以上信息对喜欢jQuery的同学有帮助.

]]> http://www.ediyang.com/new-jquery-v13-api-browser-and-air-edition/feed/ 2