EasyUI is an 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.
In this article, we will learn how to design sidemenu using jQuery EasyUI. The sidemenu is used for context vertical menus. It is the base component for building another menu component. It also can be used for both navigation and executing commands.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<div class="sidemenu"> </div>
Properties:
- width: The width of sidemenu component.
- height: The height of sidemenu component.
- border: It defines to show the border.
- animate: It defines if to show animation effect when expand or collapse menus.
- multiple: It sets true to enable expanding multiple panels at one time.
- data: The menu data to display.
- floatMenuWidth: The float menu width.
- floatMenuPosition: The float menu position.
Events:
- onSelect: Fires when a menu is selected.
Methods:
- options: Return the options of sidemenu.
- resize: Resize the sidemenu.
- collapse: Collapse the sidemenu.
- expand: Expand the sidemenu.
- destroy: Destroy the sidemenu.
CDN Link: First, add jQuery Easy UI scripts needed for your project.
<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”></script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Example:
<!doctype html> <html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<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">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
$(document).ready(function (){
$('#gfg').sidemenu({
text: "GeeksforGeeks"
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery sidemenu widget</h3>
<div id="gfg" class="easyui-sidemenu" data-options="data:data">
</div>
<script type="text/javascript">
var data = [{
text: 'Item1',
children: [{
text: 'Geeks1'
},{
text: 'Geeks2'
},{
text: 'Geeks3',
children: [{
text: 'For3.1'
},{
text: 'For3.2'
}]
}]
},{
text: 'Item2',
children: [{
text: 'Geeks4'
},{
text: 'Geeks5'
},{
text: 'Geeks6'
}]
}];
</script>
</body>
</html>
|
Output:
Reference: http://www.jeasyui.com/documentation/