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 DOM 学习第五章 表单简介
Feb 19 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
js网页右下角提示框实例
Oct 14 Javascript
angularJS 入门基础
Feb 09 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php生成shtml类用法实例
2014/12/09 PHP
深入php内核之php in array
2015/11/10 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
教堂婚礼主持词
2014/03/14 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
教师节标语大全
2014/10/07 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
新员工考核评语
2014/12/31 职场文书