Skip to content

Commit 25f92ba

Browse files
author
David Luecke
committed
Documentation update
1 parent 1aa8358 commit 25f92ba

File tree

2 files changed

+63
-22
lines changed

2 files changed

+63
-22
lines changed

‎doc/css/stylesheet.css

+1
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,4 @@ a, .ui-widget-content a
5656
color: #0078ae;
5757
}
5858
a:hover, a.active { color: #6eac2c; }
59+
h1, h2, h3 { color: #505050; }

‎doc/index.html

+62-22
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,14 @@
3838
<div id="logo" class="centered"><img src="resources/logo.png" ald="jQuery::dForm" /></div>
3939
<div id="menu" class="centered full ui-widget-content ui-corner-all">
4040
<div class="padsmall">
41-
<a href="index.html">About</a> |
42-
<a href="index.html">Examples</a> |
43-
<a href="index.html">jQuery UI</a> |
44-
<a href="index.html">Try it</a> |
45-
<a href="">Wiki</a>
41+
<a href="#plugin">The plugin</a> |
42+
<a href="#examples">Examples</a> |
43+
<a href="#about">About</a> |
44+
<a target="_blank" href="http://github.com/daffl/jquery.dform/downloads">Download</a> |
45+
<a target="_blank" href="http://github.com/daffl/jquery.dform/wiki">Wiki</a>
4646
</div>
4747
</div>
48+
<a name="plugin"></a>
4849
<h2>The plugin</h2>
4950
<p>The jQuery.dForm plugin allows you to create your HTML forms programmatically from
5051
JavaScript objects (and therefore JSON, too).</p>
@@ -87,15 +88,14 @@ <h2>What it is for</h2>
8788
<p>You should try this plugin if you want to</p>
8889
<ul>
8990
<li>manage all your form related jQuery plugins in a unified way
90-
<br />(many supported out of the box)</li>
91+
<br />(some supported out of the box)</li>
9192
<li>scaffold forms from business objects of your server side framework</li>
9293
<li>have an easy way to include jQuery UI elements and JavaScript validation</li>
93-
<li>write JavaScript code instead of HTML markup</li>
94+
<li>write JavaScript instead of HTML markup since your page doesn't run without JS anyway</li>
9495
</ul>
9596

96-
<h2>About</h2>
97-
<p>Follow me on Twitter @daffl</p>
98-
97+
<a name="examples"></a>
98+
<h2>Examples</h2>
9999
<h3>Login form</h3>
100100
<p>A simple login form. The hint in the username textfield will dissapear when
101101
you focus it.</p>
@@ -165,7 +165,7 @@ <h3>Registration form</h3>
165165
[
166166
{
167167
"type" : "fieldset",
168-
"legend" : "User information",
168+
"label" : "User information",
169169
"elements" : [
170170
{
171171
"name" : "email",
@@ -187,7 +187,7 @@ <h3>Registration form</h3>
187187
},
188188
{
189189
"type" : "fieldset",
190-
"legend" : "Address information",
190+
"label" : "Address information",
191191
"elements" : [
192192
{
193193
"name" : "name",
@@ -235,15 +235,21 @@ <h3>Registration form</h3>
235235
</div>
236236
</div>
237237

238-
<h2>jQuery UI</h2>
239-
<p>Support for the great jQuery UI Framework</p>
238+
<style type="text/css">
239+
#uiform .ui-tabs { position: absolute; left: 400px; top: 70px; }
240+
#uiform .ui-tabs div.ui-widget-content { width: 300px; height: 70px; }
241+
</style>
242+
<h3>jQuery UI</h3>
243+
<p>The plugin comes with support for the great jQuery UI framework and its controls.
244+
If the form has the ui-widget class jQuery UI button and input styles
245+
will be applied to any matching type.</p>
240246
<div class="exampleform tabs">
241247
<ul>
242248
<li><a href="#uiform-div">Form</a></li>
243249
<li><a href="#uiform-src">JSON</a></li>
244250
</ul>
245251
<div id="uiform-div">
246-
<form id="uiform" class="dform"></form>
252+
<form id="uiform" class="dform ui-widget"></form>
247253
</div>
248254
<div id="uiform-src">
249255
<pre class="brush: js">
@@ -252,9 +258,24 @@ <h2>jQuery UI</h2>
252258
"method" : "get",
253259
"elements" :
254260
[
261+
{
262+
"name" : "textfield",
263+
"label" : "Autocomplete",
264+
"type" : "text",
265+
"hint" : "Type 'A' or 'S'",
266+
"autocomplete" :
267+
{
268+
"source" : [ "Apple", "Acer", "Sony", "Summer" ]
269+
}
270+
},
271+
{
272+
"label" : "A themed submit button",
273+
"type" : "submit",
274+
"value" : "Login"
275+
},
255276
{
256277
"name" : "date",
257-
"label" : "Pick a date",
278+
"label" : "Datepicker",
258279
"type" : "text",
259280
"datepicker" : { "showOn" : "button" }
260281
},
@@ -264,33 +285,45 @@ <h2>jQuery UI</h2>
264285
"range" : true,
265286
"label" : "Slider"
266287
},
267-
{
268-
"label" : "A themed button",
269-
"type" : "submit",
270-
"value" : "Login"
271-
},
272288
{
273289
"label" : "Some progress",
274290
"type" : "progressbar",
275291
"value" : 40
276292
},
277293
{
278294
"type" : "tabs",
279-
"label" : "UI Tabs",
295+
"resizable" :
296+
{
297+
"minHeight" : 150,
298+
"minWidth" : 300
299+
},
280300
"tabs" :
281301
{
282302
"tab-1" :
283303
{
284304
"title" : "Tab no 1",
285305
"elements" :
286306
[
307+
{
308+
"name" : "textfield",
309+
"label" : "Just a textfield in jQuery UI tabs",
310+
"type" : "text"
311+
}
287312
]
288313
},
289314
"tab-2" :
290315
{
291316
"title" : "Tab no 1",
292317
"elements" :
293318
[
319+
{
320+
"type" : "html",
321+
"html" : "Some html in tab 2"
322+
},
323+
{
324+
"type" : "submit",
325+
"value" : "Submit"
326+
}
294327
]
295328
}
296329
}
@@ -300,6 +333,13 @@ <h2>jQuery UI</h2>
300333
</pre>
301334
</div>
302335
</div>
336+
337+
<a name="about"></a>
338+
<h2>About</h2>
339+
<p>Download the <a target="_blank" href="http://github.com/daffl/jquery.dform/downloads">jQuery.dForm package</a></p>
340+
<p>Visit the project page on <a target="_blank" href="http://github.com/daffl/jquery.dform">GitHub</a></p>
341+
<p>Read more about extending and customizing the plugin in the <a target="_blank" href="http://github.com/daffl/jquery.dform/wiki">Wiki</a></p>
342+
<p>Follow <a target="_blank" href="http://twitter.com/daffl">@daffl</a> on Twitter</p>
303343
</div>
304344
</body>
305345
</html>

0 commit comments

Comments
 (0)