文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

Menu Bar

发布于 2021-06-12 22:40:08 字数 5036 浏览 1066 评论 0 收藏 0

md-menu-bar是一个Angular指令，是一个容纳多个菜单的容器组件。菜单栏有助于创建操作系统提供的菜单效果。

例子 (Example)

以下示例显示了md-menu-bar指令的使用以及菜单栏的用法。

am_menubar.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('menubarController', menubarController);
         function menubarController ($scope, $mdDialog) {
            this.sampleAction = function(name, ev) {
               $mdDialog.show($mdDialog.alert()
                  .title(name)   
                  .textContent('Start learning "' + name + '!')
                  .ok('OK')
                  .targetEvent(ev)
               );
            };
         }                 
      </script>      
   </head>
   <body ng-app = "firstApplication"> 
      <div id = "menubarContainer" ng-controller = "menubarController as ctrl"
         layout = "row" ng-cloak>
         <md-toolbar class = "md-menu-toolbar">
            <div layout = "row">
               <div>
                  <h2 class = "md-toolbar-tools">Learn @wenjiangs</h2>
                  <md-menu-bar>
                     <md-menu>
                        <button ng-click = "$mdOpenMenu()">Tutorials</button>
                        <md-menu-content>
                           <md-menu-item>
                              <md-button ng-click = "ctrl.sampleAction('share', $event)">Share...</md-button>
                           </md-menu-item>
                           <md-menu-divider></md-menu-divider>
                           <md-menu-item>
                              <md-menu>
                                 <md-button
                                    ng-click = "$mdOpenMenu()">Learn</md-button>
                                 <md-menu-content>
                                    <md-menu-item>
                                       <md-button
                                       ng-click = "ctrl.sampleAction('HTML5', $event)">
                                       HTML5</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button
                                          ng-click = "ctrl.sampleAction('jQuery', $event)">
                                          jQuery</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button
                                          ng-click = "ctrl.sampleAction('AngularJS', $event)">
                                          AngularJS</md-button>
                                    </md-menu-item>
                                    <md-menu-item>
                                       <md-button disabled = "disabled"
                                          ng-click = "ctrl.sampleAction('AngularJS 2.0', $event)">
                                          AngularJS 2.0</md-button>
                                    </md-menu-item>
                                    <md-menu-divider></md-menu-divider>
                                    <md-menu-item>
                                       <md-button
                                          ng-click = "ctrl.sampleAction('CSS', $event)">
                                          CSS</md-button>
                                    </md-menu-item>
                                 </md-menu-content>
                              </md-menu>
                           </md-menu-item>
                        </md-menu-content>
                     </md-menu>
                  </md-menu-bar>
               </div>
            </div>
         </md-toolbar>	 		 
      </div>
   </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

Menu Bar

例子 (Example)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。