zoukankan      html  css  js  c++  java
  • jquery 消息提醒插件 toastmessage

    最近做系统,想到使用后台要使用消息提醒,但是一直苦恼消息提醒的效果,于是找了一个toastmessage,还不错。记录下使用的方法。

    第一步:引入需要的文件

    <script type="text/javascript" src="/js/admin/toastmessage/jquery.toastmessage.js"></script>
        <link href="/js/admin/toastmessage/css/jquery.toastmessage.css" type="text/css" rel="stylesheet" />

    第二步:测试使用的函数

    <script>
        function showSuccessToast() {
            $().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");
        }
        function showStickySuccessToast() {
            $().toastmessage('showToast', {
                text     : 'Success Dialog which is sticky',
                sticky   : true,
                position : 'top-right',
                type     : 'success',
                closeText: '',
                close    : function () {
                    console.log("toast is closed ...");
                }
            });
     
        }
        function showNoticeToast() {
            $().toastmessage('showNoticeToast', "Notice  Dialog which is fading away ...");
        }
        function showStickyNoticeToast() {
            $().toastmessage('showToast', {
                 text     : 'Notice Dialog which is sticky',
                 sticky   : true,
                 position : 'top-right',
                 type     : 'notice',
                 closeText: '',
                 close    : function () {console.log("toast is closed ...");}
            });
        }
        function showWarningToast() {
            $().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");
        }
        function showStickyWarningToast() {
            $().toastmessage('showToast', {
                text     : 'Warning Dialog which is sticky',
                sticky   : true,
                position : 'top-right',
                type     : 'warning',
                closeText: '',
                close    : function () {
                    console.log("toast is closed ...");
                }
            });
        }
        function showErrorToast() {
            $().toastmessage('showErrorToast', "Error Dialog which is fading away ...");
        }
        function showStickyErrorToast() {
            $().toastmessage('showToast', {
                text     : 'Error Dialog which is sticky',
                sticky   : true,
                position : 'top-right',
                type     : 'error',
                closeText: '',
                close    : function () {
                    console.log("toast is closed ...");
                }
            });
        }
    </script>

    实例网站:

    http://akquinet.github.io/jquery-toastmessage-plugin/demo/demo.html

    This entry was posted in Javascript and tagged   

  • 相关阅读:
    标准化:释放物联网全部潜力的万能钥匙
    Linux系统中如何删除交换文件,来解决突然关闭命令行,导致文件无法打开的问题
    echarts设置图例以及网络格局的相关细节设置
    JSON.parse()与JSON.stringify()的区别,具体例子,一看就明白
    HttpServletRequest
    HttpServletResponse
    JavaWeb核心之Servlet
    Http协议和Tomcat服务器
    dom4j解析
    DTD和Schema约束
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/5310047.html
Copyright © 2011-2022 走看看