2017-04-26 73 views
1

甘特图中的角度如何添加上下文菜单,任务像下面的图片I want menu like this in my every task如何添加上下文菜单中的甘特图

我现在的任务就是这样

current screen

而且我已经在HTML中包括的JavaScript答css文件像下面

<link rel="stylesheet" href="bower_components/angular-gantt/dist/angular-gantt.min.css"/> 
<link rel="stylesheet" href="bower_components/angular-gantt/dist/angular-gantt-plugins.min.css"/> 
<script src="bower_components/angular-gantt/dist/angular-gantt.min.js"></script> 
<script src="bower_components/angular-gantt/dist/angular-gantt-plugins.min.js"></script> 

代码: HTML:

<div gantt data="data" api="registerApi"> 
     <gantt-table enabled="true" headers="columnsHeaders"> 

     </gantt-table> 
     <gantt-groups></gantt-groups> 
     <gantt-tooltips></gantt-tooltips> 
     <gantt-bounds></gantt-bounds> 
     <gantt-progress></gantt-progress> 
     <gantt-sortable></gantt-sortable> 
     <gantt-movable ></gantt-movable> 
      <gantt-draw-task ></gantt-draw-task> 
     <gantt-resize-sensor ></gantt-resize-sensor> 
     <gantt-overlap></gantt-overlap> 


    </div> 
</div> 

控制器:

app.controller('historyController',function($scope,$http){ 
$scope.registerApi = function(api) { 
    api.core.on.ready($scope, function() { 
     api.tasks.on.resizeEnd($scope, function(data) { 
      console.log(data.model.name); 
      console.log(data.model.from); 
      console.log(data.model.to); 
     }); 
    }); 
    api.directives.on.new($scope, function(dName, dScope, dElement, dAttrs, dController) { 
     console.log(dName) 
     console.log(dScope); 
     console.log(dElement); 
     console.log(dAttrs); 
     console.log(dController); 
    }); 
} 
$scope.scale="day"; 
$scope.data = [{name: 'Milestones', height: '3em', sortable: false, classes: 'gantt-row-milestone', color: '#45607D', tasks: [ 
        // Dates can be specified as string, timestamp or javascript date object. The data attribute can be used to attach a custom object 
        {name: 'Kickoff', color: '#93C47D', from: '2013-10-07T09:00:00', to: '2013-10-07T10:00:00', data: 'Can contain any custom data or object'}, 
        {name: 'Concept approval', color: '#93C47D', from: new Date(2013, 9, 18, 18, 0, 0), to: new Date(2013, 9, 18, 18, 0, 0), est: new Date(2013, 9, 16, 7, 0, 0), lct: new Date(2013, 9, 19, 0, 0, 0)}, 
        {name: 'Development finished', color: '#93C47D', from: new Date(2013, 10, 15, 18, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)}, 
        {name: 'Shop is running', color: '#93C47D', from: new Date(2013, 10, 22, 12, 0, 0), to: new Date(2013, 10, 22, 12, 0, 0)}, 
        {name: 'Go-live', color: '#93C47D', from: new Date(2013, 10, 29, 16, 0, 0), to: new Date(2013, 10, 29, 16, 0, 0)} 
       ], data: 'Can contain any custom data or object'}, 
       {name: 'Status meetings', tasks: [ 
        {name: 'Demo #1', color: '#9FC5F8', from: new Date(2013, 9, 25, 15, 0, 0), to: new Date(2013, 9, 25, 18, 30, 0)}, 
        {name: 'Demo #2', color: '#9FC5F8', from: new Date(2013, 10, 1, 15, 0, 0), to: new Date(2013, 10, 1, 18, 0, 0)}, 
        {name: 'Demo #3', color: '#9FC5F8', from: new Date(2013, 10, 8, 15, 0, 0), to: new Date(2013, 10, 8, 18, 0, 0)}, 
        {name: 'Demo #4', color: '#9FC5F8', from: new Date(2013, 10, 15, 15, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)}, 
        {name: 'Demo #5', color: '#9FC5F8', from: new Date(2013, 10, 24, 9, 0, 0), to: new Date(2013, 10, 24, 10, 0, 0)} 
       ]] 

我新的角度。

+0

你试图请提供代码。 –

+0

谁在这里投票?不要像Facebook那样投票赞成,只要一个女孩发布任何类型的帖子,直到问题不够详细。 :P –

+0

哈哈@RameshRajendran:D –

回答

0
<div class="dashboard-file-folder-items" style="height:50px; width:50px; background:red;">Right Click</div> 

一旦我做到了使用JQueryi我的项目希望这将有助于你

<script>  
    $(document).bind("click", function (event) { 
          if ($(event.target).closest('.dashboard-file-folder-items').length > 0) { 
           return true; 
          } else { 
           $("div.custom-menu").hide(); 
           $(".dropdown-menu").slideUp(); 

           $(".dashboard-file-folder-items").css("border-color", ""); 
           $(".dashboard-file-folder-items div").css({"background-color": "", "color": ""}); 

           $(".folder-action-menu").addClass("menudisabled"); 
           $(".folder-action-menu").removeAttr("data-toggle"); 
          } 
         }); 
         $(".dashboard-file-folder-items").bind("contextmenu", function (event) { 
          event.preventDefault(); 
          $("div.custom-menu").hide(); 
          $(".dropdown-menu").slideUp(); 
          var html = ' <ul class="dropdown-menu" style="display:block;">'; 
          html += '<li>'; 
          html += '<a href="#"><i class="icon icon-lg icon-share menu-icon"></i> Share</a>'; 
          html += '</li>'; 
          html += ' <li>'; 
          html += ' <a href="#"><i class="icon icon-lg icon-link menu-icon"></i> Copy Link</a>'; 
          html += ' </li>'; 
          html += ' <li>'; 
          html += '  <a href="#"><i class="icon icon-lg icon-folder-o menu-icon"></i> Move to</a>'; 
          html += ' </li>'; 
          html += ' <li>'; 
          html += ' <a href="#"><i class="icon icon-lg icon-star-o menu-icon"></i> Favorite</a>'; 
          html += ' </li>'; 
          html += ' <li>'; 
          html += ' <a href="#"><i class="icon icon-lg icon-pencil menu-icon"></i> Rename</a>'; 
          html += ' </li>'; 
          html += ' <li>'; 
          html += '  <a href="#"><i class="icon icon-lg icon-file-o menu-icon"></i> Make a copy</a>'; 
          html += ' </li>'; 
          html += ' <li>'; 
          html += ' <a href="#"><i class="icon icon-lg icon-download menu-icon"></i> Downlaod</a>'; 
          html += ' </li>'; 
          html += ' <li role="separator" class="divider"></li>'; 
          html += ' <li>'; 
          html += '  <a href="#"><i class="icon icon-lg icon-trash menu-icon menu-icon-remove"></i> Remove</a>'; 
          html += ' </li>'; 
          html += ' </ul> '; 
          $("<div class='custom-menu'>" + html + "</div>") 
            .appendTo("body") 
            .css({top: event.pageY + "px", left: event.pageX + "px"}); 
          $(".dashboard-file-folder-items").css("border-color", ""); 
          $(".dashboard-file-folder-items div").css({"background-color": "", "color": ""}); 
          $(this).css("border-color", "#ff2828"); 
          $(this).children("div").css({"background-color": "#ff2828", "color": "white"}); 
          $(".folder-action-menu").removeClass("menudisabled"); 
          $(".folder-action-menu").attr("data-toggle", "dropdown"); 

         }); 
    </script> 
+0

请检查我的更新信息 –

相关问题