一个替代alert的jQuery插件(表单校验时使用)

     前一段时间在忙着网站改版的工作，在表单校验提示时要求不能使用alert弹出提示，因为这样对用户体验不是很好，因此本人使用jQuery写了个jquery-alert提示插件，其实现的功能也仅仅是用来替代js原生的alert语句。现将其发布出来希望对有方面需求的朋友们有所用。

 

     使用方法很简单：

$('#tip).alert('hello world.');

     其中id为tip的元素是我们需要显示校验提示的元素，'hello world'是提示语，显示在元素的右侧。

     当然有时候我们可能需要它显示在元素的顶部或尾部， 或者对其显示的样式做修改，那就得使用第二个参数options啦，调用方式如下：

$('#tip').alert('hello world',{
 position: 'right',
 focus: true,
 alertzIndex: 999,
 alertClass: 'corner'
});

   

   下面是在插件中定义的参数情况：

 

// 默认参数
$.fn.alert.defaults = {
	position: 			'right', 	// 位置字符串(可选)默认为right,可选为top,bottom
	focus: 				true,  		// 是否让校验对象获得焦点(解决blur事件上有校验时死循环问题)默认为true让对象获得焦点
	alertzIndex: 		999,
	alertClass:			'default'	// 'alert-' + alertClass.
};

 

    现在说明一下以上各参数的作用：

    1. position: 定义浮动提示相对于元素显示的位置，默认显示在元素的右侧，可选的参数为top以及bottom;

    2. focus: 是否需要在显示浮动提示的同时让校验对象获得焦点，默认为true。

    3. alertzIndex: 这是浮动提示层DIV的z-Index属性。

    4. alertClass: 通过这个参数可以定义浮动提示层的样式，样式定义在jquery.alert.css样式表文件中，大家可以通过在此文件中增加新的样式来达到自定义样式的作用。默认为default，另还自带一种圆角的样式为corner。

    如果我们在自己的页面中想全部使用一种新的样式的话，推荐大家使用以下方式，而不需要修改插件的源代码：

$.fn.alert.defaults.alertClass = 'myCss';

   

    jquery.alert插件的下载地址：http://code.google.com/p/jquery-alert/。

 

 

评论

12 楼 Jie_Jie 2010-11-26  

pkptzx 写道

来个图多好啊 ?!连效果都不知道,我也懒得下啊.

下了，不是一般的难看啊。

11 楼 pkptzx 2010-11-25  

来个图多好啊 ?!连效果都不知道,我也懒得下啊.

10 楼 huajuande 2010-11-17  

很好 学习中 原来我把alert改成了div

9 楼 yak47 2010-01-21  

这个用过，还不错。

8 楼 alan3258 2010-01-20  

嘿嘿 ，不错 谢谢楼主分分享

7 楼 egooooo 2010-01-20  

好东西，不错，感谢楼主

6 楼 lxy19791111 2010-01-19  

hbbbs 写道

  很不错的一个东东～

再漂亮一点就更完美了！

这位同学说得是，同时也希望有美工基础的同学能在我的基础上将其再美化一下，有更酷的UI希望同时也发给我一份哈

5 楼 lxy19791111 2010-01-19  

stevenzuo 写道

不错不错，向阳兄，帮你顶起来！

哈哈，多谢。

4 楼 hbbbs 2010-01-19  

  很不错的一个东东～

再漂亮一点就更完美了！

3 楼 lxy19791111 2010-01-19  

fff 写道

能给个demo链接么？

你可以到http://code.google.com/p/jquery-alert/去下载，在里面有demo的。

2 楼 stevenzuo 2010-01-19  

不错不错，向阳兄，帮你顶起来！

1 楼 fff 2010-01-19  

能给个demo链接么？