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   

  • 相关阅读:
    JAVA面试必备笔记:必须掌握的核心技能点
    这里有份最全的微服务,看完你就通关了
    大厂流出:JAVA面试必问面试题及答案
    阿里面试官:请叙述一下HTTP和HTTPS的区别
    [LeetCode] Serialize and Deserialize BST
    [LeetCode] Serialize and Deserialize Binary Tree
    [LeetCode] Next Greater Element II
    [LeetCode] Next Greater Element I
    [MySQL] ACID
    [Linux] linux下生成静态库和动态库
  • 原文地址:https://www.cnblogs.com/Gbeniot/p/5310047.html
Copyright © 2011-2022 走看看