-
Notifications
You must be signed in to change notification settings - Fork 1
Basic usage of Presentation.js
holyshared edited this page Jan 19, 2012
·
10 revisions
The directions for Presentation.js are explained.
It can be used easily.
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8" />
<title>Presentation.js</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<article id="presentation" class="presentation">
<header class="header">
<h1>Presentation.js</h1>
</header>
<!-- Page container -->
<article data-presentation-role="container" class="container">
<!-- Page1 -->
<section data-presentation-role="content" class="content">
<hgroup>
<h2>Page1 title</h2>
<h3>Page sub title</h3>
</hgroup>
<p>page content</p>
</section>
<!-- Page2 -->
<section data-presentation-role="content" class="content">
<hgroup>
<h2>Page2 title</h2>
<h3>Page sub title</h3>
</hgroup>
<p>page content</p>
</section>
</article>
<!-- Controller helper plugin -->
<div class="controller">
<button title="First" type="button" class="first disabled">first</button>
<button title="Prev" type="button" class="prev disabled">prev</button>
<button title="Next" type="button" class="next">next</button>
<button title="Last" type="button" class="last">last</button>
</div>
<!-- /Controller helper plugin -->
<!-- Page helper plugin -->
<div class="page">
<span class="current"></span> / <span class="total"></span>
</div>
<!-- /Page helper plugin -->
<footer class="footer">
<p class="copyright">Copyright 2012 <a title="Your name" href="#">Your name</a> all rights reserved.</p>
</footer>
</article>
</body>
</html>
A required library is read.
Here, presentation-standard.js is read.
Please have a look here about the specification of presentation-standard.js.
<script src="js/lib/mootools/mootools-core-1.4.2.js"></script>
<script src="js/lib/presentation/presentation-standard.js"></script>
There are not many codes which must be described to make it actually operate.
Plugin to use is registered and a start method is only performed.
(function(plugins){
this.addEvent('domready', function(){
var p = new Presentation('presentation');
p.addHelper(new plugins.Controller()) //GUI controller helper plugin enabled.
.addHelper(new plugins.Keyboard()) //Keyboard operation is enabled.
.addHelper(new plugins.Page()); //Page helper plugin is enabled.
p.displayFullScreen() //It displays on a full screen.
.start(); //presentation.js is started.
});
}.call(this, Presentation.Helper));