Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
245 lines (198 sloc) 10.3 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Magic Framework Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1">
<script type="text/javascript" src="WebKitDetect.js"></script>
<script type="text/javascript" src="magic_framework.js"></script>
<script type="text/javascript" src="magic_prefs.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="magic.css" />
<style type="text/css">
.active_list_item, .list_item:active{
background-image: url( 'selection.png' );
background-repeat: repeat-x;
background-color: #194fdb !important;
}
</style>
<script type="text/javascript">
var Interface;
var Prefs;
function ButtonizeMainMenu(){
if( Prefs.GetPref( 'toggle_test' ) ){
document.getElementById( 'toggle_test_onoff' ).className = 'on_off_control on';
}else{
document.getElementById( 'toggle_test_onoff' ).className = 'on_off_control off';
}
Interface.MakeMagicButton( 'list_item_quickstart', function(){ Interface.GoForward( 'help_quickstart', 'Quick Start' ); } );
Interface.MakeMagicButton( 'list_item_about', function(){ Interface.GoForward( 'help_about', 'About' ); } );
Interface.MakeMagicButton( 'list_item_howitworks', function(){ Interface.GoForward( 'help_works', 'How It Works' ); } );
Interface.MakeMagicButton( 'list_item_phonegap', function(){ Interface.GoForward( 'help_phonegap', 'PhoneGap' ); } );
Interface.MakeMagicButton( 'list_item_credits', function(){ Interface.GoForward( 'help_credits', 'Credits' ); } );
Interface.MakeMagicButton( 'toggle_test_onoff', function(){ var new_val = Interface.toggleOnOffControl( 'toggle_test_onoff' ); Prefs.SavePref( 'toggle_test', new_val ); } );
document.getElementById( 'version' ).innerHTML = 'Magic Framework ' + Interface.version + '</div>';
}
function init(){
Interface = new MagicFramework( );
Interface.Init();
Interface.GoForward( 'help', 'Main Menu' );
setTimeout( function(){ Interface.HideSplash(); }, 300 );
Prefs = new MagicPrefs( 'demo_2', function(){
var views = Prefs.GetPref( 'views' );
if( !views ){
Prefs.SavePref( 'views', 1 );
}else{
Prefs.SavePref( 'views', ++views );
}
document.getElementById( 'views' ).innerHTML = 'This demo has been viewed by you ' + views + ' times';
ButtonizeMainMenu();
} );
Interface.after_transition = function( newView ){
if( newView.id == 'help' ){
ButtonizeMainMenu();
}
}
//Editing the help_content div after here seems to break the list functions. This is a known issue
//that is being worked on. You can always call the MagicListItem function manually to get any element
//setup the way it needs to be setup.
}
</script>
</head>
<!--
/**
* For use with MagicFramework
* http://www.jeffmcfadden.com/magicframework
* This work by Jeff McFadden is licensed under a Creative Commons Attribution 3.0 United States License.
*
*/
-->
<body style="width: 320px; height: 460px;" onLoad="init();">
<div id="browser">
<div id="splash">
&nbsp;
</div>
<div id="header">
<div class="back_button" id="back_button">
Back
</div>
<div class="header_title" id="current_title">
&nbsp;
</div>
</div>
<div id="viewport">
<div class="view" id="help">
<div class="view_content" id="help_content">
<ul class="list" id="settings_list">
<li id="list_item_quickstart">
<div class="list_label">
Quick Start
</div>
<div class="list_value">
<img class="list_arrow" src="list_arrow.png" />
</div>
</li>
<li id="list_item_about">
<div class="list_label">
About
</div>
<div class="list_value">
<img class="list_arrow" src="list_arrow.png" />
</div>
</li>
<li id="list_item_howitworks">
<div class="list_label">
How it Works
</div>
<div class="list_value">
<img class="list_arrow" src="list_arrow.png" />
</div>
</li>
<li id="list_item_phonegap">
<div class="list_label">
PhoneGap
</div>
<div class="list_value">
<img class="list_arrow" src="list_arrow.png" />
</div>
</li>
<li id="list_item_credits">
<div class="list_label">
Credits
</div>
<div class="list_value">
<img class="list_arrow" src="list_arrow.png" />
</div>
</li>
</ul>
<ul class="list">
<li id="list_toggle">
<div class="list_label">
Toggle
</div>
<div class="list_value">
<div id="toggle_test_onoff" class="on_off_control off">&nbsp;</div>
</div>
</li>
</ul>
<div class="list_section_note" id="views" style="margin-top: 20px;margin-bottom:20px"></div>
<div class="list_section_note" id="version"></div>
</div>
</div>
<div class="view" id="help_quickstart">
<div class="view_content help_content" id="help_quickstart_content">
<h2>Quick Start</h2>
<ol>
<li>Take a look at the index.html file</li>
<li>Modify the lists/views to suit your needs</li>
<li>Load up the page in Safari and see how it works for you.</li>
</ol>
</div>
</div>
<div class="view" id="help_about">
<div class="view_content help_content" id="help_about_content">
<h2>About Magic Framework</h2>
<p>Magic Framework is a native iPhone UI imitator built in html/css/javascript. It's useful for online websites or on-device Webkit-based applications looking to imitate the native iPhone UI without having to write native code.
</p>
</div>
</div>
<div class="view" id="help_works">
<div class="view_content help_content" id="help_works_content">
<h2>How It Works</h2>
<p>
Magic Framework is built in javascript, html, and css. <a href="#" onClick="Interface.GoForward( 'help_css3', 'CSS3' );">CSS3 transitions</a> are used to build the transitions between pages, and images and other css styles are used to build the interface to have a native iphone look &amp; feel.
</p>
</div>
</div>
<div class="view" id="help_css3">
<div class="view_content help_content" id="help_css3_content">
<h2>CSS3 Transitions</h2>
<p>
CSS3 Transitions are a new feature to webkit, especially mobile safari. Magic Framework makes use of some of the following:</p>
<ul>
<li>-webkit-border-*-*-radius</li>
<li>-webkit-transition-property</li>
<li>-webkit-transition-duration</li>
<li>-webkit-transition-timing-function</li>
</ul>
</div>
</div>
<div class="view" id="help_phonegap">
<div class="view_content help_content" id="help_phonegap_content">
<h2>PhoneGap</h2>
<p><a href="http://www.phonegap.com">PhoneGap</a> is a development tool that allows web developers to take advantage of the core features in the iPhone, Android, and Blackberry SDK using JavaScript.</p>
<p>Magic Framework is a great fit for developers using PhoneGap or similar projects to build native iPhone apps ontop of web technologies.</p>
</div>
</div>
<div class="view" id="help_credits">
<div class="view_content help_content" id="help_credits_content">
<h2>Credits</h2>
<p>Magic Framework was build by Jeff McFadden and is used in his iPhone game, <a href="http://www.insidetraderapp.com">Inside Trader</a>.</p>
</div>
</div>
</div>
<div id="event_prevention"></div>
</div>
</body>
</html>