zoukankan      html  css  js  c++  java
  • jquery toastr弹窗的代码和使用

    <link href="toastr.css" rel="stylesheet" type="text/css" />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="toastr.js"></script>
    写入html代码,这里只需写入触发事件的按丑。
    
    <input type="button" name="success" id="success" value="成功"/>
    <input type="button" name="info" id="info" value="提示"/>
    <input type="button" name="warning" id="warning" value="警告"/>
    <input type="button" name="error" id="error" value="错误"/>
    <input type="button" name="clear" id="clear" value="清除"/>
    给按钮绑定事件
    
    $(function(){
        //参数设置,若用默认值可以省略以下面代
        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-full-width",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "5000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
            };
     
            //成功提示绑定
            $("#success").click(function(){
            toastr.success("祝贺你成功了");
            })
             
            //信息提示绑定
            $("#info").click(function(){
            toastr.info("这是一个提示信息");
            })
             
            //敬告提示绑定
            $("#warning").click(function(){
            toastr.warning("警告你别来烦我了");
            })
             
            //错语提示绑定
            $("#error").click(function(){
            toastr.error("出现错误,请更改");
            })
             
            //清除窗口绑定
            $("#clear").click(function(){
            toastr.clear();
            })
        })  
  • 相关阅读:
    Java技术学习笔记:C/S 与B/S 区别
    Java开发面试题总结(八)
    Java技术笔记:数据库的性能优化
    零基础学习Python可以学会吗?你有哪些方法?
    java培训学习路线图之SpringBoot多模块开发学习
    计算机专业选Java和Python哪个前景好点?
    bzoj2152 聪聪可可
    bzoj1468 Tree
    bzoj2879 [Noi2012]美食节
    bzoj2208 [Jsoi2010]连通数
  • 原文地址:https://www.cnblogs.com/Lxiaojiang/p/6245912.html
Copyright © 2011-2022 走看看