LittleCub Forms

Light-Weight, High-Performance & Easily Customizable

Bootstrap horizontal theme is the theme that provides bootstrap horizontal display style for all controls. It is extended from the bootstrap theme and requires the loading of the bootstrap default theme.

To apply the theme to a control and its child controls, you can simply set the control theme option as bootstrap-horizontal.

Examples

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",
    "theme" : "bootstrap-horizontal",
    "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-lg",
            "placeholder" : "Enter movie title",
            "helper" : "Enter the movie title."
        },
        "storyline" : {
            "type" : "textarea",
            "rows" : 5,
            "fieldClass" : "input-lg"
        },
        "cast" : {
            "type" : "object",
            "controls" : {
                "Jack Black" : {
                    "type" : "object",
                    "controls" : {
                        "character" : {
                            "type" : "text",
                            "size" : 50
                        },
                        "biography" : {
                            "type" : "textarea",
                            "rows" : 5,
                            "fieldClass" : "input-lg"
                        },
                        "age" : {
                            "type" : "integer",
                            "wrapperClass" : "col-sm-1"
                        },
                        "income" : {
                            "type" : "number",
                            "wrapperClass" : "col-sm-2"
                        },
                        "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'));