-
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.
A sample here is downloadable.
<!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>
The style of Presentation.js is specified in a stylesheet.
Carry out style attachment freely.
However, please do not delete the transition portion of CSS Level3.
/* 02. Layout
---------------------------------------------*/
.presentation {
width: 980px;
margin: 30px auto;
border-radius: 15px;
border: 1px solid #cccccc;
box-shadow: 0px 0px 10px #cccccc;
}
.header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
padding: 10px 0px 10px 0px;
}
.container {
height: 600px;
overflow: hidden;
position: relative;
background: #ffffff;
}
.footer {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 10px 0px 10px 0px;
overflow: hidden;
}
.header, .footer {
color: #ffffff;
background: #222222;
}
/* 03. Content
---------------------------------------------*/
.header h1 {
font-size: 108%;
line-height: 100%;
padding-left: 15px;
}
.content {
position: absolute;
width: 94%;
padding: 0px 3% 0px 3%;
/*
=====================================
START ANIMATION STYLE
It is a very important style.
It will not operate, if it deletes.
=====================================
*/
margin: 0px 0px 0px -50%;
left: 50%;
-moz-transition: left 0.3s cubic-bezier(0.85, 0, 0.15, 1);
-webkit-transition: left 0.3s cubic-bezier(0.85, 0, 0.15, 1);
-o-transition: left 0.3s cubic-bezier(0.85, 0, 0.15, 1);
-ms-transition: left 0.3s cubic-bezier(0.85, 0, 0.15, 1);
transition: left 0.3s cubic-bezier(0.85, 0, 0.15, 1);
/* END ANIMATION STYLE */
background: #ffffff;
}
.content:first-child {
left: 50%;
}
.content header,
.content hgroup {
margin: 5% 0px 30px 0px;
}
.footer p {
font-size: 108%;
}
.copyright {
text-align: right;
margin-bottom: 0px;
margin-right: 1%;
margin-top: 8px;
}
.copyright a {
color: #F9A200;
}
.copyright a:hover {
color: #FFFF00;
}
The style of plug-in is specified.
The style of the button is changed from the default style.
/* 04. Controller Helper
-----------------------------------------------------*/
.controller {
font-size: 108%;
float: left;
text-align: center;
margin-left: 1%;
margin-top: 0px;
}
.controller button {
display: inline-block;
padding: 5px 20px;
color: #FFFFFF;
border: 2px solid #FFFFFF;
border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #222222;
background-image: -moz-linear-gradient(center bottom, #222222 0%, #000000 100%);
background-image: -webkit-gradient(linear, left 80%, left top, from(#222222), to(#000000));
background-image: -o-linear-gradient(top, #000000 0%, #222222 100%);
}
.controller button:hover {
color: #FFFF00;
cursor: pointer;
}
.controller .disabled {
background-color: #aaaaaa;
background-image: -moz-linear-gradient(center bottom, #aaaaaa 0%, #cccccc 100%);
background-image: -webkit-gradient(linear, left 80%, left top, from(#aaaaaa), to(#cccccc));
background-image: -o-linear-gradient(top, #cccccc 0%, #aaaaaa 100%);
}
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));