-
Notifications
You must be signed in to change notification settings - Fork 10
/
tutorials.html
121 lines (117 loc) · 6.17 KB
/
tutorials.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta name="viewport" content="width=device-height">
<meta name="apple-mobile-web-app-capable" button-content="yes">
<title>ChocolateChip-UI</title>
<link rel="stylesheet" href="css/main.css" />
<style type="text/css">
#wait { width: 50%; margin: 0 auto; }
</style>
<script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var tutorialmenu = $("#side-menu a");
$.extend({
UISelectedTutorialItem : null
});
var UITutorialContainer = $("#tutorial_container");
$.each(tutorialmenu, function(idx, item) {
var item = $(item);
item.on("click", function(e) {
if (item.hasClass("selected")) {
e.preventDefault();
} else {
e.preventDefault();
if (!!$.UISelectedTutorialItem) {
$($.UISelectedTutorialItem).removeClass("selected");
}
$.UISelectedTutorialItem = "#" + item[0].id
item.addClass("selected");
var tutorialChoice = $($.UISelectedTutorialItem)[0].href;
tutorialChoice = tutorialChoice.split("#");
tutorialChoice = "tutorials/" + tutorialChoice[1];
$.ajax(tutorialChoice, {
success: function(data) {
UITutorialContainer.empty();
UITutorialContainer.html(data).hide().fadeIn();
},
error: function(e) {
return e;
}
})
}
});
});
});
</script>
</head>
<body id="tutorials">
<div id="header">
<div id="header-content">
<h1>ChocolateChip-UI</h1>
<h2>The Web app development framework</h2>
<h3>It's tiny, but delicious</h3>
<img id="itbd" src="images/itbd.png" alt="It's tiny, but delicious" width="247" height="79">
</div>
</div>
<div id="nav">
<ul class="menu">
<li class="selected"><a href="index.html" title="This is the way home!">Home</a></li>
<li><a href="downloads.html" title="Click here to download ChocolateChip-UI">Downloads</a></li>
<li class="selected">Tutorials</li>
<li><a href="documentation.html" title="The lowdown on how all of this works">Documentation</a></li>
<li><a href="snippets.html" title="Use these in your IDE to speed up app building.">Snippets</a></li>
<li><a href="android.html" title="A special theme for Android devices.">Android</a></li>
<li id="chuiAbout" title='The "Why", "When" and "Who done it".'><a href="about.html">About</a></li>
</ul>
</div>
<div id="content">
<div class="primary-section" id="tutorial_container">
<h2>Choose a Tutorial from the Menu on the Left</h2>
<div id="wait"></div>
<p>ChocolateChip-UI helps you create the Web app you want. It uses a straightforward markup language called WAML that makes it crystal clear what you are building. This markup also tells ChocolateChip-UI what functionality to add. ChUI.js and ChUI.css add all the magic in the background with minimal input from you.</p>
<p>While developing your app with ChocolateChip-UI you can test it on your desktop with mouse interaction using Google Chrome, Apple Safari or any other Webkit-based desktop browser. Of course you can also test it in appropriate device emulators as well on actual devices to see the impact orientation change will have on your app.</p>
<p>Please note. ChocolateChip-UI is designed to work with Webkit browsers on current popular mobile devices comprising iOS and Android. That means that it will not render properly on Firefox, IE or Opera. The deskotp compatibility included in ChocolateChip-UI is only as a convenience for debugging in Chrome and Safari before deploying to a device. ChocolateChip-UI is not designed for, nor intended for Desktop use for Websites. Instead it's intended use case is either as a Website viewed on a mobile device, a pinned site, or a standalone mobile app created with <a href="http://phonegap.com/">PhoneGap</a>. Phonegap provides a native wrapper around ChocolateChip-UI which then runs in a native Web view. On iOS and Android the native Web view uses Webkit.</p>
</div>
<div class="secondary-section">
<h2>Tutorials</h2>
<ul id="side-menu">
<li><a id="t_01" href="#basic_app_shell.html">Basic App Shell</a></li>
<li><a id="t_02" href="#accomodating_nav_and_toolbars.html">Accomodating Navbars, etc.</a></li>
<li><a id="t_03" href="#tableviews.html">Basic Tableviews</a></li>
<li><a id="t_04" href="#advanced_tableviews.html">Advanced Tableviews</a></li>
<li><a id="t_05" href="#navigation_lists.html">Navigation Lists</a></li>
<li><a id="t_06" href="#titled_lists.html">Titled Lists</a></li>
<li><a id="t_07" href="#alphabetical_lists.html">Alphabetical Lists</a></li>
<li><a id="t_08" href="#buttons.html">UIButtons</a></li>
<li><a id="t_09" href="#segmentedcontrols.html">Segmented Controls</a></li>
<li><a id="t_10" href="#subview_transitions.html">Subview Transitions</a></li>
<li><a id="t_11" href="#tabbar.html">Tab Bar</a></li>
<li><a id="t_12" href="#selection_lists.html">Selection Lists</a></li>
<li><a id="t_13" href="#deletion_lists.html">Deletion Lists</a></li>
<li><a id="t_14" href="#switch_controls.html">Switch Controls</a></li>
<li><a id="t_15" href="#popups.html">Popups</a></li>
<li><a id="t_16" href="#action_sheets.html">Action Sheets</a></li>
<li><a id="t_17" href="#range_input.html">Range Input</a></li>
<li><a id="t_18" href="#activity_indicators.html">Activity Indicator</a></li>
<li><a id="t_19" href="#expander.html">Expander</a></li>
<li><a id="t_20" href="#splitview.html">Split View</a></li>
<li><a id="t_21" href="#popovers.html">Popovers</a></li>
<li><a id="t_22" href="#paging_control.html">Paging Control</a></li>
<li><a id="t_23" href="#ellipsis.html">Ellipsis</a></li>
<li><a id="t_24" href="#progressbar.html">Progress Bar</a></li>
<li><a id="t_25" href="#custom_tints.html">Custom Tints</a></li>
<li><a id="t_26" href="#subclassing.html">Extending</a></li>
<li><a id="t_27" href="#templates.html">Templates</a></li>
<li><a id="t_28" href="#data_binding.html">Data Binding</a></li>
<li><a id="t_29" href="#routing.html">Routing</a></li>
<li><a id="t_30" href="#forms.html">Forms</a></li>
<li><a id="t_31" href="#ajax.html">Ajax</a></li>
</ul>
</div>
</div>
</body>
</html>