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   

  • 相关阅读:
    个人冲刺(八)
    记账本典型用户和使用场景分析
    第九周进度总结
    个人冲刺(七)
    解密微信sqlite数据库
    读取文件内容时,显示的内容明显少于文本长度
    sqlcipher 数据库解密
    Win7系统的虚拟机中安装win7系统
    NSIS笔记
    vector list map set等容器某些函数的使用区别
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/5310047.html
Copyright © 2011-2022 走看看