jquery插件hiAlert实现网页对话框美化


Posted in Javascript onMay 03, 2015

厌烦了IE浏览器的警告窗,伴随着“咚”恐惧的一声,让人感觉好像有一种坏事情即将来临。而如今各浏览器对网页的弹出警告框(alert)、确认对话框(confirm)、输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格。

hiAlert插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,还提供了渐变提示条效果,弹出网页层效果,它目前兼容各主流浏览器。

使用方法

hiAlert提供了五种方法可以使用:

1、hiAlert

hiAlert(content,title,callback);
hiAlert方法提供3个参数,content:内容,title:对话框标题,callback:回调函数,若无则不写,如:

hiAlert("欢迎来到helloweba.com","提示");

2、hiConfirm

hiConfirm(content,title,callback);
hiConfirm方法提供3个参数,content:内容,title:对话框标题,callback:回调函数,若无则不写,如:

hiConfirm('你确认此操作吗?','确认框',function(r){ 
  hiOverAlert('你的反馈是: ' + r); 
});

3、hiPrompt

hiPrompt(content,deinput,title,callback);
hiConfirm方法提供4个参数,content:内容,deinput:输入框的默认值,title:对话框标题,callback:回调函数,若无则不写,如:

hiPrompt('请填写:','默认值','输入框',function(r){ 
  if(r) hiOverAlert('你填入的内容是“' + r+'”'); 
});

4、hiBox

hiBox(obj,title,w,h,submit,cancel,callback)
hiBox方法提供7个参数,obj: 被指定打开的对象(对象唯一),即对话框中展示的内容关联的对象,title:标题,w:宽度,h:高度,submit:可设置内容中的对象为"submit",如果有callback,点此返回callback行为,cancel:对话框中的取消或关闭按钮对象,callback:回调函数,如:

hiBox('#showbox', '标题',400,'','','.a_close');

5、hiOverAlert

hiOverAlert(content,timeout);
hiOverAlert用来展示信息提示条效果,类似本站文章中的效果,它提供了两个参数,content:提示内容,timeout:提示时间,默认为3000,即3秒。如:

hiOverAlert('操作提示条信息',1500);

在使用时一定记得加载jQuery库和hiAlert插件,以及对应的css样式。您也可以修改CSS来进一步美化对话框。此外,如果需要拖动对话框效果,则需要载入jquery.ui.draggable.js,可以到了解详情。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 格式字符串的应用
Mar 29 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
angular2中Http请求原理与用法详解
Jan 11 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
javascript结合canvas实现图片旋转效果
May 03 #Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 #Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 #Javascript
jQuery中 attr() 方法使用小结
May 03 #Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 #Javascript
jQuery的几个我们必须了解的特点
May 03 #Javascript
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
js查找父节点的简单方法
2008/06/28 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
将python图片转为二进制文本的实例
2019/01/24 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
电子信息毕业生自荐信
2013/11/16 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
单位创先争优活动方案
2014/01/26 职场文书
三个儿子教学反思
2014/02/03 职场文书
党员组织关系介绍信
2014/02/13 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
铣工实训报告
2014/11/05 职场文书