zoukankan      html  css  js  c++  java
  • Jquery消息提示插件toastr

    toastr是一个基于jQuery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。

    1、使用很简单,首选引入toastr的js、css文件

    <script src="<%=path%>/res/toastr/toastr.min.js"></script>
    <link rel="stylesheet" href="<%=path%>/res/toastr/toastr.min.css">

    2、效果 

     3、集成使用

    //常规消息提示,默认背景为浅蓝色  
    toastr.info("你有新消息了!");  
    
    //成功消息提示,默认背景为浅绿色 
    toastr.success("你有新消息了!");  
    
    //警告消息提示,默认背景为橘黄色 
    toastr.warning("你有新消息了!");  
    
    //错误消息提示,默认背景为浅红色 
    toastr.error("你有新消息了!");  
    
    //带标题的消息框
    toastr.success("你有新消息了!","消息提示");  
    
    //另一种调用方法
    toastr["info"]("你有新消息了!","消息提示");

    4、自定义用法 
    通过设置自定义参数,可达到不同的效果

    自定义参数:

    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-top-left  顶端左边
    toast-top-right    顶端右边
    toast-top-center  顶端中间
    toast-top-full-width 顶端,宽度铺满整个屏幕
    toast-botton-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相同

    http://www.jq22.com/jquery-info476


  • 相关阅读:
    POJ 1811 Prime Test 素性测试 分解素因子
    sysbench的安装与使用
    电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案
    I.MX6 show battery states in commandLine
    RPi 2B Raspbian system install
    I.MX6 bq27441 driver porting
    I.MX6 隐藏电池图标
    I.MX6 Power off register hacking
    I.MX6 Goodix GT9xx touchscreen driver porting
    busybox filesystem httpd php-5.5.31 sqlite3 webserver
  • 原文地址:https://www.cnblogs.com/niuben/p/11454552.html
Copyright © 2011-2022 走看看