Skip to content

Commit 57940dd

Browse files
author
David Luecke
committed
Commit for Version 0.1
1 parent 91b6744 commit 57940dd

File tree

5 files changed

+203
-169
lines changed

5 files changed

+203
-169
lines changed

‎doc/css/stylesheet.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,4 @@ a, .ui-widget-content a
5757
}
5858
a:hover, a.active { color: #6eac2c; }
5959
h1, h2, h3 { color: #505050; }
60+
ul code { font-family: serif; font-weight: bold; }

‎doc/index.html

100755100644
Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
99
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
1010
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
11-
11+
1212
<script type="text/javascript" src="../js/jquery.dform.js"></script>
1313
<script type="text/javascript" src="../js/jquery.dform.subscriptions.js"></script>
1414
<script type="text/javascript" src="../js/jquery.dform.ext.js"></script>
@@ -39,9 +39,8 @@
3939
<div id="logo" class="centered"><img src="resources/logo.png" ald="jQuery::dForm" /></div>
4040
<div id="menu" class="centered full ui-widget-content ui-corner-all">
4141
<div class="padsmall">
42-
<a href="#plugin">The plugin</a> |
43-
<a href="#examples">Examples</a> |
44-
<a href="#about">About</a> |
42+
<a href="index.html" class="active">The plugin</a> |
43+
<a href="documentation.html">Documentation</a> |
4544
<a target="_blank" href="http://github.com/daffl/jquery.dform/downloads">Download</a> |
4645
<a target="_blank" href="http://github.com/daffl/jquery.dform/wiki">Wiki</a>
4746
</div>
@@ -89,7 +88,7 @@ <h2>What it is for</h2>
8988
<p>You should try this plugin if you want to</p>
9089
<ul>
9190
<li>manage all your form related jQuery plugins in a unified way
92-
<br />(some supported out of the box)</li>
91+
<br />(jQuery UI and the Validation plugin supported out of the box)</li>
9392
<li>scaffold forms from business objects of your server side framework</li>
9493
<li>have an easy way to include jQuery UI elements and JavaScript validation</li>
9594
<li>write JavaScript instead of HTML markup since your page doesn't run without JS anyway</li>
@@ -143,9 +142,9 @@ <h3>Login form</h3>
143142
</div>
144143

145144
<h3>Registration form</h3>
146-
<p>A more complex form with form field validation using the well established
147-
jQuery validation plugin (submit to see validation messages)</p>
148-
145+
<p>A more complex form with form field validation using the well established
146+
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jQuery validation plugin</a>
147+
(submit to see validation messages)</p>
149148
<style type="text/css">
150149
#registrationform fieldset { width: 45%; float: left; height: 420px; margin-right: 5px; }
151150
#registrationform input[type=submit] { margin: 10px 0; }
@@ -281,10 +280,11 @@ <h3>Registration form</h3>
281280
});
282281
--></script>
283282
<h3>jQuery UI</h3>
284-
<p>The plugin comes with support for the great jQuery UI framework and its controls.
283+
<p>The plugin comes with support for the great <a href="http://jqueryui.com" target="_blank">jQuery UI</a>
284+
and its controls.
285285
If the form has the <strong>.ui-widget</strong> class matching jQuery UI styles will be applied
286286
to all buttons and input elements as well as the validation messages.</p>
287-
<p>Example for standard form enhanced with jQuery UI css, showing in a jQuery UI modal dialog</p>
287+
<p>Example for standard form with validation enhanced with jQuery UI css, showing in a jQuery UI modal dialog</p>
288288
<div class="exampleform tabs">
289289
<ul>
290290
<li><a href="#uiform-div">Form</a></li>
@@ -450,10 +450,12 @@ <h3>jQuery UI</h3>
450450
<a name="about"></a>
451451
<h2>About</h2>
452452
<p>Download the <a target="_blank" href="http://github.com/daffl/jquery.dform/downloads">jQuery.dForm package</a></p>
453+
<p>Read on in the <a href="documentation.html">Documentation</a></p>
453454
<p>Visit the project page on <a target="_blank" href="http://github.com/daffl/jquery.dform">GitHub</a></p>
454455
<p>File a new bug report or feature request on the <a target="_blank" href="http://github.com/daffl/jquery.dform/issues">GitHub issue tracker</a></p>
455-
<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>
456+
<p>Help improve the <a target="_blank" href="http://github.com/daffl/jquery.dform/wiki">Wiki</a></p>
456457
<p>Follow <a target="_blank" href="http://twitter.com/daffl">@daffl</a> on Twitter</p>
458+
<div style="height: 50px;"></div>
457459
</div>
458460
</body>
459461
</html>

