2015-10-20 4 views
0

Я новичок в мире jquery. Я не знаю, как реализовать «Noty - Notification» плагин в WordPress сайта, как создать уведомление и анимации и т.д .. документация не содержит файлы справкиКак реализовать (Noty) уведомление jquery в wordpress сайте

Это содержимое плагина

  • Layout [ПАПКА] (Включает в себя файлы, такие как 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 [ФАЙЛ]

ответ

3

В документацию не включены примеры? 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>

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 
}; 
+0

Существует демо-каталог. В каких примерах работают, но я не знаю, как их реализовать на сайте. Я хочу показать уведомление на моей домашней странице, как показано на http://ned.im/noty/#about –

+0

@FarrukhJavaid просто попробуйте запустить мой фрагмент кода. если вы все еще не знаете, как использовать noty, вы можете сначала изучить javascript. все, что я сделал, чтобы получить эту работу, - это очистить URL, который я вам предоставил. – GottZ

+0

Thans for reply, я получаю именно то, что хочу показать, но на странице http://cdn.frkmusic.info/static/usingWithAnimate.css.html, я хочу показать его на главной странице сайта автоматически при загрузке главной страницы , Можете ли вы помочь мне больше в этом вопросе? как я могу это сделать. Вы можете посмотреть, какие файлы я загрузил в http://cdn.frkmusic.info/static/ –