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:
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>
<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/
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!