‎js/jquery.dform.ext.js

Lines changed: 102 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
*/
2525

2626
/**
27-
* Plugin extension subscribers, adding support for jQuery UI
28-
* and the Validation Plugin.
29-
* Initializes element type subscribers and subscriber functions
27+
* Plugin extension subscribers, to support external jQuery plugins,
28+
* adding support for jQuery UI and the Validation Plugin.
29+
* Initializes element types and subscriber functions
3030
* provided by the jQuery UI framework.
3131
* Only subscribes if the elements (like tabs, slider, progressbar etc.)
3232
* are actually available (in case you are using a custom jQuery UI build).
@@ -35,49 +35,46 @@
3535
*/
3636
(function($)
3737
{
38-
if($.isFunction($.fn.validate)) // Check if the validation plugin is available
38+
$.dform.subscribeIf($.isFunction($.fn.validate), // Subscribe if validation plugin is available
3939
{
40-
$.dform.subscribe(
40+
/**
41+
* Add a preprocessing subscriber that calls .validate() on the form,
42+
* so that we can add rules to the input elements.
43+
*
44+
* @param options mixed All options that have been used for
45+
* creating the current element.
46+
* @param type string The type of the <strong>this</strong> element
47+
*/
48+
"[pre]" : function(options, type)
4149
{
42-
/**
43-
* Add a preprocessing subscriber that calls .validate() on the form,
44-
* so that we can add rules to the input elements.
45-
*
46-
* @param options mixed All options that have been used for
47-
* creating the current element.
48-
* @param type string The type of the <strong>this</strong> element
49-
*/
50-
"[pre]" : function(options, type)
50+
if(type == "form")
5151
{
52-
if(type == "form")
53-
{
54-
var defaults = {};
55-
if($(this).hasClass("ui-widget"))
56-
defaults = {
57-
highlight: function(input)
58-
{
59-
$(input).addClass("ui-state-highlight");
60-
},
61-
unhighlight: function(input)
62-
{
63-
$(input).removeClass("ui-state-highlight");
64-
}
65-
};
66-
$(this).validate(defaults);
67-
}
68-
},
69-
/**
70-
* Adds support for the jQuery validation rulesets.
71-
*
72-
* @param options object Options as specified in the rules parameter
73-
* @param type string The type of the <strong>this</strong> element
74-
*/
75-
"validate" : function(options, type)
76-
{
77-
$(this).rules("add", options);
52+
var defaults = {};
53+
if($(this).hasClass("ui-widget"))
54+
defaults = {
55+
highlight: function(input)
56+
{
57+
$(input).addClass("ui-state-highlight");
58+
},
59+
unhighlight: function(input)
60+
{
61+
$(input).removeClass("ui-state-highlight");
62+
}
63+
};
64+
$(this).validate(defaults);
7865
}
79-
});
80-
}
66+
},
67+
/**
68+
* Adds support for the jQuery validation rulesets.
69+
*
70+
* @param options object Options as specified in the rules parameter
71+
* @param type string The type of the <strong>this</strong> element
72+
*/
73+
"validate" : function(options, type)
74+
{
75+
$(this).rules("add", options);
76+
}
77+
});
8178

