Jformino
Post on 15-Dec-2014
1741 Views
Preview:
DESCRIPTION
Transcript
jFormino
jQuery Form by Handlino
What does it do
一、
DynamicForm
Generator
Generate<form>
$("<div/>").attr({ id: "form1" }).prependTo(document.body).formino({ legend: "Test Purpose Form", params: [ "field_one" ]});
Simple Example
$("<div/>").attr({ id: "form1" }).prependTo(document.body).formino({ legend: "Test Purpose Form", params: [ // only give field name, with auto-generateed label. "field_one", // manually assign a label { label: "Foo", name: "foo_field" }, // with initial value { label: "Bar", name: "bar_field", value: "42" }, // other types { name: "xyz", label: "XYZ", type: "checkbox", values: [ 42, 43, 44 ] } ]});
Extended Example
$("#form1").formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })
Google Map
$("#form1").formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })
Google Map
$("#form1").formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })
Google Map
二、
Form ElementUI Binder
$("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ]});
$("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ]});
$("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ]});
$("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ]});
YUI Skin compatible CSS
Why we designed it
RequirementFrom Work
DynamicForm
jQuery("div#for-form").html("<form><input/>...</form");
Not Elegant
What’s the Problem ?
jQuery("div#for-form").html("<form><input/>...</form");
Less Readable
Extend
Parameters
DeclarativeSyntax
Easy to Read ☺
Very Extendable ☺
All Parameters ☺
Input Type
• Primitives
• text, password, select, radio, checkbox
• Extended
• Date, Time, Date+Time
• Google Map
• Date Range, Ranged Value
How to use it
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } },
buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });
$("#form1").formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })
“longitude=121561499;latitude=25.08532”
$("#form1").formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })
FYI
• 檢索: jFormino
• http://st.handlino.com/hdc/?jFormino
• contact: gugod@handlino.comgugod@gugod.org
• http://twitter.com/gugod
• http://twitter.com/handlino
終