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工具库代码
Mar 29 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
jquery实现弹出层效果实例
May 19 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 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引用地址改变变量值的问题
2012/03/23 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
javascript常用的方法整理
2015/08/20 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Django视图和URL配置详解
2018/01/31 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
自我鉴定200字
2013/10/28 职场文书
党支部公开承诺书
2014/03/28 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
退休欢送会致辞
2015/07/31 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
关于的python五子棋的算法
2022/05/02 Python
zabbix配置nginx监控的实现
2022/05/25 Servers