8279
function _getOptions(type, options)
8380
{
@@ -89,9 +86,7 @@
8986
return result;
9087
}
9188

92-
if($.isFunction($.fn.progressbar))
93-
{
94-
$.dform.subscribe("[type=progressbar]",
89+
$.dform.subscribeIf($.isFunction($.fn.progressbar), "[type=progressbar]",
9590
/**
9691
* Returns a progressbar jQuery UI progressbar.
9792
* @param options object All parameters for this type
@@ -101,11 +96,8 @@
10196
var ops = _getOptions("progressbar", options);
10297
return $("<div>").attr(ops.attributes).progressbar(ops.options);
10398
});
104-
}
10599

106-
if($.isFunction($.fn.slider))
107-
{
108-
$.dform.subscribe("[type=slider]",
100+
$.dform.subscribeIf($.isFunction($.fn.slider), "[type=slider]",
109101
/**
110102
* Returns a slider.
111103
* @param options object All parameters for this type
@@ -115,57 +107,51 @@
115107
var ops = _getOptions("slider", options);
116108
return $("<div>").attr(ops.attributes).slider(ops.options);
117109
});
118-
}
119110

120-
if($.isFunction($.fn.tabs))
111+
$.dform.subscribeIf($.isFunction($.fn.tabs),
121112
{
122-
$.dform.subscribe(
113+
/**
114+
* Creates a container for jQuery UI tabs.
115+
* @param options object All parameters for this type
116+
*/
117+
"[type=tabs]" : function(options)
123118
{
124-
/**
125-
* Creates a container for jQuery UI tabs.
126-
* @param options object All parameters for this type
127-
*/
128-
"[type=tabs]" : function(options)
129-
{
130-
var ops = _getOptions("tabs", options);
131-
return $("<div>").attr(ops.attributes);
132-
},
133-
/**
134-
* Adds tabs to a tab element.
135-
*
136-
* @param options object An object containing a tab with its unique id as a key
137-
* and the tab options including an "elements" with all
138-
* subelements as a value.
139-
* @param type string The type of the <strong>this</strong> element
140-
*/
141-
"tabs" : function(options, type)
119+
var ops = _getOptions("tabs", options);
120+
return $("<div>").attr(ops.attributes);
121+
},
122+
/**
123+
* Adds tabs to a tab element.
124+
*
125+
* @param options object An object containing a tab with its unique id as a key
126+
* and the tab options including an "elements" with all
127+
* subelements as a value.
128+
* @param type string The type of the <strong>this</strong> element
129+
*/
130+
"tabs" : function(options, type)
131+
{
132+
if (type == "tabs")
142133
{
143-
if (type == "tabs")
134+
$(this).append("<ul>");
135+
var scoper = $(this);
136+
$.each(options, function(tabname, ops)
144137
{
145-
$(this).append("<ul>");
146-
var scoper = $(this);
147-
$.each(options, function(tabname, ops)
138+
var tablink = $("<a>").attr(
148139
{
149-
var tablink = $("<a>").attr(
150-
{
151-
"href" : "#" + tabname
152-
}).html(ops.title);
153-
var li = $("<li>").append(tablink);
154-
var tabdiv = $("<div>").attr("id", tabname);
155-
$(scoper).children("ul").first().append(li);
156-
$(scoper).append(tabdiv);
157-
158-
$(tabdiv).runAll(ops);
159-
});
160-
}
161-
$(this).tabs();
140+
"href" : "#" + tabname
141+
}).html(ops.title);
142+
var li = $("<li>").append(tablink);
143+
var tabdiv = $("<div>").attr("id", tabname);
144+
$(scoper).children("ul").first().append(li);
145+
$(scoper).append(tabdiv);
146+
147+
$(tabdiv).runAll(ops);
148+
});
162149
}
163-
});
164-
}
150+
$(this).tabs();
151+
}
152+
});
165153

