插件 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'
});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了