Permalink
9785b57 May 1, 2015
Ian Maffett afui
206 lines (180 sloc) 8.2 KB
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>App Framework Kitchen Sink</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="src/css/icons.css" />
<link rel="stylesheet" type="text/css" href="../build/af.ui.css" />
<script type="text/javascript" charset="utf-8" src="./jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="3rdparty/fastclick.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.shim.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.ui.js"></script>
<script src="src/af.desktopBrowsers.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.actionsheet.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.animation.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.touchEvents.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.popup.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.drawer.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.toast.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.animateheader.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.splashscreen.js"></script>
<script type="text/javascript" charset="utf-8" src="src/af.swipereveal.js"></script>
<script>
$.afui.useOSThemes=true;
$.afui.loadDefaultHash=true;
$(document).ready(function(){
//$.afui.splitview.enable();
})
if($.os.ios)
$.afui.animateHeader();
</script>
</head>
<body >
<div id="splashscreen" class='ui-loader heavy'>
App Framework
<br>
<br>
<span class='ui-icon ui-icon-loading spin'></span>
<h1>Starting app</h1>
</div>
<div class="view" id="mainview">
<header>
<h1>What</h1>
</header>
<div class="pages">
<div data-left-drawer="left" class="panel" id="main" data-title="Main" data-selected="true">
<ul class="list">
<li><a href="#login" data-transition="up-reveal">Login View (modal)</a></li>
<li><a href="#drawer" >Drawer</a></li>
<li><a href="ajax.html" data-refresh="true" >Ajax</a></li>
<li><a href="#toast" data-transition="flip">Toast</a></li>
<li><a href="#afforms" >Form Elements</a></li>
<li><a href="#popup">Popup</a></li>
<li><a href="#actionsheet">Actionsheet</a></li>
<li><a href="#foobar">Button Groups</a></li>
<li><a href="#cards">cards</a></li>
</ul>
</div>
<div class="panel" id="popup" data-title="Popup Plugin" data-include="partials/popup.html">
</div>
<div class="panel" id="actionsheet" data-title="Actionsheet Plugin" data-include="partials/actionsheet.html">
</div>
<div class="panel" id="toast" data-title="Toast Plugin" data-include="partials/toast.html">
</div>
<div data-left-drawer="left" class="panel" id="foobar" data-title="Foobar">
Foobar stuff goes here
<div class='button-grouped tabbed'>
<a class='button'>One</a>
<a class='button'>two</a>
<a class='button'>three</a>
</div>
</div>
<div data-left-drawer="left" class="panel" id="cards" data-title="Cards">
<br>
<div class="card">
<h1>Card One</h1>
<h2>Card Two</h2>
</div>
<div class="card">
<h1 class='info'>Meeting</h1>
<p>This is card content</p>
</div>
</div>
<div class="panel" id="drawer" data-title="Drawer">
<a href="#" class="button" onclick="$.afui.drawer.hide('#left')">Hide Left</a>
<a href="#" class="button" data-menu-close>Hide Active</a>
<a href="#" class="button" data-menu-close data-right-menu="right">Hide Right</a>
<br>
<a href="#" class="button" data-left-menu="left" >Cover Left</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right')">Cover Right</a>
<br>
<a href="#" class="button" data-left-menu="left" data-transition="push">Left Push</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#left','left','reveal')">Left Reveal</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right','push')">Right Push</a>
<br>
<a href="#" class="button" onclick="$.afui.drawer.show('#right','right','reveal')">Right Reveal</a>
</div>
<div id="afforms" title="Form Styles" class="panel" data-include="partials/forms.html"></div>
</div>
<footer>
<a href="#main" class="icon home">Main</a>
<a href="#about" class="icon html5" data-transition="up-reveal">About</a>
<a href="#test" class="icon trash">test</a>
<a href="#touchevents" class="icon trash">Touch Events</a>
</footer>
<nav id="left" data-include="partials/leftnav.html">
</nav>
<nav id="right">
<div class="view active" id="navView2">
<header>
<h1>What</h1>
</header>
<div class="pages">
<div class="panel active" id="rightNav" data-title="Foobar">
This is the right nav
</div>
</div>
</div>
</nav>
</div>
<div class="view" id="touchView">
<header><h1></h1></header>
<div class="pages">
<div class="panel" data-title="touch events" id="touchevents" data-include="partials/touch.html">
</div>
</div>
</div>
<div class="view" id="aboutView">
<header>
<h1>Bar</h1>
</header>
<div class="pages">
<div class="panel" id="about" data-title="Bar">
About
</div>
</div>
<footer>
<a href="#" class="icon home" data-back >Home</a>
<a href="#test" class="icon home">Test</a>
</footer>
</div>
<div class="view" id="testView">
<header>
<h1>Bar</h1>
</header>
<div class="pages">
<div class="panel" id="test" data-title="Test Tabbar">
About
</div>
</div>
<footer>
<a class="button" href="#main">Something</a>
</footer>
</div>
<div class="view" id="loginView">
<div class="pages">
<div class="panel" id="login">
<h1>Login</h1>
<div style="height:300px">
</div>
<label>Test<input type="text" placeholder="Username">
<br>
<a class='button' href='#' data-message='Hi There' data-alert>Alert</a>
<a class='button' href='#main' data-transition='up-reveal:dismiss'>Back</a>
<div style="height:300px;background:green;">
asdf
</div>
more stuff
</div>
</div>
</div>
</body>
</html>