现在的位置: 首页 > web前端 > 正文

jNotify:操作结果信息提示条

2020年02月12日 web前端 ⁄ 共 1150字 ⁄ 字号 评论关闭

我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息。jNotify是一款基于jQuery的信息提示插件,它支持操作成功、操作失败和操作提醒三种信息提示方式。

jNotify具有以下特性::

    跨浏览器兼容。 提示内容支持HTML标签。 支持定位提示框的位置。 灵活的,可配置插件参数。

    使用前准备

    使用该插件时一定要记得先载入jQuery库和该插件以及相关样式。

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jNotify.jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" />


    jQuery

    jNotify的使用很非常简单。

    $(function(){ $(element).click(function(){ jSuccess(message,{option}); }); });

    jNotify提供三种调用方式,分别是jSuccess(),jNotify(),jError(),使用方法都一样。message就是提示信息的内容,支持html标签。option是参数配置项,可以进行相关配置,如果不要option则采用默认配置。

    jNotify提供以下可配置的参数:

    autoHide : true,// 是否自动隐藏提示条 clickOverlay : false,// 是否单击遮罩层才关闭提示条 MinWidth : 200,// 最小宽度 TimeShown : 1500, // 显示时间:毫秒 ShowTimeEffect : 200, // 显示到页面上所需时间:毫秒 HideTimeEffect : 200, // 从页面上消失所需时间:毫秒 LongTrip : 15,// 当提示条显示和隐藏时的位移 HorizontalPosition : "right", // 水平位置:left, center, right VerticalPosition : "bottom", // 垂直位置:top, center, bottom ShowOverlay : true,// 是否显示遮罩层 ColorOverlay : "#000",// 设置遮罩层的颜色 OpacityOverlay : 0.3,// 设置遮罩层的透明度

    此外jNotify还提供了两个方法操作onClosed和onCompleted,使用方法可参照DEMO。

    您还可以修改CSS样式来呈现提示信息条的外观。

    以上就上有关jNotify:操作结果信息提示条的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。

抱歉!评论已关闭.