How to design accordion using jQuery EasyUI Mobile ?
EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Accordions are HTML contents that toggle between showing and hiding.
Download link for EasyUI framework for jQuery:
https://www.jeasyui.com/download/index.php
Please downloads all the pre-compiled files for the following code implementation and take care of proper file paths.
Example 1: The following example demonstrates the basic accordion using jQuery EasyUI framework. It has two contents to show and hide. One is a list and the second list displays its content like Ajax loading from another HTML file named “mycontent.html”.
HTML
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content= "initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery.easyui.mobile.js"></script></head><body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title"> My Accordion </span> </div> </header> <div class="easyui-accordion" fit="true" border="false"> <div title="List1"> <ul class="m-list"> <li>Algorithms</li> <li>Data Structures</li> <li>Web designing</li> <li>More...</li> </ul> </div> <div title="Ajax List2" href="mycontent.html" style="padding:10px"> </div> </div> </div></body></html> |
“mycontent.html” file: The following file is used in both the examples for Ajax loading of data content.
HTML
<!DOCTYPE html><html><body> <p style="font-size:14px">My AJAX content.</p> <ul> <li> There are many important things that should be taken care of, like user friendliness, modularity, security, maintainability, etc. </li> <li> Python is a high-level, general-purpose and a very popular programming language. </li> <li> Java has been one of the most popular programming language for many years. </li> <li> The Java codes are first compiled into byte code (machine independent code). </li> <li> Java is used in all kind of applications like Mobile Applications (Android is Java based). </li> <li> When compared with C++, Java codes are generally more maintainable because Java does not allow many things which may lead bad/inefficient programming if used incorrectly. </li> </ul></body></html> |
Output:
Example 2: The following example demonstrates a custom accordion header using jQuery EasyUI Mobile plugin.
HTML
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <script type="text/javascript" src="jquery.min.js"> </script> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> <style scoped> .ajax-list { padding: 5px; position: relative; line-height: 20px; background: #fff; font-weight: bold; margin: -5px; } </style></head><body> <div class="easyui-navpanel"> <header> <!-- Mobile.css has styles for m-toolbar,m-title --> <div class="m-toolbar"> <span class="m-title"> My Custom Header </span> </div> </header> <div class="easyui-accordion" data-options ="fit:true,border:false,selected:-1"> <div> <header> <div class="hh-inner"> <span>List 1</span> <span class="m-badge" style="float:right"> 27/50 </span> </div> </header> <ul class="m-list"> <li>Web design</li> <li>Mobile Apps</li> <li>Tableau</li> <li>More...</li> </ul> </div> <!-- mycontent.html file contains the content for ajax load--> <div href="mycontent.html" style="padding:10px"> <header> <div class="ajax-list"> <span>List 2</span> <span style="float:right"> <span style="color:#e9e9e9; margin-right:5px"> Ajax Loading </span> <span class="m-badge">25</span> </span> </div> </header> </div> </div> </div></body></html> |
Output:
Please Login to comment...