PageRenderTime 28ms CodeModel.GetById 24ms RepoModel.GetById 0ms app.codeStats 0ms

/web/js/components/jqwidgets/demos/angularjs-demos/angular-menu/angularjs-menu-events.htm

https://github.com/jonphipps/Metadata-Registry
HTML | 110 lines | 109 code | 1 blank | 0 comment | 0 complexity | 8a9716f24b957d8e9f61ba4812041d37 MD5 | raw file
Possible License(s): AGPL-3.0, LGPL-2.1, Apache-2.0, MIT, BSD-3-Clause, MPL-2.0-no-copyleft-exception
  1. <!DOCTYPE html>
  2. <html ng-app="demoApp" lang="en">
  3. <head>
  4. <meta name="keywords" content="AngularJS Menu, Menu widget, Vertical Menu, Context Menu" />
  5. <meta name="description" content="AngularJS Menu example. This example demonstrates the Menu's events." />
  6. <title id='Description'>The Angular Menu provides several built-in events triggered when the menu is initialized and when the user clicks an item.</title>
  7. <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
  8. <script type="text/javascript" src="../../../scripts/angular.min.js"></script>
  9. <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
  10. <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
  11. <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
  12. <script type="text/javascript" src="../../../scripts/demos.js"></script>
  13. <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
  14. <script type="text/javascript">
  15. var demoApp = angular.module("demoApp", ["jqwidgets"]);
  16. demoApp.controller("demoController", function ($scope) {
  17. $scope.clickHandler = function (event) {
  18. var args = event.args;
  19. $scope.log = "Clicked: " + $(args).text();
  20. };
  21. $scope.log = "";
  22. });
  23. </script>
  24. </head>
  25. <body ng-controller="demoController">
  26. <jqx-menu jqx-width="600" jqx-height="30" jqx-on-itemclick="clickHandler($event)" style="float: left;">
  27. <ul>
  28. <li><a href="#Home">Home</a></li>
  29. <li><a href="#Solutions">Solutions</a>
  30. <ul style='width: 250px;'>
  31. <li><a href="#Education">Education</a></li>
  32. <li><a href="#Financial">Financial services</a></li>
  33. <li><a href="#Government">Government</a></li>
  34. <li><a href="#Manufacturing">Manufacturing</a></li>
  35. <li type='separator'></li>
  36. <li>Software Solutions
  37. <ul style='width: 220px;'>
  38. <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
  39. <li><a href="#Mobile">Mobile</a></li>
  40. <li><a href="#RIA">Rich Internet applications</a></li>
  41. <li><a href="#TechnicalCommunication">Technical communication</a></li>
  42. <li><a href="#Training">Training and eLearning</a></li>
  43. <li><a href="#WebConferencing">Web conferencing</a></li>
  44. </ul>
  45. </li>
  46. <li><a href="#">All industries and solutions</a></li>
  47. </ul>
  48. </li>
  49. <li><a href="#Products">Products</a>
  50. <ul>
  51. <li><a href="#PCProducts">PC products</a></li>
  52. <li><a href="#MobileProducts">Mobile products</a></li>
  53. <li><a href="#AllProducts">All products</a></li>
  54. </ul>
  55. </li>
  56. <li><a href="#Support">Support</a>
  57. <ul style='width: 200px;'>
  58. <li><a href="#SupportHome">Support home</a></li>
  59. <li><a href="#CustomerService">Customer Service</a></li>
  60. <li><a href="#KB">Knowledge base</a></li>
  61. <li><a href="#Books">Books</a></li>
  62. <li><a href="#Training">Training and certification</a></li>
  63. <li><a href="#SupportPrograms">Support programs</a></li>
  64. <li><a href="#Forums">Forums</a></li>
  65. <li><a href="#Documentation">Documentation</a></li>
  66. <li><a href="#Updates">Updates</a></li>
  67. </ul>
  68. </li>
  69. <li><a href="#Communities">Communities</a>
  70. <ul style='width: 200px;'>
  71. <li><a href="#Designers">Designers</a></li>
  72. <li><a href="#Developers">Developers</a></li>
  73. <li><a href="#Educators">Educators and students</a></li>
  74. <li><a href="#Partners">Partners</a></li>
  75. <li type='separator'></li>
  76. <li>By resource
  77. <ul>
  78. <li><a href="#Labs">Labs</a></li>
  79. <li><a href="#TV">TV</a></li>
  80. <li><a href="#Forums">Forums</a></li>
  81. <li><a href="#Exchange">Exchange</a></li>
  82. <li><a href="#Blogs">Blogs</a></li>
  83. <li><a href="#Experience Design">Experience Design</a></li>
  84. </ul>
  85. </li>
  86. </ul>
  87. </li>
  88. <li><a href="#Company">Company</a>
  89. <ul style='width: 180px;'>
  90. <li><a href="#About">About Us</a></li>
  91. <li><a href="#Press">Press</a></li>
  92. <li><a href="#Investor">Investor Relations</a></li>
  93. <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
  94. <li><a href="#Careers">Careers</a></li>
  95. <li><a href="#Showcase">Showcase</a></li>
  96. <li><a href="#Events">Events</a></li>
  97. <li><a href="#ContactUs">Contact Us</a></li>
  98. <li><a href="#Become an affiliate">Become an affiliate</a></li>
  99. </ul>
  100. </li>
  101. </ul>
  102. </jqx-menu>
  103. <div style='margin-left: 20px; float: left;'>
  104. <div style="font-family: 'segoe ui', arial, sans-serif;">
  105. {{log}}
  106. </div>
  107. </div>
  108. </body>
  109. </html>