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 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
微信小程序上传文件到阿里OSS教程
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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP保存带BOM文件的方法
2015/02/12 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
javascript的内存管理详解
2013/08/07 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
详解vue axios二次封装
2018/07/22 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python银行系统实战源码
2019/10/25 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
劳动工资科岗位职责范本
2014/03/02 职场文书
产品质量承诺书范文
2014/03/27 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
javascript实现计算器功能详解流程
2021/11/01 Javascript
js 实现验证码输入框示例详解
2022/09/23 Javascript