zoukankan      html  css  js  c++  java
  • jQuery toastr提示简单实现

    注:在学校平时做的小项目跳页都是用 Response.Write写脚本弹窗并跳页,每次点击登录成功,注册成功......然后点击确定,太麻烦了,这次的项目老师说让用这个插件,所以就简单搞了一下!

    实现效果:当点击登录时,通过异步和数据库连接查询,如果成功,弹出成功提示几秒,然后再自动跳页,如果登录失败,直接提示登录失败,因为很简单,所以就直接写代码了,就当简单复习一下啦!哈哈


    先引入三个链接:如下(直接去网上下载就行)


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


    HTML页面:因为举例子,就直接放一些个服务器空间的按钮,没有放<input type="button">的原因是因为在用服务器控件实现的时候,遇到了一些问题,然后解决了一下

    <asp:Button ID="success" runat="server" Text="Button" />
    <asp:Button ID="info" runat="server" Text="Button" />
    <asp:Button ID="warning" runat="server" Text="Button" />
    <asp:Button ID="error" runat="server" Text="Button" />
    <asp:Button ID="Button1" runat="server" Text="登录"/>   就用这个按钮吧!
    <input type="button" name="clear" id="clear" value="清除" />


    JavaScript代码:

    <script>
            $(function () {
                toastr.options = {
                    "closeButton": false,
                    "debug": false,
                    "positionClass": "toast-top-right",
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };
                $("#success").click(function () {
    
                    toastr.success("祝贺你成功了");
                    return false;
    
                })
                //信息提示绑定
    
                $("#info").click(function () {
                    toastr.info("这是一个提示信息");
                    return false;
                })
    
                $("#warning").click(function () {
    
                    toastr.warning("警告你别来烦我了");
                    return false;
                })
    
                $("#error").click(function () {
    
                    toastr.error("出现错误,请更改");
                    return false;
                })
    
                $("#clear").click(function () {
    
                    toastr.clear();
    
                })
                $("#Button1").click(function () {
                    $.get("Handler.ashx", {}, function (data) {
                        
                        if (data == "true") {
                            toastr.success("祝贺你成功了");
    
                            setTimeout(function () {
                                window.location.href = "Default.aspx";
                            }, 1000)
                            return false;
                        }
                        else {
                            toastr.error("出现错误,请更改");
                        }
                    })
                    return false;
                }) 
            })
        </script>

    到这里就结束啦!希望大神们给我指点指点,修改修改,感激不尽!

  • 相关阅读:
    elemntui-tab添加图标
    动态添加input,然后获取所有的input框中的值
    jmeter_使用接口传递数据
    python_异常
    python_内置函数和open
    jmeter_安装
    jmeter_使用_设置代理录制脚本
    python_函数
    python_while
    python_if、for
  • 原文地址:https://www.cnblogs.com/dcy521/p/10265275.html
Copyright © 2011-2022 走看看