Skip to content

Commit 617623f

Browse files
author
daffl
committed
Deleted old documentation, added new one
1 parent b133917 commit 617623f

9 files changed

+305
-555
lines changed

‎build/build.properties

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ tmp = build/tmp/
33

44
# Documentation settings
55
doc.bin = NaturalDocs
6-
doc.out = doc/generated/
6+
doc.out = doc/
77
doc.project = build/docdata/
88
doc.txt =.
99
doc.format = HTML

‎changelog.txt

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
Title: Changelog
2+
3+
0.1.1:
4+
* Separated type and subscriber functions
5+
* Added types <file>, <container>, <hidden>, <accordion>, <checkboxes> and <radiobuttons>
6+
* Added auto class generation based on element type
7+
* Finished jQuery UI <accordion> and unified with <tabs> usage
8+
* Switched documentation to <Natualdocs at http://naturaldocs.org>
9+
* Added build.xml for generating documentation and minifying JavaScript
10+
11+
0.1:
12+
* Initial release

‎doc/documentation.html renamed to ‎doc/.tmp_documentation.html.19241~

File renamed without changes.

‎doc/.tmp_documentation.html.86340~

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<html xmlns="http://www.w3.org/1999/xhtml">
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4+
<title>JQuery :: dForm</title>
5+
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
6+
7+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
8+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
9+
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
10+
11+
<script type="text/javascript" src="../jquery.dform-0.1.min.js" />
12+
13+
<!-- Syntax Highlighter -->
14+
<script type="text/javascript" src="resources/highlighter/scripts/shCore.js"></script>
15+
<script type="text/javascript" src="resources/highlighter/scripts/shBrushJScript.js"></script>
16+
<link type="text/css" rel="stylesheet" href="resources/highlighter/styles/shCoreDefault.css"/>
17+
</head>
18+
<body>
19+
<script type="text/javascript">
20+
<!--
21+
$(document).ready(function() {
22+
SyntaxHighlighter.all();
23+
$(".tabs").tabs(); // Make jQuery UI tabs on this page
24+
25+
$.dform.subscribe("[type=hellobutton]", function(options) {
26+
// Get the HTML attributes without element subscriber options for the button
27+
var htmlattributes = $.dform.htmlAttributes(options);
28+
// Always return a DOM element
29+
return $("<button>").attr(htmlattributes).html("Say hello");
30+
});
31+
32+
$.dform.subscribe("alert", function(options, type) {
33+
if(type == "button" || type == "submit" || type == "hellobutton")
34+
{
35+
$(this).click(function() {
36+
alert(options);
37+
});
38+
}
39+
});
40+
41+
// Use it like this
42+
$("#mydiv").buildForm(
43+
{
44+
"type" : "hellobutton",
45+
"alert" : "Hello world!"
46+
});
47+
});
48+
-->
49+
</script>
50+
<div id="align" class="corner ui-widget">
51+
<div id="logo" class="centered"><img src="resources/logo.png" ald="jQuery::dForm" /></div>
52+
<div id="menu" class="centered full ui-widget-content ui-corner-all">
53+
<div class="padsmall">
54+
<a href="index.html">The plugin</a> |
55+
<a href="documentation.html" class="active">Documentation</a> |
56+
<a target="_blank" href="http://github.com/daffl/jquery.dform/downloads">Download</a> |
57+
<a target="_blank" href="http://github.com/daffl/jquery.dform/wiki">Wiki</a>
58+
</div>
59+
</div>
60+
<a name="plugin"></a>
61+
<h2>Basics</h2>
62+
<p>
63+
The central element of the dform plugin are so called subscriber functions. There are
64+
many predefined subscribers you can use as well as register your own. There are three
65+
different types of subscribers: Type, element and special subscribers.<br />
66+
Type subscribers generate a new element for a given type, element subscribers will be called
67+
when the name they are registered with appears in the options given to the plugin and special
68+
subscribers will be called on special events.
69+
</p>
70+
<p>Example:</p>
71+
<pre class="brush: js">
72+
$("#myform").buildForm({
73+
"name" : "textfield",
74+
"type" : "text",
75+
"id" : "testid",
76+
"value" : "Testvalue",
77+
"class" : "text-class"
78+
"label" : "Label for textfield",
79+
});
80+
</pre>
81+
<p>
82+
The above JavaScript snippet will do the following:<br />
83+
<ol>
84+
<li>Look for a type subscriber called <code>[type=text]</code>, which creates
85+
an input field with the type text, like this:<br />
86+
<pre class="brush: js"><input type="text" /></pre></li>
87+
<li>Add all attributes to the input element that don't have a registered element subscriber
88+
(which in this case are name and id) extending the element like so:<br />
89+
<pre class="brush: js"><input type="text" value="Testvalue" id="testid" name="textfield" /></pre></li>
90+
<li>Run the <i>class</i> element subscriber which is implemented like this:<br />
91+
<pre class="brush: js">
92+
$.dform.subscribe("class", function(options, type) {
93+
$(this).addClass(options);
94+
});
95+
</pre>
96+
So it basically just adds the class given as the value ("text-class") to the input element.
97+
</li>
98+
<li>Run the <i>label</i> element subscriber which adds a label to the current element</li>
99+
</ol>
100+
</p>
101+
<h2>Pre defined types</h2>
102+
<p>The following basic form element types are supported:</p>
103+
<ul>
104+
<li><code>text</code> Creates a text input</li>
105+
<li><code>password</code> Creates a password input</li>
106+
<li><code>select</code> Creates an empty dropdown list</li>
107+
<li><code>fieldset</code> Creates an empty fieldset</li>
108+
<li><code>textarea</code> Creates a textarea</li>
109+
<li><code>submit</code> Creates a submit button</li>
110+
<li><code>radio</code> Creates a radio button</li>
111+
<li><code>checkbox</code> Creates a checkbox</li>
112+
<li><code>label</code> Creates an empty label</li>
113+
<li><code>html</code> Creates an empty span element to wrap html</li>
114+
<li><code>button</code> Creates button element</li>
115+
</ul>
116+
<p>If you are using <a href="http://jqueryui.com/" target="_blank">jQuery UI</a>
117+
you can also use this types:</p>
118+
<ul>
119+
<li><code>progressbar</code> A progressbar. For supported options
120+
see the <a href="http://jqueryui.com/demos/progressbar/" target="_blank">progressbar documentation</a></li>
121+
<li><code>slider</code> The jQuery UI slider. For supported options
122+
see the <a href="http://jqueryui.com/demos/slider/" target="_blank">slider documentation</a></li>
123+
<li><code>tabs</code> Container for adding tabs</li>
124+
</ul>
125+
<h2>Pre defined element subscribers</h2>
126+
<p>After the type subscriber ran, the created element will be added to the DOM.
127+
Then the options will be traversed and, if there are any, all element subscribers
128+
will be called, with the newly added elememnt as this. The following basic element
129+
subscribers are already registered:</p>
130+
<ul>
131+
<li><code>class</code> Calls addClass on the current element
132+
(instead of of the standard behaviour which is replacing the class attribute)</li>
133+
<li><code>html</code> Sets html content of the current element</li>
134+
<li><code>elements</code> Recursively appends subelements to the current form element.</li>
135+
<li><code>value</code> Sets the value of the current element.</li>
136+
<li><code>options</code> Adds options to select type elements.</li>
137+
<li><code>hint</code> Adds a default default value to text elements, that disappears
138+
when the element gets focussed and reappears if the element looses
139+
focus and nothing has been entered.</li>
140+
<li><code>label</code> Adds a label element before (or behind, if the
141+
current element is a radiobutton or a checkbox) the current element or a legend
142+
if the current element is a fieldset.</li>
143+
</ul>
144+
<p>With jQuery UI, you will have additionally the following element subscribers:</p>
145+
<ul>
146+
<li><code>dialog</code> Creates a dialog on form or fieldset elements. For supported options
147+
see the <a href="http://jqueryui.com/demos/dialog/" target="_blank">dialog documentation</a></li>
148+
<li><code>resizable</code> Makes the current element resizable. For supported options
149+
see the <a href="http://jqueryui.com/demos/resizable/" target="_blank">resizable documentation</a></li>
150+
<li><code>datepicker</code> Turns a text element into a datepicker. For supported options
151+
see the <a href="http://jqueryui.com/demos/autocomplete/" target="_blank">datepicker documentation</a></li>
152+
<li><code>autocomplete</code> Adds an autocomplete feature to a text element. For supported options
153+
see the <a href="http://jqueryui.com/demos/autocomplete/" target="_blank">autocomplete documentation</a></li>
154+
</ul>
155+
<p>If you are using the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">
156+
jQuery validation</a> plugin you can use the following subscriber for adding field validation:</p>
157+
<ul>
158+
<li><code>validate</code> Valdiates the current element
159+
using the validation plugin. For options see
160+
the <a href="http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules" target="_blank">
161+
jQuery validate documentation for adding validation rules</a>
162+
</li>
163+
</ul>
164+
<h2>Special subscribers</h2>
165+
<p>Currently there are only two types of special subscribers supported</p>
166+
<ul>
167+
<li><code>[pre]</code> Function registered with this name will
168+
be called before any processing occurs.</li>
169+
<li><code>[post]</code> Functions registered with this name will
170+
be called after all processing is finished.</li>
171+
</ul>
172+
<h2>Adding your own</h2>
173+
<p>The main difference between type and element subscribers is, that element subscribers
174+
get the element passed which is already added into the DOM. So you will have to decide
175+
if you own subscriber will create a new element or enhance an existing one. In the following
176+
hands on example we will create a custom hello world button and a subscriber that will alert
177+
some text when the element was clicked:</p>
178+
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
179+
$.dform.subscribe("[type=hellobutton]", function(options) {
180+
// Get the HTML attributes without element subscriber options for the button
181+
var htmlattributes = $.dform.htmlAttributes(options);
182+
// Always return a DOM element
183+
return $("<button>").attr(htmlattributes).html("Say hello");
184+
});
185+
186+
$.dform.subscribe("alert", function(options, type) {
187+
if(type == "button" || type == "submit" || type == "hellobutton")
188+
{
189+
$(this).click(function() {
190+
alert(options);
191+
});
192+
}
193+
});
194+
195+
// Use it like this
196+
$("#mydiv").buildForm(
197+
{
198+
"type" : "hellobutton",
199+
"alert" : "Hello world!"
200+
});
201+
]]></script>
202+
<div class="ui-widget-content ui-corner-all">
203+
<div class="padsmall">
204+
<p>This is how it will look like:</p>
205+
<div id="mydiv"></div>
206+
</div>
207+
</div>
208+
<div style="height: 50px;"></div>
209+
</div>
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)