Weitere ähnliche Inhalte
Mehr von Kang-min Liu (19)
Jformino
- 9. Extended Example
$(quot;<div/>quot;).attr({ id: quot;form1quot; }).prependTo(document.body)
.formino({
legend: quot;Test Purpose Formquot;,
params: [
// only give field name, with auto-generateed label.
quot;field_onequot;,
// manually assign a label
{
label: quot;Fooquot;,
name: quot;foo_fieldquot;
},
// with initial value
{
label: quot;Barquot;,
name: quot;bar_fieldquot;,
value: quot;42quot;
},
// other types
{
name: quot;xyzquot;,
label: quot;XYZquot;,
type: quot;checkboxquot;,
values: [ 42, 43, 44 ]
}
]
});
- 10. Google Map
$(quot;#form1quot;).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: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
- 11. Google Map
$(quot;#form1quot;).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: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
- 12. Google Map
$(quot;#form1quot;).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: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
- 15. $(quot;input#fooquot;).formino({
act_as: 'datetime-calendar',
buttons: [
{ type: quot;submitquot;, label: quot;OKquot; },
{ type: quot;cancelquot;, label: quot;Nevermindquot; },
{
label: quot;Helloquot;,
click: function(selected_date) {
$(quot;#messagequot;)
.text( quot;Hello, you select quot; + selected_date.toString() );
}
}
]
});
- 16. $(quot;input#fooquot;).formino({
act_as: 'datetime-calendar',
buttons: [
{ type: quot;submitquot;, label: quot;OKquot; },
{ type: quot;cancelquot;, label: quot;Nevermindquot; },
{
label: quot;Helloquot;,
click: function(selected_date) {
$(quot;#messagequot;)
.text( quot;Hello, you select quot; + selected_date.toString() );
}
}
]
});
- 17. $(quot;input#fooquot;).formino({
act_as: 'datetime-calendar',
buttons: [
{ type: quot;submitquot;, label: quot;OKquot; },
{ type: quot;cancelquot;, label: quot;Nevermindquot; },
{
label: quot;Helloquot;,
click: function(selected_date) {
$(quot;#messagequot;)
.text( quot;Hello, you select quot; + selected_date.toString() );
}
}
]
});
- 18. $(quot;input#fooquot;).formino({
act_as: 'datetime-calendar',
buttons: [
{ type: quot;submitquot;, label: quot;OKquot; },
{ type: quot;cancelquot;, label: quot;Nevermindquot; },
{
label: quot;Helloquot;,
click: function(selected_date) {
$(quot;#messagequot;)
.text( quot;Hello, you select quot; + selected_date.toString() );
}
}
]
});
YUI Skin compatible CSS
- 34. • Primitives
• text, password, select, radio, checkbox
• Extended
• Date, Time, Date+Time
• Google Map
• Date Range, Ranged Value
- 36. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 37. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 38. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 39. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 40. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 41. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 42. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 43. $(quot;#form1quot;).formino({
legend: quot;jquery.form simple demoquot;,
params: {
quot;Titlequot;: quot;(The Title)quot;,
quot;namequot;: {
label: quot;Namequot;
},
quot;readyquot;: {
label: quot;Ready ?quot;,
type: quot;radioquot;,
values: [ quot;yesquot;, quot;noquot; ]
},
quot;xoryorzquot;: {
label: quot;X, Y, or Z?quot;,
type: quot;radioquot;,
values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ]
},
quot;ctoquot;: {
label: quot;Check These Outquot;,
type: quot;checkboxquot;,
values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ]
},
quot;favorite_foodquot;: {
label: quot;Favorite Foodquot;,
type: quot;selectquot;,
values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;]
}
},
buttons: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
.submit(function() {
$(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;);
setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000);
return false;
});
- 44. $(quot;#form1quot;).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: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
- 45. $(quot;#form1quot;).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: [
{
quot;typequot;: quot;submitquot;,
quot;labelquot;: quot;Goquot;,
quot;valuequot;: quot;goquot;
},
{
quot;typequot;: quot;resetquot;,
quot;labelquot;: quot;Resetquot;
}
]
})
“longitude=121561499;latitude=25.08532”
- 47. • : jFormino
• http://st.handlino.com/hdc/?jFormino
• contact:
gugod@handlino.com
gugod@gugod.org
• http://twitter.com/gugod
• http://twitter.com/handlino