Adding jqxExpander to your web page

In this post we will show you how to add a jqxExpander to your web page. 1. Add the JavaScript files.
  • Create a “scripts” directory in the root directory of your webpage.
  • Copy the jqxexpander.js file into your scripts folder.
  • Copy the jqxcore.js file into your scripts folder.
  • Copy the jQuery.js file into your scripts folder.
  • Append the following code to the Head tag of your webpage:
 <script src="./scripts/jquery.js" type="text/javascript"></script>  
 <script src="./scripts/jqxcore.js" type="text/javascript"></script>  
 <script src="./scripts/jqxexpander.js" type="text/javascript"></script>  
2. Add the CSS stylesheet file(s).
  • Create “styles” directory in the root directory of your website.
  • Copy jqx.base.css in the styles folder.
  • Include the jqx.base.css in your web page’s Head tag.
 <link rel="stylesheet" type="text/css" href="./styles/jqx.base.css" />  
3. Add the HTML markup for jqxExpander. Create a DIV element in the document’s body with id=”expander”. The DIV must have two inner DIV elements – one for the head section and one for the content section.
   <div id="expander">  
     <div>Head</div>  
     <div>Content</div>  
   </div>  
Add the jqxExpander Header content in the first DIV element. Add any content that you want to display in the second DIV element. 4. Initialize jqxExpander using the script below:
 <script type="text/javascript">  
   $(document).ready(function () {  
     $('#expander').jqxExpander({ width: 250, height: 100 });  
   });  
 </script>  
This entry was posted in jQuery Plugins, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxExpander and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply