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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue模块移动组件的实现示例
May 20 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
YII实现分页的方法
2014/07/09 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
浅谈flask源码之请求过程
2018/07/26 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
安全先进班组材料
2014/12/26 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript