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 Window及document对象详细整理
Jan 12 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
如何使用Javascript中的this关键字
May 28 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP.vs.JAVA
2016/04/29 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Python Deque 模块使用详解
2014/07/04 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python实现二叉堆
2016/02/03 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python Json数据文件操作原理解析
2020/05/09 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
如何写出高性能的JSP和Servlet
2013/01/22 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
实习单位推荐信范文
2013/11/27 职场文书
大家检讨书5000字
2014/02/03 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
服务口号大全
2014/06/11 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
院系推荐意见
2015/06/05 职场文书
大学生活感想
2015/08/10 职场文书
话题作文之呼唤
2019/12/18 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android