jquery通知插件toastr

jquery toastr 一款轻量级的通知提示框插件。

网页开发中经常会用到提示框，自带的alert样式无法调整，用户体验差。

所以一般通过自定义提示框来实现弹窗提示信息，而jquery toastr正是为此的一款非常棒的插件。

官方文档以及源码

源码网站jquery:  https://github.com/CodeSeven/toastr

api：http://www.ithao123.cn/content-2414918.html

（1）、引入js和css

<link href="~/Content/toastr/toastr.css" rel="stylesheet" />
<script src="~/Content/toastr/toastr.min.js"></script>

（2）、通过设置自定义参数，可达到不同的效果

自定义参数： 

toastr.options = {  
        closeButton: false,  
        debug: false,  
        progressBar: true,  
        positionClass: "toast-bottom-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "2000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut"  
    };

参数说明： 
closeButton：false，是否显示关闭按钮（提示框右上角关闭按钮）； 
debug：false，是否为调试； 
progressBar：false，是否显示进度条（设置关闭的超时时间进度条）； 
positionClass，消息框在页面显示的位置

将这个属性值设置为不同的值就能让提示信息显示在不同的位置，如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等，更过位置信息请查看文档。

positionClass
toast-top-left	顶端左边
toast-top-right	顶端右边
toast-top-center	顶端中间
toast-top-full-width	顶端中间(宽度铺满)
toast-bottom-right	底部右边
toast-bottom-left	底部左边
toast-bottom-center	底部中间
toast-bottom-full-width	底部中间(宽度铺满)

 

 

 

 

 

 

 

 

 

onclick，点击消息框自定义事件
showDuration: “300”，显示动作时间
hideDuration: “1000”，隐藏动作时间
timeOut: “2000”，自动关闭超时时间
extendedTimeOut: “1000”
showEasing: “swing”,
hideEasing: “linear”,
showMethod: “fadeIn” 显示的方式，和jquery相同
hideMethod: “fadeOut” 隐藏的方式，和jquery相同

开始使用

1.成功提示

1	toastr.success('Hello world!', 'Toastr fun!');

　　

2.普通提示

1	toastr.info('We are open today from 10 to 22', 'Information');

　　

3.错误提示

1	toastr.error('Your credentials are gone', 'Error');

　　

4.警告提示

1	toastr.warning('Your computer is about to explode!', 'Warning');

　　

第一个参数为提示内容，第二个参数为提示标题，如果不需要标题，则可省略第二个参数

1	toastr.success('I don\'t need a title to live');

　　

关闭提示框　　

1	toastr.clear([toast]);

 

获取当前显示的提示框

1	toastr.active();

 

刷新打开的提示框（第二个参数配置超时时间）　　

1	toastr.refreshTimer(toast, 5000);

 zDialog子页面调用OKEvent传参

主页面

 var diag = new top.Dialog();
             diag.Drag=true;
             diag.Title ="title";
             diag.URL = '<%=basePath%>businessDistribution/goSwitchSpecialist.do';
             diag.Width = 480;
             diag.Height = 330;
             console.dir(diag);
             diag.CancelEvent = function(){          
                diag.close();
             };
             diag.OKEvent = function(data){
              
             }
             diag.show();

子页面

var data={}
ownerDialog.OKEvent(data);//调用主页面OKEvent
top.Dialog.close();//关闭窗口