-
Notifications
You must be signed in to change notification settings - Fork 0
/
torchui-1.0-demo.html
executable file
·289 lines (242 loc) · 11.4 KB
/
torchui-1.0-demo.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE HTML>
<!-- HTML 5 DocType -->
<!--/**
* TorchUI Library v1.0
*
* Copyright (c) 2010 Andrew Wilson
* Licensed under MIT
*
* @author Drew Wilson
* @email [email protected]
* @updated 6-5-2010
* @version 1.0
*
*/-->
<html lang="en">
<!-- This is a test html for the TorchUI framework -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TorchUI: jQuery JavaScript Library</title>
<!-- This should ideally be the only css file that is necessary, as it uses import to get the other sites CSS -->
<link rel="stylesheet" href="torchui-site.css" type="text/css" />
<script src="torchui-1.0-compiled.js" type="text/javascript"></script>
<link rel="shortcut icon" type="image/x-icon" href="" />
<script type="text/javascript">
var $ = jQuery; // Testing noConflict
</script>
<!-- Force IE8 to Render in IE7 Mode -->
<!-- While it's hard to condone this, it is a very effective way to minimize you're development time -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
<body>
<style type="text/css">
.dropSection { border:solid 1px black; }
</style>
<div class="container">
<header class="grid_10 prefix_1 suffix_1">Torch UI Menu</header>
<section class="grid_4 prefix_2">
<div class="object origin anchor">Anchor Tag</div>
<div class="object origin header1">Page Title</div>
</section>
<section class="grid_4 suffix_2">
<div class="object origin header1">Section Title</div>
<div class="object origin paragraph">Paragraph</div>
</section>
<footer class="grid_10 prefix_1 suffix_1"></footer>
</div>
<div class="container">
<section class="grid_6 dropSection">
<br />
</section>
<section class="grid_6 dropSection">
<br />
</section>
</div>
<div class="container">
<header class="grid_10 prefix_1 suffix_1">
<h1> Torch UI </h1>
<h5> by Andrew Wilson ([email protected])</h5>
</header>
</div>
<div class="container">
<aside class="grid_4">
<h1>Table of Contents</h1>
<nav><dl>
<dt><a href="#global">Global Functions</a></dt><dd>Functions that can change the current working environment.</dd>
<dt><a href="#language">Language Functions</a></dt><dd>Functions that can add or change the langauge.</dd>
<dt><a href="#notifications">Notification Functions</a></dt><dd>Functions that are used to pass updates or notifications to the user.</dd>
<dt><a href="#ajax">Ajax Functions</a></dt><dd>Functions that get and load data from a remote source.</dd>
</dl></nav>
</aside>
<section class="grid_8">
<article id="global">
<header>
<h1>Global Variables & Functions</h1>
</header>
<dl>
<dt>Default Settings</dt><dd>
The code is loaded with default settings. Many of them will take care of things like colors, sizes, positioning
on the page so that it will conform with the standards outlines in the Coventry style guide. It is best to not attempt
to make the page look like it should, as this should already have been taken care of for you. Any questions, please ask
or email the Designer in charge.
</dd>
<dt>$.torchui.debug</dt><dd> true | false : allows to turn debug mode on or off at any time.</dd>
<dd>
<div id="debugTest">
<h3> Debug mode is <span>not working</span></h3>
<a href="javascript: void(null);">Turn On Debug</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#debugTest a").click(function() {
if($.torchui.toggleDebug()) {
$("#debugTest span").text("On");
$(this).text("Turn Off Debug");
} else {
$("#debugTest span").text("Off");
$(this).text("Turn On Debug");
}
});
if($.torchui.debug) {
$("#debugTest span").text("On");
$("#debugTest a").text("Turn Off Debug");
} else {
$("#debugTest span").text("Off");
$("#debugTest a").text("Turn On Debug");
}
});
</script>
</dd>
</dl>
<div class="clear"> </div>
<footer><a href="#tableOfContents">back to top</a></footer>
</article>
<article id="ajax">
<dl>
<dt><h1>Ajax Options</h1></dt>
<dt>global</dt><dd> true | false : this option is by default true, but you can turn off the global functions by setting it to false.
**WARNING** Much functionality is handled globally by TorchUI, turn this off at your own risk **WARNING**</dd>
<dt>timeout</dt><dd> MilliSeconds : Default is 2500 ms so that the Ajax call will timeout after 2.5 seconds of no response.</dd>
<dt>cache</dt><dd> true | false : Defaults to true. This tells the browser whether to cache the information or not.</dd>
<dt>url</dt><dd> String (Required) : this points to a fully qualified path to a resource.</dd>
<dt>dataType</dt>
<dd>* "xml": Returns a XML document that can be processed via jQuery.</dd>
<dd>* "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM.</dd>
<dd>* "script": Evaluates the response as JavaScript and returns it as plain text. Disables caching unless option "cache" is used. Note: This will turn POSTs into GETs for remote-domain requests.</dd>
<dd>* "json": Evaluates the response as JSON and returns a JavaScript Object.</dd>
<dd>* "jsonp": Loads in a JSON block using JSONP. Will add an extra "?callback=?" to the end of your URL to specify the callback.</dd>
<dd>* "text": A plain text string.</dd>
<dd>Default is set to "json".</dd>
<dt>data</dt><dd>Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'.</dd>
<dt>group</dt><dd>String : Assigning a group will then allow buffering of the groups. Meaining that the ajax calls are called one after another, after the previous call completes.</dd>
<dt>initialWait</dt><dd>MilliSeconds : Default is 800. This is used in the grouping of the ajax calls. The time will determine the length that is used to wait between the calls so they are properly throttled.</dd>
<dt><h1>Ajax Return Functions</h1></dt>
<dt>success</dt><dd>this is the function that will be called if the ajax is returned successful</dd>
<dt>error</dt><dd>this is the function that will be called if the ajax is returned as an error</dd>
<dt>complete</dt><dd>this is the function that will be called when the success or error is completed</dd>
<dt><h1>Ajax Functions</h1></dt>
<dt>$.ajax()</dt><dd>Sends an ajax call using all of the default options. This function will fail.</dd>
<dt>$.ajax({options})</dt><dd>The options must have {url: "String"} at the very least.</dd>
<dd><b>Example</b>: $.ajax({ url: "access/some/account.do", timeout:5000, success : function(data){ doThis(data); } });</dd>
<dt><h1>Ajax Interfaces</h1></dt>
<dd>All ajax calls that are using the "json" data type will be subject to the interface requirements explained below.</dd>
<dt>Response</dt>
<dd>All responses will be an array.</dd>
<dd>The array will have 1 or more objects.</dd>
<dd>Each object will contain "type" and "value". Optionally a "callback" can be used.</dd>
<dd> Type defaults to 1 = success and 0 = false. Optionally you can specify others like "message" or "system failure"</dd>
<dd><b>Example Response from server:</b>
[ { type: 1, value : "You have successfully added a user" } ] </dd>
<dd>The response is held in an array so that multiple responses can be sent through single call if necessary.</dd>
</dl>
<div class="clear"> </div>
<footer><a href="#tableOfContents">back to top</a></footer>
</article>
<article id="dialogs">
<a href="javascript: void(null);" id="dialogbutton">Open Dialog</a>
<div title="this is my test this is my test this is my test this is my test" id="dialogtest">
This is a div dialog test. This is a div dialog test. This is a div dialog test. This is a div dialog test. This is a div dialog test.
</div>
</article>
<article id="forms">
<dl>
<dt><h1>Form Test</h1></dt>
<dt><h1>Callbacks</h1></dt>
<dd>Forms will automatically become ajax'd unless they have the class 'noajax'</dd>
<dd>To catch special actions, if any upon return, create a function like this to catch the 'callback'</dd>
<dd>$("#formID").bind("callbak", function(event, data) { }) Where Data is the returned data if successful.</dd>
<dt>
<form id="test_form" action="" method="post">
<fieldset>
<legend>Test Form</legend>
<ol>
<li>
<label for="username">Username:<em>*</em></label>
<input type="text" id="username" name="username" class="username" data-validate = "required" />
</li><li>
<label for="password">Password:<em>*</em></label>
<input type="password" id="password" name="password" class="password" />
</li><li>
<label for="email">Email:<em>*</em></label>
<input type="text" id="email" name="email" class="email" />
</li><li>
<label for="phone">Phone Number:<em>*</em></label>
<input type="text" id="phone" name="phone" class="phone"/>
</li><li>
<label for="zip">Zip Code:</label>
<input type="text" id="postal" name="postal"class="postal" />
</li><li>
<label for="firstname">First Name:<em>*</em></label>
<input type="text" id="firstname" name="firstname" class="namefield" />
</li><li>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" class="namefield" />
</li><li>
<label for="dob">Date Of Birth:<em>*</em></label>
<input type="text" id="dob" name="dob" class="dob" />
</li><li>
<label for="comments">Comments:<em>*</em></label>
<textarea id="comments" name="comments" class="text"> </textarea>
</li><li>
<input type="submit" value="Save Form" />
</li></ol>
</fieldset>
</form>
</dt>
<div class="clear"> </div>
<footer><a href="#tableOfContents">back to top</a></footer>
</article>
</section>
</div>
<div class="container">
<footer class="grid_12">© Copyright 2009 Andrew Wilson</footer>
</div>
<script type="text/javascript">
$(document).ready(function() {
/* Create a dialog */
/* Add Dialog Button Functionality */
$('#dialogbutton').click(function(){
$('#dialogtest').dialog('open');
return false;
});
});
$("#test_form").bind("callback", function(e, data) {
/* do special actions here, DATA is what's being returned by the ajax. */
/* Callback is getting called automatically by the autoforms feature */
})
$(".object").draggable({ revert: true,opacity: 0.7, helper: 'clone' });
$(".dropSection").droppable({
drop: function(event,ui) {
if($(ui.draggable).hasClass("anchor")) {
$(this).append($("<a />").text("Test Anchor"));
} else if ($(ui.draggable).hasClass("paragraph")) {
$(this).append($("<p />").text(prompt("Please enter paragraph text","Test Data")));
}
}
}).sortable();
$("p").live("dblclick", function() {
$(this).html(prompt("Please enter paragraph text","Test Data"));
});
</script>
</body>
</html>