formyx
Version:
JQuery forms plugin
92 lines (86 loc) • 3.84 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>Formy @ BS</title>
</head>
<body style='background-color:#f3f3f3'>
<div class ="container">
<div class="row">
<div class="col-sm-12">
<small><a href="examples.html">Back to examples</a></small>
<h1>Modal Example</h1>
</div>
<div class="col-sm-6">
<button class="btn btn-primary" id="modal-trigger">Show Modal Form</button><br><br>
<button class="btn btn-primary" id="modal-large">Show Large Form</button><br><br>
Extra-Large Modal forms is supported on Bootstrap 4<br/>
<button class="btn btn-primary" id="modal-xlarge">Show Extra-Large Form</button><br><br>
</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"}
];
var form1 = $("<div>").formy("createForm", fm ,{type:"horizontal",colratio:"1:2"})
var form2 = $("<div>").formy("createForm", fm,{type:"horizontal"});
var action = function(){console.log(arguments)}
$("#modal-trigger").click(function(){
$("body").formy("createModal", {title:"<h2>Sample Modal Form</h2>", body:form1, onAction:action, animated:true})
.modal("show")
})
$("#modal-large").click(function(){
$("body").formy("createModal", {title:"<h2>Large Modal Form</h2>", body:form2, size:"lg", onAction:action, animated:true})
.modal("show")
})
$("#modal-xlarge").click(function(){
$("body").formy("createModal", {title:"<h2>Extra Large Modal Form</h2>", body:form2, size:"xl", onAction:action, animated:true})
.modal("show")
})
</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 form1 = $("<div>").formy("createForm", fm ,{type:"horizontal",colratio:"1:2"})
var form2 = $("<div>").formy("createForm", fm,{type:"horizontal"});
var action = function(){console.log(arguments)}
$("#modal-trigger").click(function(){
$("body").formy("createModal", {title:"<h2>Sample Modal Form</h2>", body:form1, onAction:action, animated:true})
.modal("show")
})
$("#modal-large").click(function(){
$("body").formy("createModal", {title:"<h2>Large Modal Form</h2>", body:form2, size:"lg", onAction:action, animated:true})
.modal("show")
})
$("#modal-xlarge").click(function(){
$("body").formy("createModal", {title:"<h2>Extra Large Modal Form</h2>", body:form2, size:"xl", onAction:action, animated:true})
.modal("show")
})
</script>
</html>