当前位置： 移动技术网 > IT编程>开发语言>Jquery > jQuery toastr提示简单实现

jQuery toastr提示简单实现

2019年01月15日  | 移动技术网IT编程  | 我要评论

注：在学校平时做的小项目跳页都是用 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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网