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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
原生JS实现层叠轮播图
May 17 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python中元组,列表,字典的区别
2017/05/21 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python实现ftp文件传输功能
2020/03/20 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
大学生自我评价范文
2015/03/03 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
医院病假条怎么写
2015/08/17 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
详解Java实践之抽象工厂模式
2021/06/18 Java/Android