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 相关文章推荐
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 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中用hash实现的数组
2011/07/17 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
投资意向书
2014/07/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
婚前协议书范本
2014/10/27 职场文书
三八妇女节主持词
2015/07/04 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
服务器间如何实现文件共享
2022/05/20 Servers