Light-Weight, High-Performance & Easily Customizable
Foundation themes come with support for grid layout template. To render a grid and bind controls to grid
cells, all we need to do is to set control template option as control_object_grid
and then provide binding settings within the grid option.
"template" : "control_object_grid",
/* Grid with four rows. */
"grid" : {
"1" : {
"1" : {
/* First grid cell of the first row has class span4. */
"span" : "4",
/* Display income control within the first cell of the first row. */
"controls" : ["income"]
},
"2" : {
/* Second grid cell of the first row has class span4. */
"span" : "4",
/* Display character control within the second cell of the first row. */
"controls" : ["character"]
},
"3" : {
/* Thrid grid cell of the first row has class span4. */
"span" : "4",
/* Display famous control within the third cell of the first row. */
"controls" : ["famous"]
}
},
"2" : {
"1" : {
/* First grid cell of the second row has class span9. */
"span" : "9",
/* Display biography control within the first cell of the second row. */
"controls" : ["biography"]
},
"2" : {
/* Second grid cell of the second row has class span3. */
"span" : "3",
/* Display age control within the second cell of the second row. */
"controls" : ["age"]
}
},
"3" : {
...
},
"4" : {
...
}
}
LittleCub.loadThemes({
"foundation" : "../../../themes/foundation/foundation.html"
}, function() {
var objectControl1 = LittleCub({
"movie" : "Kung Fu Panda",
"storyline" : "The story is set in the Valley of Peace, a fictional land in ancient China inhabited by anthropomorphic animals. Po, a panda, is a kung fu fanatic who idolizes the Furious Five?Tigress, Monkey, Mantis, Viper, and Crane?a quintet of kung fu masters trained by the red panda Master Shifu to protect the valley.",
"cast" : {
"Jack Black" : {
"character" : "Po",
"biography" : "Thomas Jacob \"Jack\" Black (born August 28, 1969)[1] is an American actor, producer, comedian, voice artist, writer, and musician. His acting career has been extensive, starring primarily as bumbling and cocky but internally self-conscious outsiders in comedy films, though he has played dramatic roles."
}
},
"cookie" : "1234yjfkdjfkdjoiere,,mmfd",
"comments" : []
}, {
"type" : "object",
"form" : {
"attrs" : {
"name" : "my-form",
"endpoint" : "/post"
},
"buttons" :[
{
"type" : "submit",
"name" : "submit",
"value" : "Submit"
},
{
"type" : "reset",
"name" : "reset",
"value" : "Reset"
}
]
},
"controls" : {
"movie" : {
"type" : "text",
"fieldClass" : "input-xxlarge",
"placeholder" : "Enter movie title",
"helper" : "Enter the movie title."
},
"storyline" : {
"type" : "textarea",
"rows" : 5,
"fieldClass" : "input-xxlarge"
},
"cast" : {
"type" : "object",
"controls" : {
"Jack Black" : {
"type" : "object",
"template" : "control_object_grid",
"grid" : {
"1" : {
"1" : {
"span" : "four",
"controls" : ["income"]
},
"2" : {
"span" : "four",
"controls" : ["character"]
},
"3" : {
"span" : "four",
"controls" : ["famous"]
}
},
"2" : {
"1" : {
"span" : "nine",
"controls" : ["biography"]
},
"2" : {
"span" : "three",
"controls" : ["age"]
}
},
"3" : {
"1" : {
"span" : "six",
"controls" : ["gender"]
},
"2" : {
"span" : "six",
"controls" : ["sports"]
}
},
"4" : {
"1" : {
"span" : "twelve",
"controls" : ["image"]
}
}
},
"controls" : {
"character" : {
"type" : "text",
"size" : 50
},
"biography" : {
"type" : "textarea",
"rows" : 5,
"fieldClass" : "input-xxlarge"
},
"age" : {
"type" : "integer"
},
"income" : {
"type" : "number"
},
"famous" : {
"type" : "checkbox",
"prompt" : "Is he famous?"
},
"gender" : {
"type" : "radio",
"options" : {
"male" : "Male",
"female" : "Female",
"unknown" : "Unknown"
}
},
"sports" : {
"type" : "select",
"size" : 4,
"options" : ["Soccer","Basketball","Tennis","Polo"]
},
"image" : {
"type" : "file"
}
}
}
}
},
"cookie" : {
"type" : "hidden"
},
"comments" : {
"type" : "array",
"items" : {
"type" : "object",
"controls" : {
"body" : {
"type" : "textarea"
},
"rating" : {
"type" : "select"
}
}
}
}
}
}, {
"type" : "object",
"title" : "Bear Movies",
"properties" : {
"movie" : {
"type" : "string",
"title" : "Movie Title",
"minLength" : 10
},
"storyline" : {
"type" : "string",
"title" : "Storyline"
},
"cast" : {
"type" : "object",
"title" : "Cast",
"properties" : {
"Jack Black" : {
"type" : "object",
"title" : "Jack Black",
"properties" : {
"character" : {
"type" : "string",
"title" : "Character"
},
"biography" : {
"type" : "string",
"title" : "Biography"
},
"age" : {
"type" : "integer",
"minimum" : 18,
"maximum" : 30,
"multipleOf" : 2
},
"income" : {
"type" : "number",
"minimum" : 18000,
"maximum" : 30000
},
"famous" : {
"type" : "boolean"
},
"gender" : {
"type" : "string",
"enum" : ["male", "female", "unknown"]
},
"sports" : {
"type" : "array",
"enum" : ["soccer", "basketball", "tennis","polo"]
},
"image" : {
"type" : "string"
}
}
}
},
"required" : ["character"]
},
"cookie" : {
"type" : "string"
},
"comments" : {
"type" : "array",
"maxItems" : 6,
"uniqueItems" : true,
"items" : {
"type" : "object",
"title" : "Comment",
"properties" : {
"body" : {
"type" : "string"
},
"rating" : {
"type" : "integer",
"enum" : [1,2,3,4,5]
}
}
}
}
}
}, document.getElementById('object-control-1'));
});