jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
97 lines (95 loc) • 4.97 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<meta name="keywords" content="AngularJS Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
<meta name="description" content="AngularJS Menu example. This example demonstrates a Menu with Images." />
<title id='Description'>In this demo is illustrated how to add images to the AngularJS Menu items.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/angular.min.js"></script>
<script type="text/javascript" src="../../../scripts/jquery-1.11.1.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/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
});
</script>
</head>
<body ng-controller="demoController">
<jqx-menu jqx-width="'150px'" jqx-height="'220px'" jqx-mode="'vertical'">
<ul>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/mailIcon.png' /><span>Mail</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/calendarIcon.png' /><span>Calendar</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/contactsIcon.png' /><span>Contacts</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>
<span>Inbox</span></span>
<ul>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>jqwidgets</span>
<ul>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Admin</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Corporate</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Finance</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Other</span>
</li>
</ul>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Personal</span>
</li>
</ul>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/recycle.png' />
<span>Deleted Items</span>
<ul>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Today</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Last
Week</span> </li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/folder.png' /><span>Last
Month</span> </li>
</ul>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/settings.png' /><span>Settings</span>
<ul style="width: 230px;">
<li>
Enable Auto-Save</li>
<li>
Send email as anonymous</li>
<li>
Save sent emails</li>
</ul>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/notesIcon.png' /><span>Notes</span>
</li>
<li>
<img style='float: left; margin-right: 5px;' src='../../../images/favorites.png' /><span>Favorites</span>
</li>
</ul>
</jqx-menu>
</body>
</html>