bit dojo labs : file explorer
Inspecting: home > js > DojoPager > index.html (download)<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DojoPager</title>
<style type="text/css">
body {
color: #444;
font-family: "Calibri", Arial, Helvetica, sans-serif;
}
#content {
margin: 40px;
}
#pager-container {
height: auto;
width: 300px;
border: 2px #aaa solid;
padding: 5px;
}
.pager-item {
border: 2px #aaa solid;
padding: 5px;
margin: 0 0 5px 0;
}
</style>
<script type="text/javascript" src="js/lib/prototype.js"></script>
<script type="text/javascript" src="js/lib/scriptaculous.js"></script>
<script type="text/javascript" src="js/DojoPager.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function(e){
var myPager = new DojoPager({
containerId: "pager-container",
itemClass: "pager-item",
infoId: "pager-info",
infoFormat: "(%CurrentPage/%NumPages)",
nextActionId: "pager-next-page",
prevActionId: "pager-prev-page"
});
});
</script>
</head>
<body>
<div id="content">
<h1>DojoPager</h1>
<div id="pager-container">
<div class="pager-item">Test item 01 <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus, metus quis laoreet feugiat, nulla sapien euismod leo, a fermentum lectus tortor in orci.</div>
<div class="pager-item">Test item 02 <br/> Aenean sollicitudin elit sed lectus pellentesque convallis. Donec volutpat ante consectetur orci placerat et rhoncus enim egestas. Nam hendrerit,</div>
<div class="pager-item">Test item 03 <br/> </div>
<div class="pager-item">Test item 04 <br/> </div>
<div class="pager-item">Test item 05 <br/> Donec volutpat ante consectetur orci placerat</div>
<div class="pager-item">Test item 06 <br/> </div>
<div class="pager-item">Test item 07 <br/> </div>
<div class="pager-item">Test item 08 <br/> consectetur adipiscing elit. Phasellus tempus</div>
<div class="pager-item">Test item 09 <br/> </div>
<div class="pager-item">Test item 10 <br/> </div>
<div class="pager-item">Test item 11 <br/> elit sed lectus pellentesque convallis. Donec volutpat ante</div>
<div class="pager-item">Test item 12 <br/> ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus, metus quis laoreet feugiat, nulla sapien euismod leo, a fermentum</div>
<div class="pager-item">Test item 13 <br/> </div>
<div class="pager-item">Test item 14 <br/> </div>
<div class="pager-item">Test item 15 <br/> </div>
<div class="pager-item">Test item 16 <br/> Phasellus tempus, metus quis laoreet feugiat, nulla sapien euismod leo</div>
<div class="pager-item">Test item 17 <br/> </div>
<div class="pager-item">Test item 18 <br/> </div>
</div>
<br />
<a href="#" id="pager-prev-page">< prev</a>
<span id="pager-info"></span>
<a href="#" id="pager-next-page">next ></a>
</div>
</body>
</html>