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中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
生成缩略图
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
javascript的push使用指南
2014/12/05 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
python制作抽奖程序代码详解
2021/01/15 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
护士演讲稿范文
2014/01/05 职场文书
上班早退检讨书
2014/01/09 职场文书
美术国培研修感言
2014/02/12 职场文书
预备党员的自我评价
2014/03/12 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
励志演讲稿300字
2014/08/21 职场文书
运动会演讲稿100字
2014/08/25 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python