-
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>
@charset "utf-8";
/* 01. Reset style
-----------------------------------------*/
/* reset */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* fonts */
body{font:80% arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/* Fonts
-----------------*/
body {
font-family: Sylfaen, "Time New Roman", serif;
}
select, input, button, textarea {
font-family: Sylfaen, "Time New Roman", serif;
}
* {
margin: 0px;
padding: 0px;
}
body {
width: 100%;
height: 100%;
background: #ffffff;
}
button {
text-transform: capitalize;
}
/* Flow Content
--------------------------*/
article, header, footer, section, hgroup {
display: block;
}
/* Header
--------------------------*/
h1 {
font-weight: normal;
}
h2 {
font-size: 461%;
margin-bottom: 0.1%;
}
h3 {
font-size: 231%;
}
h4 {
font-size: 137%;
font-weight: bold;
border-bottom: 1px solid #cccccc;
padding-bottom: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 137%;
margin-bottom: 1.3%;
}
/* List
--------------------------*/
ul li {
list-style-type: disc;
margin-left: 2.8%;
padding-left: 0.3%;
}
ol li {
list-style-type: decimal;
margin-left: 3.1%;
padding-left: 0.3%;
}
/* Links
--------------------------*/
a {
color: #4971A0;
}
a:hover {
color: #F9A200;
}
/* 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%;
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);
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;
}
/* 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));