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 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
vue时间格式化实例代码
Jun 13 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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自动适应范围的分页代码
2008/08/05 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
php服务器的系统详解
2019/10/12 PHP
浅说js变量
2011/05/25 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python类参数self使用示例
2014/02/17 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python过滤列表用法实例分析
2016/04/29 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
基于Python函数和变量名解析
2019/07/19 Python
Python高级property属性用法实例分析
2019/11/19 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
深圳茁壮笔试题
2015/05/28 面试题
七夕活动策划方案
2014/08/16 职场文书
单位推荐信范文
2015/03/27 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python