如何在 wordpress 站点中实现 (Noty) jquery 通知

Question

我是 jquery 世界的新手。我不知道如何在 wordpress 站点中实现 "Noty - Notification" 插件，如何创建通知和动画等。文档不包括帮助文件

这些是插件的内容

布局 [文件夹]（包括 bottom.js、bottomleft.js、top.js、topright.js 等文件...
已打包 [FOLDER]（包括两个文件 jquery.noty.packaged.js & jquery.noty.packaged.min.js）
主题 [文件夹]（包括 bootstrap.js、defalut.js 和 relax.js）
jquery.noty.js [文件]
promise.js [文件]

Answer 1

文档不包含示例？ http://ned.im/noty/#/about 再检查一次..确实如此。

noty({text: 'magic'});

// never use eval unless you know what you do. just try this snippet to see some
// examples in how you can use this.
// for demonstration purposes i simply added the actual code to the buttons visible text.
$("button").click(function(){eval($(this).text())})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.3.7/packaged/jquery.noty.packaged.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<button>
    noty({text: "Hello World!"});
</button><br>
<button>
    noty({text: "message on top right", layout: "topRight"});
</button><br>
<button>
    noty({text: "message on bottom", layout: "bottom"});
</button><br>
<button>
    noty({text: "error!", type: "error", layout: "topRight"});
</button><br>
<button>
    noty({
        text: "this will disappear after 4 seconds",
        type: "error", layout: "topRight", timeout: 4000, 
        animation: {
            open: 'animated bounceInRight', // in order to use this you'll need animate.css
            close: 'animated bounceOutRight',
            easing: 'swing',
            speed: 500
        }
    });
</button>

这些是默认选项：

$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme', // or 'relax'
    type: 'alert',
    text: '', // can be html or string
    dismissQueue: true, // If you want to use queue feature set this true
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
    animation: {
        open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
        close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
        easing: 'swing',
        speed: 500 // opening & closing animation speed
    },
    timeout: false, // delay for closing event. Set false for sticky notifications
    force: false, // adds notification to the beginning of queue when set to true
    modal: false,
    maxVisible: 5, // you can set max visible notification for dismissQueue true option,
    killer: false, // for close all notifications before show
    closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
    callback: {
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {},
        onCloseClick: function() {},
    },
    buttons: false // an array of buttons
};

如何在 wordpress 站点中实现 (Noty) jquery 通知

How to implement (Noty) jquery notification in wordpress site

javascript

wordpress

jquery

notifications

noty