jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
54 lines (50 loc) • 3.62 kB
HTML
<html lang="en">
<head>
<title id='Description'>Load menu from Local Data</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxMenu
var source = [
{ html: "<img src='../../../images/mailIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Mail</span>", items: [
{ html: "<img src='../../../images/calendarIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Calendar</span>" },
{ html: "<img src='../../../images/contactsIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Contacts</span>" }
]
},
{ html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Inbox</span>", items: [
{ html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Admin</span>" },
{ html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Corporate</span>" },
{ html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Finance</span>" },
{ html: "<img src='../../../images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Other</span>"}]
},
{ html: "<img src='../../../images/recycle.png'/><span style='position: relative; left: 3px; top: -2px;'>Deleted Items</span>" },
{ html: "<img src='../../../images/notesIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Notes</span>" },
{ html: "<img src='../../../images/settings.png'/><span style='position: relative; left: 3px; top: -2px;'>Settings</span>" },
{ html: "<img src='../../../images/favorites.png'/><span style='position: relative; left: 3px; top: -2px;'>Favorites</span>" }
];
// create jqxMenu
$("#jqxMenu").jqxMenu({ source: source, width: '180px', height: '180px', mode: 'vertical'});
$("#jqxMenu").css('visibility', 'visible');
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id='jqxMenu' style='visibility: hidden; float: left;'>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>