PageRenderTime 21ms CodeModel.GetById 16ms 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. 

  2. <html ng-app="demoApp" lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta name="keywords" content="AngularJS Menu, Menu widget, Vertical Menu, Context Menu" />
    5. 

  5.     <meta name="description" content="AngularJS Menu example. This example demonstrates the Menu's events." /> 
    6. 

  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. 

  7.     <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    8. 

  8.     <script type="text/javascript" src="../../../scripts/angular.min.js"></script> 
    9. 

  9.     <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    10. 

  10.     <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    11. 

  11.     <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    12. 

  12.     <script type="text/javascript" src="../../../scripts/demos.js"></script>
    13. 

  13.     <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    14. 

  14. 

  15.     <script type="text/javascript">
    16. 

  16.         var demoApp = angular.module("demoApp", ["jqwidgets"]);
    17. 

  17.         demoApp.controller("demoController", function ($scope) {
    18. 

  18.             $scope.clickHandler = function (event) {
    19. 

  19.                 var args = event.args;
    20. 

  20.                 $scope.log = "Clicked: " + $(args).text();
    21. 

  21.             };
    22. 

  22.             $scope.log = "";
    23. 

  23.         });
    24. 

  24.     </script>
    25. 

  25. </head>
    26. 

  26. <body ng-controller="demoController">
    27. 

  27.     <jqx-menu jqx-width="600" jqx-height="30" jqx-on-itemclick="clickHandler($event)" style="float: left;">
    28. 

  28.         <ul>
    29. 

  29.             <li><a href="#Home">Home</a></li>
    30. 

  30.             <li><a href="#Solutions">Solutions</a>
    31. 

  31.                 <ul style='width: 250px;'>
    32. 

  32.                     <li><a href="#Education">Education</a></li>
    33. 

  33.                     <li><a href="#Financial">Financial services</a></li>
    34. 

  34.                     <li><a href="#Government">Government</a></li>
    35. 

  35.                     <li><a href="#Manufacturing">Manufacturing</a></li>
    36. 

  36.                     <li type='separator'></li>
    37. 

  37.                     <li>Software Solutions
    38. 

  38.                         <ul style='width: 220px;'>
    39. 

  39.                             <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
    40. 

  40.                             <li><a href="#Mobile">Mobile</a></li>
    41. 

  41.                             <li><a href="#RIA">Rich Internet applications</a></li>
    42. 

  42.                             <li><a href="#TechnicalCommunication">Technical communication</a></li>
    43. 

  43.                             <li><a href="#Training">Training and eLearning</a></li>
    44. 

  44.                             <li><a href="#WebConferencing">Web conferencing</a></li>
    45. 

  45.                         </ul>
    46. 

  46.                     </li>
    47. 

  47.                     <li><a href="#">All industries and solutions</a></li>
    48. 

  48.                 </ul>
    49. 

  49.             </li>
    50. 

  50.             <li><a href="#Products">Products</a>
    51. 

  51.                 <ul>
    52. 

  52.                     <li><a href="#PCProducts">PC products</a></li>
    53. 

  53.                     <li><a href="#MobileProducts">Mobile products</a></li>
    54. 

  54.                     <li><a href="#AllProducts">All products</a></li>
    55. 

  55.                 </ul>
    56. 

  56.             </li>
    57. 

  57.             <li><a href="#Support">Support</a>
    58. 

  58.                 <ul style='width: 200px;'>
    59. 

  59.                     <li><a href="#SupportHome">Support home</a></li>
    60. 

  60.                     <li><a href="#CustomerService">Customer Service</a></li>
    61. 

  61.                     <li><a href="#KB">Knowledge base</a></li>
    62. 

  62.                     <li><a href="#Books">Books</a></li>
    63. 

  63.                     <li><a href="#Training">Training and certification</a></li>
    64. 

  64.                     <li><a href="#SupportPrograms">Support programs</a></li>
    65. 

  65.                     <li><a href="#Forums">Forums</a></li>
    66. 

  66.                     <li><a href="#Documentation">Documentation</a></li>
    67. 

  67.                     <li><a href="#Updates">Updates</a></li>
    68. 

  68.                 </ul>
    69. 

  69.             </li>
    70. 

  70.             <li><a href="#Communities">Communities</a>
    71. 

  71.                 <ul style='width: 200px;'>
    72. 

  72.                     <li><a href="#Designers">Designers</a></li>
    73. 

  73.                     <li><a href="#Developers">Developers</a></li>
    74. 

  74.                     <li><a href="#Educators">Educators and students</a></li>
    75. 

  75.                     <li><a href="#Partners">Partners</a></li>
    76. 

  76.                     <li type='separator'></li>
    77. 

  77.                     <li>By resource
    78. 

  78.                         <ul>
    79. 

  79.                             <li><a href="#Labs">Labs</a></li>
    80. 

  80.                             <li><a href="#TV">TV</a></li>
    81. 

  81.                             <li><a href="#Forums">Forums</a></li>
    82. 

  82.                             <li><a href="#Exchange">Exchange</a></li>
    83. 

  83.                             <li><a href="#Blogs">Blogs</a></li>
    84. 

  84.                             <li><a href="#Experience Design">Experience Design</a></li>
    85. 

  85.                         </ul>
    86. 

  86.                     </li>
    87. 

  87.                 </ul>
    88. 

  88.             </li>
    89. 

  89.             <li><a href="#Company">Company</a>
    90. 

  90.                 <ul style='width: 180px;'>
    91. 

  91.                     <li><a href="#About">About Us</a></li>
    92. 

  92.                     <li><a href="#Press">Press</a></li>
    93. 

  93.                     <li><a href="#Investor">Investor Relations</a></li>
    94. 

  94.                     <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
    95. 

  95.                     <li><a href="#Careers">Careers</a></li>
    96. 

  96.                     <li><a href="#Showcase">Showcase</a></li>
    97. 

  97.                     <li><a href="#Events">Events</a></li>
    98. 

  98.                     <li><a href="#ContactUs">Contact Us</a></li>
    99. 

  99.                     <li><a href="#Become an affiliate">Become an affiliate</a></li>
    100. 

  100.                 </ul>
    101. 

  101.             </li>
    102. 

  102.         </ul>
    103. 

  103.     </jqx-menu>
    104. 

  104.     <div style='margin-left: 20px; float: left;'>
    105. 

  105.         <div style="font-family: 'segoe ui', arial, sans-serif;">
    106. 

  106.             {{log}}
    107. 

  107.         </div>
    108. 

  108.     </div>
    109. 

  109. </body>
    110. 

  110. </html>
    111. 

  111.