1

私はanglejsでoffice-ui-fabricを使いたいので、ng-office-ui-fabricを使用しようとしています。アイコン(ng-office-ui-fabric)をホバーするとメニューが自動的に開きます

コマンドバーを作成するには、this exampleが見つかりました。ただし、ドロップダウンボタン(たとえば、14th)に関する問題があります。 14thまたはそのアイコンをクリックすると、メニューは開かれません。それは普通ですか?

また、私が達成したいのは、実際には:アイコンをホバーすると、メニューが開きます。

誰でもこれを行う方法を知っていますか?

PS:JSBin14thをクリックしてもメニューは表示されません(Chrome、mac)。

+0

あなたはこの – Vivz

答えて

0

ホバーで次のことを行うことができます。

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body ng-app=""> 
 

 
<div ng-mouseleave="val = false" ng-mouseover="val = true" ng-init="val=false">Mouse over me!</div> 
 
<span ng-show="val"> This is being displayed on mouseover</span> 
 

 

 
</body> 
 
</html>

UPDATE

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" /> 
 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script> 
 
</head> 
 
<body ng-app="YourApp"> 
 
    <div ng-controller="YourController"> 
 

 
      
 
     
 
    <a href ng-click="toggleMenu()">14</a> 
 
     <uif-contextual-menu uif-is-open="dynamic.opened"> 
 
     <uif-contextual-menu-item uif-text="'New'"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-text="'Edit'"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-text="'Delete'"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-type="divider"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-text="'Settings'"></uif-contextual-menu-item> 
 
     </uif-contextual-menu> 
 

 
    </div> 
 
    
 
    <script type="text/javascript"> 
 
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components']) 
 
    .controller('YourController', function ($scope) {  $scope.isOpen = true; 
 
     $scope.dynamic = {}; 
 
     $scope.dynamic.opened = false; 
 
     $scope.toggleMenu = function() { 
 
     $scope.dynamic.opened = !$scope.dynamic.opened; 
 
     };}); 
 
    </script> 
 
    
 
</body> 
 
</html>

+0

ありがとうございます...しかし、これを 'uif-contextual-menu'にどうやって適用できますか?私はクリックしても表示できません... [JSBin](https://jsbin.com/pegaremuce/1/edit?html,output) – SoftTimur

+0

あなたが達成しようとしている方法について、プランナーを作成したり、コードスニペットを表示できますかこの? – Vivz

+0

上記のJSBinでは、メニューを表示することさえできません... – SoftTimur

2

あなたはホバー効果のためにon-mouseover='over()'を使うことができます。また、over()メソッドも書いてください。 14回目の開封について - わかりませんが、私のために働きます(google chrome win10)

+0

がどのように私は( '経由で書くことができます達成するためにNG-mouseoverイベントを使用することができます)'ましたメニューを開きますか?また、 'ng-click =" openMenu() "'に 'openMenu()'を書きましたか? – SoftTimur

+0

angulerjsまたはangular 2を使用していますか? – Svidlak

+0

私はangle 1.5.7 – SoftTimur

関連する問題