mirror of
https://github.com/moparisthebest/app-UI
synced 2024-11-15 13:45:04 -05:00
166 lines
7.9 KiB
HTML
166 lines
7.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>app-UI by triceam</title>
|
|
|
|
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<header>
|
|
<h1>app-UI</h1>
|
|
<p>If you're going to build an app, use this.</p>
|
|
<p class="view"><a href="https://github.com/triceam/app-UI">View the Project on GitHub <small>triceam/app-UI</small></a></p>
|
|
<ul>
|
|
<li><a href="https://github.com/triceam/app-UI/zipball/master">Download <strong>ZIP File</strong></a></li>
|
|
<li><a href="https://github.com/triceam/app-UI/tarball/master">Download <strong>TAR Ball</strong></a></li>
|
|
<li><a href="https://github.com/triceam/app-UI">Fork On <strong>GitHub</strong></a></li>
|
|
</ul>
|
|
</header>
|
|
<section>
|
|
|
|
|
|
<p><strong>app-UI</strong> is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress - it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.</p>
|
|
|
|
<p><em>Disclaimer: Please keep in mind that things will change as the project is improved and matured - this is a beta/early prototype.</em></p>
|
|
|
|
<p>app-UI was created by Andrew Trice
|
|
<ul>
|
|
<li>blog: <a href="http://tricedesigns.com" target="_blank">http://tricedesigns.com</a></li>
|
|
<li>twitter: <a href="https://twitter.com/#!/andytrice" target="_blank">https://twitter.com/#!/andytrice</a></li>
|
|
</ul>
|
|
</p>
|
|
|
|
<p>All of app-UI was created using HTML, CSS, & JavaScript. All animations are rendered using CSS3 translate3d, so that they are hardware accelerated (where supported). app-UI works well on iOS, Android and BlackBerry browsers (others not tested), and works well on most desktop browsers as well.</p>
|
|
|
|
<hr />
|
|
|
|
<h3>Application Containers</h3>
|
|
|
|
<p>app-UI currently has three application containers</p>
|
|
<p><em>Please see the "samples" directory for usage scenarios - there is no documentation yet.</em></p>
|
|
|
|
<h5>ViewNavigator</h5>
|
|
<p>The ViewNavigator component allows you to create mobile experiences with an easily recognizable mobile UI paradigm. You use this to push & pop views from the stack.</p>
|
|
<p>Samples:
|
|
<ul>
|
|
<li><a href="examples/samples/01 - viewnavigator/01 - basic/index.html" target="_blank">Simple ViewNavigator</a></li>
|
|
<li><a href="examples/samples/04 - browser history/index.html" target="_blank">Simple ViewNavigator w/ Browser History Integration</a></li>
|
|
</ul></p>
|
|
|
|
|
|
<h5>SplitViewNavigator</h5>
|
|
<p>The SplitViewNavigator component allows you to create tablet experiences with an easily recognizable mobile UI paradigm. The SplitViewNavigator allows you to have side-by-side content in the landscape orientation, and the sidebar is hidden in portrait orientation.</p>
|
|
<p>Samples:
|
|
<ul>
|
|
<li><a href="examples/samples/02 - splitviewnavigator/01 - basic/index.html" target="_blank">Simple SplitViewNavigator</a></li></a></li>
|
|
</ul></p>
|
|
|
|
|
|
<h5>SlidingView</h5>
|
|
<p>The SlidingView allows content to slide to the side using a horizontal swipe gesture, revealing a navigation container "underneath". This is very similar to the behavior in Facebook's iPad application.
|
|
|
|
<p>Samples:</p>
|
|
<p>Just swipe horizontally with a finger or the mouse...
|
|
<ul>
|
|
<li><a href="examples/samples/03 - slidingView/01 - basic/index.html" target="_blank">Basic SlidingView</a></li></a></li>
|
|
<li><a href="examples/samples/03 - slidingView/02 - view navigators/index.html" target="_blank">Layered ViewNavigators in SlidingView</a></li></a></li>
|
|
</ul></p>
|
|
|
|
|
|
<hr />
|
|
|
|
<h3>BUGS/FEATURES</h3>
|
|
|
|
<p>No software is ever bug-free. If you encounter an issue, hvae feedback, or have feature requests, please log them at: <a href="https://github.com/triceam/app-UI/issues" target="_blank">https://github.com/triceam/app-UI/issues</a>a></p>
|
|
<p>-OR-</p>
|
|
<p>Fork it, fix it, and send me a pull request. </p>
|
|
|
|
<p>Please do not just complain.</p>
|
|
|
|
<hr />
|
|
|
|
<h3>REAL WORLD USAGE</h3>
|
|
|
|
<p>You can see this framework in the following real-world apps:
|
|
|
|
<ul>
|
|
<li>US Census Browser:
|
|
<ul>
|
|
<li><a href="http://itunes.apple.com/us/app/us-census-browser/id483201717?mt=8" target="_blank">http://itunes.apple.com/us/app/us-census-browser/id483201717?mt=8</a></li>
|
|
<li><a href="http://tricedesigns.com/census" target="_blank">http://tricedesigns.com/census</a></li></ul></li>
|
|
</ul>
|
|
|
|
<p>If you have built your own app using this framework, please let me know! (<a href="https://twitter.com/#!/andytrice" target="_blank">@andytrice</a> on twitter)</p>
|
|
|
|
<hr />
|
|
|
|
<h3>Dependencies</h3>
|
|
<p>The required dependencies are contained within this code repository, with links to the original files/sources. Dependencies include:
|
|
|
|
<ul>
|
|
<li>jQuery - <a href="http://jquery.com/" target="_blank">http://jquery.com/</a></li>
|
|
<li>jQuery Animate Enhanced - <a href="https://github.com/benbarnett/jQuery-Animate-Enhanced" target="_blank">https://github.com/benbarnett/jQuery-Animate-Enhanced</a></li>
|
|
<li>iScroll 4 - <a href="http://cubiq.org/iscroll-4" target="_blank">http://cubiq.org/iscroll-4</a></li>
|
|
<li>NoClickDelay - <a href="http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone" target="_blank">http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone</a></li>
|
|
</ul>
|
|
</p>
|
|
<hr />
|
|
|
|
<h3>LICENSE</h3>
|
|
|
|
<pre>
|
|
Copyright 2011 Andrew M. Trice. All rights reserved, except where otherwise noted.
|
|
|
|
Redistribution and use in source and binary forms, with or without modification, are
|
|
permitted provided that the following conditions are met:
|
|
|
|
1. Redistributions of source code must retain the above copyright notice, this list of
|
|
conditions and the following disclaimer.
|
|
|
|
2. Redistributions in binary form must reproduce the above copyright notice, this list
|
|
of conditions and the following disclaimer in the documentation and/or other materials
|
|
provided with the distribution.
|
|
|
|
THIS SOFTWARE IS PROVIDED BY ANDREW M. TRICE ''AS IS'' AND ANY EXPRESS OR IMPLIED
|
|
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
|
|
FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ANDREW M. TRICE OR
|
|
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
|
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
|
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
|
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
|
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
|
|
ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
</pre>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
<footer>
|
|
<p>This project is maintained by <a href="https://github.com/triceam">triceam</a></p>
|
|
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
|
|
</footer>
|
|
</div>
|
|
<script src="javascripts/scale.fix.js"></script>
|
|
<script type="text/javascript">
|
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
|
</script>
|
|
<script type="text/javascript">
|
|
try {
|
|
var pageTracker = _gat._getTracker("UA-31064033-1");
|
|
pageTracker._trackPageview();
|
|
} catch(err) {}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |