How to design accordion using jQuery EasyUI Mobile ?
Last Updated :
06 Mar, 2022
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 >
< 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 >
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...