Skip to content

Commit

Permalink
Examples added!
Browse files Browse the repository at this point in the history
  • Loading branch information
@hakanersu
hakanersu committed Dec 12, 2014
1 parent 3655905 commit fde94a6
Show file tree
Hide file tree
Showing 40 changed files with 2,582 additions and 1 deletion.
1 change: 0 additions & 1 deletion .gitignore
View file
Expand Up @@ -15,7 +15,6 @@ logs
results
build
.grunt
/examples
node_modules
amaranjs/node_modules/*
/.idea/
Expand Down
57 changes: 57 additions & 0 deletions examples/001-basic.html
View file
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AmaranJS Examples</title>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/amaran.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/animate.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ignore styles below you dont need for basic setup -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/jquery.share.css"/>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/obisidian.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="global.css"/>
<!-- Ignored -->
</head>
<body>
<header role="banner" class="container">
<a id="logo" href="/AmaranJS">
amaranJS
</a>
<nav id="main-menu">
<ul>
<li><a href="#getting-started">Demo</a></li>
<li><a href="http://hakanersu.github.io/AmaranJS/documentation">Documentation</a></li>
<li><a href="https://github.com/hakanersu/AmaranJS/archive/0.5.0.zip">Download</a></li>
</ul>
</nav>
</header>
<div class="container">
<div id="box">
<button id="start">Start</button>
<div id="ex">
<p>Basic usage of AmaranJS</p>
<p>You can always spam click on button.</p>
</div>
<div id="pre">
<pre>
$('#start').on('click',function(){
$.amaran({'message':'My first example!'});
});</pre>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hakanersu.github.io/AmaranJS/dist/js/jquery.amaran.js"></script>
<script>
$(function(){
$('#start').on('click',function(){
$.amaran({'message':'My first example!'});
});
});
</script>
</html>
62 changes: 62 additions & 0 deletions examples/002-setting-position-top-left.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AmaranJS Examples</title>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/amaran.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/animate.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ignore styles below you dont need for basic setup -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/jquery.share.css"/>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/obisidian.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="global.css"/>
<!-- Ignored -->
</head>
<body>
<header role="banner" class="container">
<a id="logo" href="/AmaranJS">
amaranJS
</a>
<nav id="main-menu">
<ul>
<li><a href="#getting-started">Demo</a></li>
<li><a href="http://hakanersu.github.io/AmaranJS/documentation">Documentation</a></li>
<li><a href="https://github.com/hakanersu/AmaranJS/archive/0.5.0.zip">Download</a></li>
</ul>
</nav>
</header>
<div class="container">
<div id="box">
<button id="start">Start</button>
<div id="ex">
<p>Setting position top left.</p>
</div>
<div id="pre">
<pre>
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'top left'
});
});</pre>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hakanersu.github.io/AmaranJS/dist/js/jquery.amaran.js"></script>
<script>
$(function(){
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'top left'
});
});
});
</script>
</html>
62 changes: 62 additions & 0 deletions examples/003-setting-position-top-right.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AmaranJS Examples</title>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/amaran.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/animate.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ignore styles below you dont need for basic setup -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/jquery.share.css"/>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/obisidian.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="global.css"/>
<!-- Ignored -->
</head>
<body>
<header role="banner" class="container">
<a id="logo" href="/AmaranJS">
amaranJS
</a>
<nav id="main-menu">
<ul>
<li><a href="#getting-started">Demo</a></li>
<li><a href="http://hakanersu.github.io/AmaranJS/documentation">Documentation</a></li>
<li><a href="https://github.com/hakanersu/AmaranJS/archive/0.5.0.zip">Download</a></li>
</ul>
</nav>
</header>
<div class="container">
<div id="box">
<button id="start">Start</button>
<div id="ex">
<p>Setting position top right.</p>
</div>
<div id="pre">
<pre>
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'top right'
});
});</pre>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hakanersu.github.io/AmaranJS/dist/js/jquery.amaran.js"></script>
<script>
$(function(){
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'top right'
});
});
});
</script>
</html>
62 changes: 62 additions & 0 deletions examples/004-setting-position-bottom-left.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AmaranJS Examples</title>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/amaran.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/animate.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ignore styles below you dont need for basic setup -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/jquery.share.css"/>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/obisidian.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="global.css"/>
<!-- Ignored -->
</head>
<body>
<header role="banner" class="container">
<a id="logo" href="/AmaranJS">
amaranJS
</a>
<nav id="main-menu">
<ul>
<li><a href="#getting-started">Demo</a></li>
<li><a href="http://hakanersu.github.io/AmaranJS/documentation">Documentation</a></li>
<li><a href="https://github.com/hakanersu/AmaranJS/archive/0.5.0.zip">Download</a></li>
</ul>
</nav>
</header>
<div class="container">
<div id="box">
<button id="start">Start</button>
<div id="ex">
<p>Setting position bottom left.</p>
</div>
<div id="pre">
<pre>
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'bottom left'
});
});</pre>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hakanersu.github.io/AmaranJS/dist/js/jquery.amaran.js"></script>
<script>
$(function(){
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'bottom left'
});
});
});
</script>
</html>
62 changes: 62 additions & 0 deletions examples/005-setting-position-bottom-right.html
View file
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AmaranJS Examples</title>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/amaran.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/animate.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ignore styles below you dont need for basic setup -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/jquery.share.css"/>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/obisidian.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="global.css"/>
<!-- Ignored -->
</head>
<body>
<header role="banner" class="container">
<a id="logo" href="/AmaranJS">
amaranJS
</a>
<nav id="main-menu">
<ul>
<li><a href="#getting-started">Demo</a></li>
<li><a href="http://hakanersu.github.io/AmaranJS/documentation">Documentation</a></li>
<li><a href="https://github.com/hakanersu/AmaranJS/archive/0.5.0.zip">Download</a></li>
</ul>
</nav>
</header>
<div class="container">
<div id="box">
<button id="start">Start</button>
<div id="ex">
<p>Setting position bottom right.</p>
</div>
<div id="pre">
<pre>
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'bottom right'
});
});</pre>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hakanersu.github.io/AmaranJS/dist/js/jquery.amaran.js"></script>
<script>
$(function(){
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'bottom right'
});
});
});
</script>
</html>
65 changes: 65 additions & 0 deletions examples/006-setting-in-effect-slideright.html
View file
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AmaranJS Examples</title>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/amaran.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/dist/css/animate.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Ignore styles below you dont need for basic setup -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/jquery.share.css"/>
<link rel="stylesheet" href="http://hakanersu.github.io/AmaranJS/css/obisidian.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="global.css"/>
<!-- Ignored -->
</head>
<body>
<header role="banner" class="container">
<a id="logo" href="/AmaranJS">
amaranJS
</a>
<nav id="main-menu">
<ul>
<li><a href="#getting-started">Demo</a></li>
<li><a href="http://hakanersu.github.io/AmaranJS/documentation">Documentation</a></li>
<li><a href="https://github.com/hakanersu/AmaranJS/archive/0.5.0.zip">Download</a></li>
</ul>
</nav>
</header>
<div class="container">
<div id="box">
<button id="start">Start</button>
<div id="ex">
<p>Lets create an notification at top left and set in effect slideRight.You can choose location whatever you want.</p>
<p>Check next example , slideRight with 'top right' it is more elegant.</p>
</div>
<div id="pre">
<pre>
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'top left',
'inEffect' :'slideRight'
});
});</pre>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://hakanersu.github.io/AmaranJS/dist/js/jquery.amaran.js"></script>
<script>
$(function(){
$('#start').on('click',function(){
$.amaran({
'message' :'My positioning example.',
'position' :'top left',
'inEffect' :'slideRight'
});
});
});
</script>
</html>

0 comments on commit fde94a6

Please sign in to comment.