-
Notifications
You must be signed in to change notification settings - Fork 10
/
snippets.html
90 lines (86 loc) · 3.71 KB
/
snippets.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
<!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">
</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 = "snippets/" + tutorialChoice[1];
$.ajax(tutorialChoice, {
success: function(data) {
UITutorialContainer.empty();
UITutorialContainer.html(data).hide().fadeIn();
},
error: function(e) {
return e;
}
})
}
});
});
});
</script>
</head>
<body id="snippets">
<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><a href="documentation.html" title="The lowdown on how all of this works">Documentation</a></li>
<li class="selected">Snippets</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>Snippets</h2>
<p>Snippets are a powerful tool to help you build even complex apps quickly. Snippets are provided here and you can download the complete file. Most IDEs have some arrangement for snippets. Just copy and paste these into you IDE. Personally I'm a long time user of BBEdit (10 years), and I also use TextMate, Coda and Espresso. Of these I found that for building Web apps with ChocolateChip-UI, Espresso seems the fasts and most efficient. I has a really great way of outputting snippets into a document, with just snippet marker followed by a tab. You can also link snippets up to <a href="http://code.google.com/p/zen-coding/">Zen Coding</a>. And if you haven't tried Zen Coding to create markup, then you really shouldn't be creating markup. Type less and let snippets and Zen Coding create the markup for you.</p>
</div>
<div class="secondary-section">
<h2>Snippets</h2>
<ul id="side-menu">
<li><a id="t_01" href="#snippets_buttons.html">UIButtons</a></li>
<li><a id="t_02" href="#snippets_layouts.html">Layouts</a></li>
<li><a id="t_03" href="#snippets_tableviews.html">Tableviews</a></li>
<li><a id="t_04" href="#snippets_controls.html">Controls</a></li>
</ul>
</div>
</div>
</body>
</html>