一个顶替alert的jQuery插件(表单校验时使用)
一个替代alert的jQuery插件(表单校验时使用)
你可以到http://code.google.com/p/jquery-alert/去下载,在里面有demo的。
哈哈,多谢。
这位同学说得是,同时也希望有美工基础的同学能在我的基础上将其再美化一下,有更酷的UI希望同时也发给我一份哈
下了,不是一般的难看啊。
前一段时间在忙着网站改版的工作,在表单校验提示时要求不能使用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/。
1 楼
fff
2010-01-19
能给个demo链接么?
2 楼
stevenzuo
2010-01-19
不错不错,向阳兄,帮你顶起来!
3 楼
lxy19791111
2010-01-19
fff 写道
能给个demo链接么?
你可以到http://code.google.com/p/jquery-alert/去下载,在里面有demo的。
4 楼
hbbbs
2010-01-19
很不错的一个东东~
再漂亮一点就更完美了!
再漂亮一点就更完美了!
5 楼
lxy19791111
2010-01-19
stevenzuo 写道
不错不错,向阳兄,帮你顶起来!
哈哈,多谢。
6 楼
lxy19791111
2010-01-19
hbbbs 写道
很不错的一个东东~
再漂亮一点就更完美了!
再漂亮一点就更完美了!
这位同学说得是,同时也希望有美工基础的同学能在我的基础上将其再美化一下,有更酷的UI希望同时也发给我一份哈
7 楼
egooooo
2010-01-20
好东西,不错,感谢楼主
8 楼
alan3258
2010-01-20
嘿嘿 ,不错 谢谢楼主分分享
9 楼
yak47
2010-01-21
这个用过,还不错。
10 楼
huajuande
2010-11-17
很好 学习中 原来我把alert改成了div
11 楼
pkptzx
2010-11-25
来个图多好啊 ?!连效果都不知道,我也懒得下啊.
12 楼
Jie_Jie
2010-11-26
pkptzx 写道
来个图多好啊 ?!连效果都不知道,我也懒得下啊.
下了,不是一般的难看啊。