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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
jQuery实现视频展示效果
May 30 jQuery
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中正确的使用json
2013/08/06 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
CI框架Session.php源码分析
2014/11/03 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
Laravel日志用法详解
2016/10/09 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
一些Python中的二维数组的操作方法
2015/05/02 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
用python解压分析jar包实例
2020/01/16 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
监理资料员岗位职责
2014/01/03 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
爱护公物主题班会
2015/08/17 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技