`
lxy19791111
  • 浏览: 480889 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

一个替代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链接么?

相关推荐

    jQuery formValidator表单校验插件ver2.9.1

    作者主页:http://wzmaodong.cnblogs.com/<br>功能介绍: jQuery formValidator表单校验插件 插件目前提示错误,有两种模式:showword和showalert,即文字提示和窗口提示 目前支持5种大的校验方式,分别是:...

    jQuery 表单验证插件

    对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而...

    jQuery formValidator表单验证插件

    jQuery formValidator表单校验插件支持的验证功能: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你...

    jQuery formValidator表单验证插件示例源码

    jQuery formValidator表单验证插件示例源码 jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的...

    jquery表单验证插件jquery.form.js.pdf

    从提供的文件信息中,我们可以抽取出关于jquery表单验证插件jquery.form.js的知识点,包括其使用方法、功能和相关API介绍等。 首先,jquery.form.js是一个专门用于处理表单的jQuery插件,它提供了简化AJAX表单提交...

    jquery formValidation表单验证插件实例

    总结,jQuery FormValidation是一个功能强大的表单验证插件,它使得开发者能够快速而方便地创建具有定制化提示和验证规则的表单。通过灵活的配置和API,我们可以实现各种复杂的验证需求,同时优化用户体验。无论是...

    jQuery formValidator 表单校验插件 4.1.0

    jQuery formValidator表单校验插件 4.1.0 升级内容: 新增以下功能: 1、新增换肤功能,包括提示层的样式、输入控件(目前只支持text、password、file、textarea)的样式。initConfig增加theme属性,表示皮肤名,...

    jQuery Validate表单验证深入学习

    在开发过程中,若希望表单校验而不实际提交表单,可以使用`debug`属性。设置`debug`为true,插件只会进行表单验证而不进行提交,这对于开发阶段的测试非常有用。 当需要对表单进行一些特定的验证时,可以通过`...

    jQuery拖拽滑动验证码插件 slideunlock.js

    `slideunlock.js`是一个专门为此目的设计的插件,它可以方便地在网页中添加拖拽滑动验证功能。然而,原版的`slideunlock.js`可能没有完全考虑到所有主流浏览器的兼容性问题,这可能导致在某些浏览器上无法正常工作。...

    jQuery几种表单的验证

    jQuery作为一个强大的JavaScript库,提供了丰富的功能和简便的API,使得表单验证变得更加简单易行。下面我们将深入探讨jQuery实现的几种常见表单验证方法。 首先,我们来看jQuery的基本用法。在jQuery中,我们可以...

    jQuery form插件之formDdata参数校验表单及验证后提交

    在本文中,我们将深入探讨jQuery Form插件的使用,特别是如何使用`formData`参数进行表单数据校验以及验证后的提交。jQuery Form插件提供了一套API,使得开发者能够更轻松地处理表单数据和提交流程,这对于Web开发来...

    JQuery实战用户名校验

    JQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。而Ajax(Asynchronous JavaScript and XML)则是一种在不重新加载整个网页的情况下更新部分网页的技术,它使用户界面更加动态...

    jquery validate表单验证js

    jQuery Validate是一个强大的JavaScript库,它使得在jQuery基础上实现表单验证变得极其简单。本文将深入探讨jQuery Validate的核心功能及使用方法。 一、jQuery Validate简介 jQuery Validate是一款轻量级的插件,...

    jQuery点击弹窗表单代码

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery点击弹窗表单代码”主题涉及到的是使用jQuery实现的一种常见用户界面交互:当...

    jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例

    如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得...

    jQuery formValidator4.0 表单验证插件更新日志.pdf

    jQuery formValidator 4.0 是一个用于前端表单验证的JavaScript插件,它极大地简化了对用户输入数据的检查和管理。此版本的更新主要集中在性能优化、问题修复和功能增强上。 首先,代码经过了精简,提升了验证速度...

    jQuery formValidator4.0 表单验证插件更新日志.docx

    jQuery formValidator 4.0 是一个用于前端表单验证的JavaScript插件,它提供了丰富的功能和自定义选项,帮助开发者轻松实现对用户输入数据的有效性检查。这个版本的更新主要集中在性能优化、功能增强以及错误修复上...

    jQuery手机移动端注册表单验证代码

    7. **优化体验**:在用户输入时实时进行验证,可以使用jQuery的`.keyup()`事件,当用户离开输入框时进行验证,可以使用`.blur()`事件。这可以即时反馈用户输入是否有效,提升交互体验。 8. **表单重置**:在验证...

    jQuery formValidator3.3表单验证文档说明

    ### jQuery formValidator 3.3 表单验证插件详细解析 #### 一、概述 jQuery formValidator 3.3 是一款基于 jQuery 的强大表单验证插件,它旨在简化前端表单验证的过程,实现 JavaScript 脚本与 HTML 页面代码的...

    国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架

    推荐一个国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架: [b]formValidator[/b] 它能监听到所有控件类型、所有数据格式,还有ajax异步验证功能(例如用户注册时去数据库...

Global site tag (gtag.js) - Google Analytics