阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.AmaranJS 中文API文档

      插件 jQuery.AmaranJS 中文API文档 https://github.com/hakanersu/AmaranJS AmaranJS jQuery Notification Plugin

      Nice, sleek and stylish notifications.

      Demo & Documentation

      You can check AmaranJS v.1.0.1, with this version amaranjs no longer requires jquery and most of the animations moved to css animations.

      What is new and What is changed

      • Blur Theme ,Rounded Theme and Read More theme removed.
      • All javascript codes ported to coffee and css to sass.
      • Animate.css and options added for alternative css3 effects.

      Some Features

      Here is the some basic features of AmaranJS.But i recommend that review the examples and check demos.

      • Easy notification creation.
      • Unique notification animations.
      • Included stylish themes.
      • Easily adapt your own themes.
      • Callbacks

      Installation

      Go to dist directory and copy all the folders to a new destination, which will be your project home.

      It’s not required, but i recommend placing CSS files in <head> and JavaScript files and initialization code in the footer of your site (before the closing </body> tag).

      jQuery required for Amaran JS.If you already have jquery.js on your site, don’t include it a second time, or use jQuery.noConflict(); mode

      <link rel="stylesheet" href="/css/amaran.min.css">
      

      You can add jQuery via Google CDN

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      

      Place Amaran JS after jQuery

      <script src="/js/jquery.amaran.js"></script>
      

      So minimalistic setup look like this

      <!DOCTYPE html>
      <html>
      <head>
          <title>My Web Page</title>
          <link rel="stylesheet" href="/css/amaran.min.css">
      </head>
      <body>
          <p>My Content</p>
          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script src="/js/jquery.amaran.js"></script>
      </body>
      </html>
      

      Optional Steps

      • Awesome theme uses fontawesome if you want to use awesome theme you have to include fontawesome.
      <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
      
      <link rel="stylesheet" href="/css/animate.min.css">
      

      Usage

      AmaranJS included 4 theme (for now).

      Very basic usage ,not include any theme.

      $(function(){
          $.amaran({'message':'My first example!'});
      });
      

      If you want to use included themes , you have to pass content object with desired fields.

      Awesome theme usage.

      $.amaran({
          content:{
              title:'My first funcy example!',
              message:'1.4 GB',
              info:'my_birthday.mp4',
              icon:'fa fa-download'
          },
          theme:'awesome ok'
      });
      
      
      目录
      目录