Jquery plugin to make a web app
The plugin is build on jquery 2.X
Demo can be found here: http://www.atticweb.nl/mobor-js
###Index
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mobor-js</title>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/mobor.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/mobor.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page" id="index">
</div>
</body>
</html>###Page
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page</title>
</head>
<body>
<div class="page" id="page">
</div>
</body>
</html>To make a element link to another page u can use a anchor tag:
<a href="page_2.html">page 2</a>To make a anchor to a website outside of the app, add the class 'external':
<a href="http://www.google.com" class="external">google.com</a>You can also use other elements to link to another page:
<button class="navigate" data-url="page_2.html">page 2</button>You can add data attributes to change the page transition or direction:
<a href="page_2.html" data-transition="slide" direction="forward">page 2</a>You can also do it with javascript:
$.navigate('page-2.html', 'slide', 'forward');- slide (default)
- forward (default)
- backward
- fade
- none
There are some events during the navigation: #####page_load Triggers when a page is loading.
#####page_loaded Triggers when a page is loaded.
#####transition_done Triggers when the transition of the page is done.
You can get the URL from this events with the 'URL' param.
#####Usage:
$(document).on('page_loaded', handler);
function handler(e)
{
alert(e.URL+' is loaded!');
}