jQWidgets jqxExpander initContent Property
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. The jqxExpander represents a jQuery widget displaying the header and content sections. Click on the header section to expand or collapse the content.
The initContent property is used to set or return a callback function that is being called when the item content needs to be initialized. It accepts function type value and its default value is null.
Syntax:
Set the initContent property.
$('selector').jqxExpander({ initContent: function });
Return the initContent property.
var initContent = $('selector').jqxExpander('initContent');Linked Files: Download jQWidgets from the given 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” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.energyblue.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxexpander.js”></script>
Example: The below example illustrates the jQWidgets jqxExpander initContent property.
HTML
<!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.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqx-all.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script></head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxExpander initContent Property </h3> <div id='jqxExp'> <div>GeeksforGeeks</div> <div style="text-align: justify;"> <input type="button" id='jqxBtn' style="margin-top: 50px;" value="GFG" /> </div> </div> </center> <script type="text/javascript"> $(document).ready(function() { $("#jqxExp").jqxExpander({ width: 250, height: 150, initContent: function () { $("#jqxButton").jqxButton({ width: 120, height: 40 }); } }); }); </script></body> </html> |
Output:
Please Login to comment...