123 lines
3.0 KiB
HTML
123 lines
3.0 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<title>scrollable no-dojo</title>
|
|
<!--
|
|
scrollable.js is a hybrid module, which can be used with or without dojo.
|
|
In this example, scrollable.js is used without dojo.
|
|
scrollable.js has several methods that simulate dojo APIs, which are used
|
|
when you use scrollable.js without dojo.
|
|
Note that those methods are surrounded by excludeStart/excludeEnd pragmas,
|
|
and will be removed if you do typical dojo build.
|
|
If that is the case, this example does not work.
|
|
-->
|
|
<style>
|
|
html, body{
|
|
height: 100%;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
.domNode {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#header1 {
|
|
position: relative;
|
|
margin: 0px;
|
|
width: 100%;
|
|
background-color: cyan;
|
|
z-index: 1;
|
|
font-size: 20px;
|
|
}
|
|
|
|
</style>
|
|
<script type="text/javascript" src="../scrollable.js"></script>
|
|
|
|
<script language="JavaScript" type="text/javascript">
|
|
function onLoad(){
|
|
var scrollable = new dojox.mobile.scrollable();
|
|
scrollable.init({
|
|
domNode: document.getElementById("outer"),
|
|
containerNode: document.getElementById("inner")
|
|
});
|
|
dojo.connect(dojo.global, (dojo.global.onorientationchange !== undefined)
|
|
? "onorientationchange" : "onresize", scrollable, "resize");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="onLoad()">
|
|
<h1 id="header1">Fixed Header (No-Dojo)</h1>
|
|
<div id="outer" class="domNode">
|
|
<div id="inner" class="containerNode" style="position:absolute;width:100%">
|
|
<ol>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
<li>Item</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|