Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
127 lines (125 sloc) 5.57 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="../button/style.css">
<link rel="stylesheet" href="../cover/style.css">
<link rel="stylesheet" href="../input/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content-land { margin-left:50px}
</style>
<script type="text/javascript" src="../base/base.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="contact.js"></script>
</head>
<body class="content-land">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Page</h2>
<p>
Navigation is how users move between different pages in your app. MobileUI’s navigation follows standard native navigation concepts, like those in iOS.
</p>
<p>
For use this component you need install with command:
</p>
<pre>mobileui install page</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
<p>
The operation of this component is very simple, to open a new page just call the function <code>openPage('NAME_FILE_HTML')</code> and to go
back just call the function <code>backPage()</code>.
</p>
<p>
If you need disabled BackButton in your device, just define <code>window.disabledBackButton=true</code>.
</p>
<p>
If you need disabled effect when the page is openning in your device, just define <code>window.disabledOpenPageEffect=true</code>.
</p>
<textarea class="bind-code" mode="text/html" header-absolute="true" replace="body,div|grey-200,grey-200 body" height-preview="400px" border="true" multiplatform="true">
<body class="padding grey-200 has-header">
<div class="header blue">
<h1 class="title align-center">Home</h1>
</div>
<p>Using page component!</p>
<button class="green" onclick="openPage('contacts')">Go to a new Page</button>
</body></textarea>
<p>For the example above we have the <code>contacts</code> page:</p>
<textarea class="bind-just-code" mode="text/html">
<div class="page">
<div class="header blue">
<div class="left">
<button class="icon ion-ios-arrow-back" onclick="backPage()"></button>
</div>
<h1 class="title align-center">Contacts</h1>
</div>
<div class="content has-header">
<div class="list">
<div class="item" onclick="openPage('contact', {name:'Jeanette Fletcher'}, functionOpenContact)">
<img class="avatar left" src="../assets/img/33.jpg">
<h2>Jeanette Fletcher</h2>
<p>jeanette.fletcher15@example.com</p>
</div>
<div class="item" onclick="openPage('contact', {name:'Jack Oliver'}, functionOpenContact)">
<img class="avatar left" src="../assets/img/53.jpg">
<h2>Jack Oliver</h2>
<p>jack.oliver@example.com</p>
</div>
<div class="item" onclick="openPage('contact', {name:'Carter hudson'}, functionOpenContact)">
<img class="avatar left" src="../assets/img/96.jpg">
<h2>Carter hudson</h2>
<p>carter.hudson17@example.com</p>
</div>
</div>
</div>
</div></textarea>
<p>When you click on an item in the list the <code>contact</code> page appears:</p>
<textarea class="bind-just-code" mode="text/html">
<div class="page">
<div class="header blue">
<div class="left">
<button class="icon ion-ios-arrow-back" onclick="backPage()"></button>
</div>
<h1 class="title align-center">Contact</h1>
</div>
<div class="content has-header">
<div class="list">
<div class="item">
<label>NAME</label>
<input id="name" type="text" value="Jeanette Fletcher" readonly>
</div>
</div>
</div>
</div></textarea>
<p>And when opening the <code>contact</code> page the function <code>functionOpenContact</code> will be executed:</p>
<textarea class="bind-just-code" mode="text/javascript">
function functionOpenContact(params){
document.getElementById('name').value = params.name;
}</textarea>
<p>For advanced mode you can listener the event <code>openPage</code> and <code>closePage</code>.</p>
<textarea class="bind-just-code" mode="text/javascript">
document.addEventListener('openPage', function(e){
//It does something when the page is opened
//You can access name of page in: e.detail.page
})
document.addEventListener('backPage', function(e){
//It does something when the page is closed.
//You can access name of page in: e.detail.page
})</textarea>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/mode/javascript/javascript.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>
</html>