<script type="text/javascript">
$(function() {
// Load the form object from path/to/form.json
$("#myform").dform('path/to/form.json', function(data) {
this //-> Generated $('#myform')
data //-> data from path/to/form.json
});
});
</script>
<form id="myform"></form>
Type generators are functions that return a new jQuery DOM object for a specific type. If there is no type generator
for that type, a basic HTML tag with that name will be created. Every other key in the JavaScript object
you pass (the dForm object) will be used as an HTML attribute, except if there is a subscriber
registered for that key. A plugin call like this:
$('#my-div').dform({
type : "span",
id : "the-span"
});
Will append an empty <span id="the-span"></span> to the selected element.
Core types
Besides standard HTML tags the following core types are supported:
container{ "type" : "container" }
Creates a <div> container (you can also use { "type" : "div" })
text{ "type" : "text" }
Creates a text input field
password{ "type" : "password" }
Creates a password input field
submit{ "type" : "submit" }
Creates a submit button input element
reset{ "type" : "reset" }
Creates a reset button input element
hidden{ "type" : "hidden" }
Creates a hidden input element
file{ "type" : "file" }
Create a file upload field
radio{ "type" : "radio" }
Creates a radio button
checkbox{ "type" : "checkbox" }
Creates a checkbox
radiobuttons{ "type" : "radiobuttons" }
Creates a group of radiobuttons (uses options subscriber explained below)
checkboxes{ "type" : "checkboxes" }
Creates a group of checkboxes (uses options subscriber explained below)
number{ "type" : "number" }
Creates an HTML 5 number input field
url{ "type" : "url" }
Creates an HTML 5 url input field
tel{ "type" : "tel" }
Creates an HTML 5 phone number input field
email{ "type" : "email" }
Creates an HTML 5 email input field
Add your own
You can add your own types by calling $.dform.addType and pass the type name and a function
that takes the dForm object as a parameter and returns a new jQuery DOM element:
$.dform.addType("hellobutton", function(options) {
// Return a new button element that has all options that
// don't have a registered subscriber as attributes
return $("<button>").dform('attr', options).html("Say hello");
});
The type generator uses the attrplugin method to add the proper HTML attributes to the button.
Now the new type can be used like this:
Type generators can be chained. That means, that if you add a type that already exists this in the generator function
will refer to the element returned by its previous generator:
While type generators are being used to generate a base element for the given type, subscribers attach to
certain attributes in the dForm object. When traversing the object, all subscribers registered for that
key will be executed on the current element.
Core subscribers
class{String}
Adds a class to the current element (instead of setting the attribute) using .addClass().
html/elements{String|Array|Object}
Based on the options it either sets the HTML string content of the current element or appends one or an array
of dForm objects. The elements subscriber does the same but is kept for backwards compatibility.
{
"type" : "div",
"html" : "Div content"
}
Generates:
<div class="ui-dform-div">Div content</div>
This subscriber can also be used to create nested objects by using one or an array of dForm objects:
You can also use options on checkboxes and radiobuttons which will create a list of checkbox
or radio elements:
{
"type" : "checkboxes",
"options" : {
"newsletter" : "Receive the newsletter",
"terms" : "I read the terms of service",
"update" : "Keep me up to date on new events"
}
}
Generates:
<div class="ui-dform-checkboxes">
<input type="checkbox" class="ui-dform-checkbox" value="newsletter">
<label class="ui-dform-label">Receive the newsletter</label>
<input type="checkbox" class="ui-dform-checkbox" value="terms">
<label class="ui-dform-label">I read the terms of service</label>
<input type="checkbox" class="ui-dform-checkbox" value="update">
<label class="ui-dform-label">Keep me up to date on new events</label>
</div>
Note: The Google Chrome JavaScript engine V8 orders object keys that can be cast to numbers by their value and
not by the order of their definition.
caption{String|Object}
Adds a caption to the element. The type used depends on the element type:
A legend on fieldset elements
A label next to radio or checkbox elements
A label before any other element
If the element has its id set, the for attribute of the label will be set as well.
url{String|Object}
The url subscriber issues a $(element).dform('ajax', options) request to load content from remote files.
{
"type" : "div",
"url": "form.json"
}
type{String}
Besides looking up the correct Type Generator it also adds a dform specific class to the element using
$.dform.options.prefix (ui-dform- by default) and the type name.
{
"type" : "text"
}
Generates:
<input type="text" class="ui-dform-text" />
Set $.dform.options.prefix = null; if you don't want any classes being added.
Add your own
It is easy to add your own subscribers. Similar to a type generator you just pass the key name you want to subscribe
to and a function that takes the options and the type name as a parameter to $.dform.subscribe. this in the
subscriber function will refer to the current element. That way it is possible to add an alert to the
hellobutton example created in the types section:
$.dform.subscribe("alert", function(options, type) {
// Just run if the type is a hellobutton
if(type === "hellobutton") {
this.click(function() {
alert(options);
});
}
});
And alerts "Hello world!" when the button is clicked. Like type generators, subscribers will also be chained.
You can therefore add multiple subscribers with the same name adding behaviour or reacting to different types.
Special subscribers
Currently there are two types of special subscribers:
[pre]{Object}
Functions registered with this name will be called before any processing occurs and get the original options passed.
[post]{Object}
Functions registered with this name will be called after all processing is finished and also get the original
options passed.
Plugin
jQuery plugin methods
The dform plugin function follows the jQuery plugin convention of taking an options object or a
method name as the first parameter to call different methods:
$(form).dform(options [, converter]){Object}{String}
Append the dForm object to each selected element. If the element is of the same type (e.g. if you are appending
a type : 'form' on a <form>) or if no type has been given run the subscribers and
add the attributes on the current element. Optionally use a converter with a given name.
$(form).dform(url [, success], [, error]){String}{Function}{Function}
Load a JSON form definition using GET from a given URL and execute a success handler when it returns
or an error handler if the request faiuls. The handler gets the data passed and has this refer to the form element.
$(form).dform('run', options){Object}
Run all subscribers from a given dForm object on the selected element(s).
$(form).dform('run', name, options, type){String}{Mixed}{String}
Run a subscriber with a given name and options on the selected element(s) using a specific type.
Usually used internally.
$(form).dform('append', options [, converter]){Object}{String}
Append a dForm element to each selected element. Optionally using a converter with the
given name.
$(form).dform('attr', options){Object}
Set each attribute from the options object that doesn't have a corresponding subscriber registered.
$(form).dform('ajax', params [, success] [, error]){Object|String}{Function}{Function}
Load a form definition using Ajax. The params take the same options as a
jQuery Ajax call.
Static functions
$.keySet(object){Object}
Return an array of the objects keys.
$.withKeys(object, keys){Object}{Array}
Returns a new object that contains all values from the given
object that have a key which is also in the array keys.
$.withoutKeys(object, keys){Object}{Array}
Returns a new object that contains all value from the given
object that do not have a key which is also in the array keys.
$.dform.options
Static options for generating a form. Currently only $.dform.options.prefix
is being used.
$.dform.defaultType(options){Object}
A type generator that will be used when no other registered type has been found.
The standard generator creates an HTML element according to the type given:
<a class="ui-dform-a" href="http://daffl.github.com/jquery.dform">Visit the plugin homepage</a>
$.dform.types([name]){String}
Returns all type generators for a given type name. If no name is given, a map of type names
to an array of generator functions will be returned.
$.dform.addType(name, generator [, condition]){String}{Function}{Boolean}
Add a new type with a given name and generator function which takes the options as the parameter
and returns a new element. Optionally pass a condition which will add the type only if it is true.
$.dform.subscribe(name, subscriber [, condition]){String}{Function}{Boolean}
Add a new subscriber function for a given name that takes the value and type name as the parameter and will have
this set to the current element. Optionally pass as condition which will add the subscriber only if it is true.
$.dform.subscribers([name])
Returns all subscribers for a given name. If no name is given, an object containing all subscribers will
be returned.
$.dform.hasSubscription(name){String}
Returns if there is at least one subscriber registered with the given name.
$.dform.createElement(options){Object}
Returns a new element either using a registered type generator or the default type generator.
jQuery UI
jQuery.dForm automatically adds support for whichever jQuery UI plugin is available.
If the form has the ui-widget class the plugin will automatically turn buttons into jQuery UI buttons and add
corners to text, textarea, password and fieldset elements.
Note: jQuery UI has to be loaded before the dForm plugin.
Types
Most jQuery UI widgets have an appropriate type generator implemented. Besides normal HTML attributes,
each take the same options as described in the jQuery UI documentation.
accordion{ "type" : "accordion" }
Creates a container for a jQueryUI accordion. Use the entries subscriber to add elements.
You can use any jQueryUI accordion option in the definition.
The caption in each entries element will be used as the accordion heading:
tabs{ "type" : "tabs" }
Creates a container for a set of jQuery UI tabs. Use the entries subscriber to add elements.
You can use any jQueryUI tabs option in the definition.
The caption in each entries element will be used as the tab heading. You can either pass an array
of entries and set the id attribute individually or an object which will use the key name as the id:
If the form has the ui-widget class the jQuery UI CSS error classes will be used to highlight fields.
jQuery Globalize
jQuery.Globalize adds internationalization to JavaScript.
If available, the html and options subscribers will be enabled to use internationalized strings and option lists.
For example with Globalize configured like this:
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
客服电话
APP下载
官方微信
请发表评论