jquery插件hiAlert实现网页对话框美化

 更新时间:2015年05月03日 15:48:39   投稿:hebedich  
hiAlert是一款基于jQuery的信息提示插件,它支持操作成功、操作失败和操作提醒三种信息提示方式。hiAlert浏览器兼容性非常好,支持更改提示内容,支持定位提示框的位置,可配置插件参数。

厌烦了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,可以到了解详情。

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • 用jquery写的菜单从左往右滑动出现

    用jquery写的菜单从左往右滑动出现

    这篇文章主要介绍了用jquery写的菜单从左往右滑动出现的效果,需要的朋友可以参考下
    2014-04-04
  • jQuery进行组件开发完整实例

    jQuery进行组件开发完整实例

    这篇文章主要介绍了jQuery进行组件开发的方法,以完整实例形式分析了基于jQuery实现自定义组件的相关技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2015-12-12
  • 基于JQuery实现鼠标点击文本框显示隐藏提示文本

    基于JQuery实现鼠标点击文本框显示隐藏提示文本

    我们做搜索框的时候,经常需要这样一个效果:搜索框默认显示一段提示文本,比如“输入关键词”,鼠标点击后,清空这段文本。鼠标再次点击别的地方,又要恢复这段文本
    2012-02-02
  • 详解jquery方法属性

    详解jquery方法属性

    这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-11-11
  • jquery mobile移动端幻灯片滑动切换效果

    jquery mobile移动端幻灯片滑动切换效果

    这篇文章主要为大家详细介绍了jquery mobile移动端幻灯片滑动切换效果,实现滑动切换和点击切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery实现点击旋转,再点击恢复初始状态动画效果示例

    jQuery实现点击旋转,再点击恢复初始状态动画效果示例

    这篇文章主要介绍了jQuery实现点击旋转,再点击恢复初始状态动画效果,结合实例形式分析了jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12
  • 自己动手写的jquery分页控件(非常简单实用)

    自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了
    2015-10-10
  • js和jQuery设置Opacity半透明 兼容IE6

    js和jQuery设置Opacity半透明 兼容IE6

    对于每一个网站前端开发人员,常常都会遇到设置div透明度的需求,比如在实现图片幻灯片切换效果经常就需要使图片淡入淡出。本文分别对原生js和jQuery在IE和其它浏览器中设置透明度的方法和相关注意事项进行总结。
    2016-05-05
  • jquery实现弹出层效果实例

    jquery实现弹出层效果实例

    这篇文章主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下
    2015-05-05
  • jQuery实现合并/追加数组并去除重复项的方法

    jQuery实现合并/追加数组并去除重复项的方法

    这篇文章主要介绍了jQuery实现合并/追加数组并去除重复项的方法,可实现合并两个数组并出去重复项的功能,涉及数组的遍历、判断、追加等相关操作技巧,需要的朋友可以参考下
    2018-04-04

最新评论