jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. jqxForm represents a jQuery form widget that contains text fields, textArea and password fields, etc which helps us to store data in the backend of our application.
The template property is used to set or return the template property that is used to set the basic template which defines the structure of the jqxForm element. It accepts an object and the default value is undefined.
Its possible values are as follows.
- bind: It is used to set a template’s member Name.
- type: It is used to set a template member’s type.
- label: It is used to set the label displayed next to the field.
- labelWidth: It is used to set the width with the label displayed next to the field.
- required: It is used to set whether the field is optional or not.
- info: It is used to set the field information icon’s tooltip.
- infoPosition: It is used to set the information icon’s position.
- component: It is used to set the component’s type.
- options: It is used to set the ‘option’ type’s options.
- init: It is used to set the callback function for ‘custom’ type initialization.
- rowHeight: It is used to set the row’s height.
- width: It is used to set the row’s width.
- columns: It is used to set the row’s columns.
- align: It is used to set the alignment of the field.
- valign: It is used to set the vertical alignment of the field.
- columnWidth: It is used to set the column’s width.
Syntax:
-
Set the template property.
$('Selector').jqxForm({ template : object }); -
Return the template property.
var template = $('Selector').jqxForm('template');
Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.12.4.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxform.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
Example: The below example illustrates the jqxForm template property in jQWidgets.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet"
href="jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.12.4.min.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxcore.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxinput.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxlistbox.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxpanel.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js">
</script>
<script type="text/javascript" src="jqwidgets/jqxform.js">
</script>
<script type="text/javascript" src="scripts/demos.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>jQWidgets jqxForm template property</h3>
<div id='Form' style="width: 400px; height: auto;"></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
var tp = [
{
bind: 'Name',
type: 'text',
label: 'Name',
required: true,
labelWidth: '80px',
width: '250px',
info: 'Enter Name',
infoPosition: 'right'
},
{
bind: 'Email',
type: 'text',
label: 'Email',
required: true,
labelWidth: '80px',
width: '250px'
},
{
bind: 'Social',
type: 'text',
label: 'Social',
required: true,
labelWidth: '80px',
width: '250px'
},
{
bind: 'Gender',
type: 'option',
label: 'Gender',
required: false,
labelWidth: '80px',
width: '250px',
component: 'jqxDropDownList',
options: [
{ value: 'Male' },
{ value: 'Female'}
]
},
{
bind: 'Password',
type: 'password',
label: 'Password',
required: true,
labelWidth: '80px',
width: '250px'
},
{
columns: [
{
type: 'button',
text: 'Submit',
width: '90px',
height: '30px',
rowHeight: '40px',
columnWidth: '50%',
align: 'right'
},
{
type: 'button',
text: 'Cancel',
width: '90px',
height: '30px',
rowHeight: '40px',
columnWidth: '50%'
}
]
}
];
$('#Form').jqxForm({
template: tp
});
});
</script>
</body>
</html>
|
Output: