forked from rbiggs/chocolatechip-ui.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.html
95 lines (91 loc) · 4.28 KB
/
documentation.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
<!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="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">
</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 {
if (!item.hasClass('external')) e.preventDefault();
if (!!$.UISelectedTutorialItem) {
$("#side-menu a").removeClass("selected");
}
$.UISelectedTutorialItem = "#" + item[0].id
item.addClass("selected");
if (item.hasClass('external')) return;
var tutorialChoice = $($.UISelectedTutorialItem)[0].href;
tutorialChoice = tutorialChoice.split("#");
tutorialChoice = "documentation/" + tutorialChoice[1];
$.ajax(tutorialChoice, {
success: function(data) {
UITutorialContainer.empty();
UITutorialContainer.html(data).hide().fadeIn();
},
error: function(e) {
return e;
}
})
}
});
});
});
</script>
</head>
<body id="documentation">
<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><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><a href="tutorials.html" title="Learn how to quickly and effeciently create Web apps with ChococlateChip-UI">Tutorials</a></li>
<li class="selected">Documentation</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 documentation" id="tutorial_container">
<h2>Choose a Feature from the Menu on the Left</h2>
<p>ChocolateChip-UI together with either ChocolateChip.js, jQuery or Zepto constitutes a powerful framework for creating Web apps. ChocolateChip-UI consists of two files: ChUI.js and ChUI.css. It uses a special markup language called WAML. Read the documentation for these by choosing from the menu on the left.</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>Documentation</h2>
<ul id="side-menu">
<li><a id="t_04" href="#waml.html">WAML</a></li>
<li><a id="t_03" href="#chui-css.html">ChUI.css</a></li>
<li><a id="t_02" href="#chui-js.html">ChUI.js</a></li>
<li><a id="t_01" href="#chocolatechip.html">ChocolateChip.js</a></li>
<li><a target='new' href='http://docs.jquery.com/' class='external'>jQuery</a></li>
<li><a target='new' href='http://zeptojs.com/' class='external'>Zepto</a></li>
</ul>
</div>
</div>
</body>
</html>