jFormino Kang-min Liu [email protected]
Jformino
Dec 15, 2014
jFormino lightning talk for JUI conference Tokyo.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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: [email protected]@gugod.org
• http://twitter.com/gugod
• http://twitter.com/handlino
終