Question

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

这些是Plugin的内容

布局[FOLDER]（包括bottom.js，bottomleft.js，top.js，topright.js等文件......
打包[FOLDER]（包含两个文件jquery.noty.packaged.js＆amp; jquery.noty.packaged.min.js）
主题[FOLDER]（包括bootstrap.js，defalut.js＆amp; relax.js）
jquery.noty.js [FILE]
promise.js [FILE]

Answer 1

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

noty({text: 'magic'});

＆＃13;

// 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())})

＆＃13;

<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>

＆＃13;

theese是默认选项：

$.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通知

1 个答案: