jQuery消息提示插件growl-notification,该插件提供漂亮的UI效果,和多种主题,支持自定义消息框的弹出位置等,使用简单方便。
内置漂亮的 UI 效果和多种主题、
轻量级,压缩后只有 18K。
纯 js 编写,没有任何依赖。
支持 IE11+, Safari, Google Chrome, Yandex Browser, Opera, Firefox。
使用方法
在页面中引入下面的文件。
<linkhref="light-theme.min.css"rel="stylesheet"><scriptsrc='growl-notification.min.js'></script>
初始化插件
GrowlNotification.notify({title:'Thisistitle',description:'MyDescription'});
配置参数
GrowlNotification.notify({margin:20,type:'default',title:'',description:'',image:{visible:false,customImage:''},closeTimeout:0,closeWith:['click','button'],animation:{open:'slide-in',close:'slide-out'},animationDuration:.2,position:'top-right',showBorder:false,showButtons:false,buttons:{action:{text:'Ok',callback:function(){}},cancel:{text:'Cancel',callback:function(){}}},showProgress:false});
参数默认值描述width: number|stringnull消息通知框的宽度,例如 100px, 50%…zIndex: number1056消息通知框的 z-indextype: string'alert'alert, success, error, warning, infoposition: string'top-right'top-left, top-right, bottom-left, bottom-right, top-center, bottom-centertitle: string''标题,可以包括HTML内容(input 元素除外)description: string''描述,可以包括 HTML 内容(input 元素除外)image.visible: booleanfalse显示隐藏图片image.customImage: string''自定义图片的路径closeTimeout: boolean,intfalse延迟关闭对话框的时间,单位毫秒。closeWith: […string]['click']click, buttonanimation.open: string,null,false'slide-in'如果是string, 表示使用 css 类名. 如果是false|null|'none', 不会使用动画效果。 'slide-in', 'fade-in'animation.close: string,null,false'slide-out'I 如果string,表示使用 css 类名. 如果是false|null|'none',不会使用动画效果。 'slide-out', 'fade-out'showButtons: true,falsefalse显示或隐藏按钮。buttons: objectbuttons:{action:{text:'Ok',callback:function{}//callback},cancel:{text:'Cancel',callback:function{}//callback}}Buttons configurationshowProgress: true,falsefalse显示或隐藏进度条GrowlNotification.setGlobalOptions: object{}为消息框设置全局参数。GrowlNotification.closeAll-关闭所有消息框。
产品猿社区致力收录更多优质的商业产品,给服务商以及软件采购客户提供更多优质的软件产品,帮助开发者变现来实现多方共赢;
日常运营的过程中我们难免会遇到各种版权纠纷等问题,如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用,您可按照我们投诉流程处理,点我投诉;
本文来自用户发布投稿,不代表产品猿立场 ;若对此文有疑问或内容有严重错误,可联系平台客服反馈;
部分产品是用户投稿,可能本文没有提供官方下下载地址或教程,若您看到的内容没有下载入口,您可以在我们产品园商城搜索看开发者是否有发布商品;若您是开发者,也诚邀您入驻商城平台发布的产品,地址:点我进入;
如若转载,请注明出处:https://www.chanpinyuan.cn/35214.html;