166-
if($.isFunction($.fn.accordion))
167-
{
168-
$.dform.subscribe("[type=accordion]",
154+
$.dform.subscribeIf($.isFunction($.fn.accordion), "[type=accordion]",
169155
/**
170156
* Creates a container for the jQuery UI accordion.
171157
* @param options object All parameters for this type
@@ -176,11 +162,8 @@
176162
var ops = _getOptions("accordion", options);
177163
return $("<div>").attr(ops.attributes);
178164
});
179-
}
180165

181-
if($.isFunction($.fn.dialog))
182-
{
183-
$.dform.subscribe("dialog",
166+
$.dform.subscribeIf($.isFunction($.fn.dialog), "dialog",
184167
/**
185168
* Creates a dialog on form or fieldset elements.
186169
*
@@ -192,11 +175,8 @@
192175
if (type == "form" || type == "fieldset")
193176
$(this).dialog(options);
194177
});
195-
}
196178

197-
if($.isFunction($.fn.resizable))
198-
{
199-
$.dform.subscribe("resizable",
179+
$.dform.subscribeIf($.isFunction($.fn.resizable), "resizable",
200180
/**
201181
* Makes the current element resizeable.
202182
*
@@ -207,11 +187,8 @@
207187
{
208188
$(this).resizable(options);
209189
});
210-
}
211190

212-
if($.isFunction($.fn.datepicker))
213-
{
214-
$.dform.subscribe("datepicker",
191+
$.dform.subscribeIf($.isFunction($.fn.datepicker), "datepicker",
215192
/**
216193
* Turns a text element into a datepicker
217194
*
@@ -223,11 +200,8 @@
223200
if (type == "text")
224201
$(this).datepicker(options);
225202
});
226-
}
227-
228-
if($.isFunction($.fn.autocomplete))
229-
{
230-
$.dform.subscribe("autocomplete",
203+
204+
$.dform.subscribeIf($.isFunction($.fn.autocomplete), "autocomplete",
231205
/**
232206
* Adds an autocomplete feature to a text element.
233207
*
@@ -239,27 +213,26 @@
239213
if (type == "text")
240214
$(this).autocomplete(options);
241215
});
242-
}
243216

244217
$.dform.subscribe("[post]",
245-
/**
246-
* Post processing subscriber that adds jQuery UI styling classes to
247-
* "text", "textarea", "password" and "fieldset" elements as well
248-
* as calling .button() on submit buttons.
249-
*
250-
* @param options mixed All options that have been used for
251-
* creating the current element.
252-
* @param type string The type of the <strong>this</strong> element
253-
*/
254-
function(options, type)
255-
{
256-
if ($(this).parents("form").hasClass("ui-widget"))
218+
/**
219+
* Post processing subscriber that adds jQuery UI styling classes to
220+
* "text", "textarea", "password" and "fieldset" elements as well
221+
* as calling .button() on submit buttons.
222+
*
223+
* @param options mixed All options that have been used for
224+
* creating the current element.
225+
* @param type string The type of the <strong>this</strong> element
226+
*/
227+
function(options, type)
257228
{
258-
if ( (type == "button" || type == "submit") && $.isFunction($.fn.button))
259-
$(this).button();
260-
if ($.inArray(type, [ "text", "textarea", "password",
261-
"fieldset" ]) != -1)
262-
$(this).addClass("ui-widget-content ui-corner-all");
263-
}
264-
});
229+
if ($(this).parents("form").hasClass("ui-widget"))
230+
{
231+
if ((type == "button" || type == "submit") && $.isFunction($.fn.button))
232+
$(this).button();
233+
if ($.inArray(type, [ "text", "textarea", "password",
234+
"fieldset" ]) != -1)
235+
$(this).addClass("ui-widget-content ui-corner-all");
236+
}
237+
});
265238
})(jQuery);

0 commit comments

Comments
 (0)