formyx
Version:
JQuery forms plugin
67 lines • 2.67 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/docs.min.css"/>
<link rel="stylesheet" type="text/css" href="../dist/formy-min.css"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Collapsible Container</title>
</head>
<!-- This is the Source file-->
<body style='background-color:#f3f3f3'>
<div class ="container">
<small><a href="examples.html">Back to examples</a></small>
<h2>
Add Collapse
</h2>
<div class="row">
<div class="col-sm-6">
<div id="formarea" class="panel panel-heading"></div>
</div>
<div class="col-sm-6">
<div class="panel panel-heading">
<h3>Source</h3>
<pre>
var fm = [
{ label: "<h3>Enter Your Details Here</h3>",
name: "pin" , type:"titlebox", attrs:{"class":"text-center"}
},
{ label: "PIN", name: "pin" },
{ label: "Password", name: "pwd", type:"password"},
{ label: "Upload CV", name: "upload", type:"file"},
{ label: "Period", name: "start,end", type:"daterange"},
{ label: "Submit", name: "submit", type:"button"}
];
$("#formarea").formy("createForm", fm);
var formNode = $("<div>").formy("createForm", fm, { type: "horizontal", colratio: "1:3" })
$("#formarea")
.formy("addCollapse", {"name":"Show Form", "body":formNode, bsversion:3});
//Compatibility fix:
//Use bsversion : 3 for bootstrap 3 or do not specify a bsversion
//use bsversion : 4 for bootstrap 4
</pre>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="../dist/formy.js"></script>
<script>
var fm = [
{ label: "<h3>Enter Your Details Here</h3>", name: "pin" , type:"titlebox", attrs:{"class":"text-center"}},
{ label: "PIN", name: "pin" },
{ label: "Password", name: "pwd", type:"password"},
{ label: "Upload CV", name: "upload", type:"file"},
{ label: "Period", name: "start,end", type:"daterange"},
{ label: "Submit", name: "submit", type:"button"}
];
var formNode = $("<div>").formy("createForm", fm, { type: "horizontal", colratio: "1:3" })
$("#formarea")
.formy("addCollapse", {"name":"Show Form", "body":formNode, bsversion:3});
//Compatiibility fix:
//Use bsversion : 3 for bootstrap 3 or do not specify a bsversion
//use bsversion : 4 for bootstrap 4
</script>
</html>