当前位置: 首页 > 工具软件 > angular-split > 使用案例 >

angular的splitter案例学习

赫连永怡
2023-12-01

  angular的splitter案例学习,都有注释了,作为自己的备忘。

<!DOCTYPE html>
<html ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>Angular pane splitter example</title>
  <link type="text/css" rel="stylesheet" href="split.css" />
</head>
<body>
  <!--
    //主要流程是根据dom的包裹节点从外部到内部
      //先是界面的渲染是先把指令转换成template, 然后为每一个指令定义controller控制器, 然后进行link;
  -->
    <bg-splitter orientation="horizontal">
        <bg-pane min-size="100">Pane 1</bg-pane>
        <bg-pane min-size="150">
            <bg-splitter orientation="vertical">
                <bg-pane min-size="50">Pane 2</bg-pane>
                <bg-pane min-size="50">Pane 3</bg-pane>
            </bg-splitter>
        </bg-pane>
    </bg-splitter>
  <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
    <script>
  //依赖模块;
    angular.module("APP",["bgDirectives"])
    </script>
</body>
<script>
//新建模块;
angular.module('bgDirectives', [])
  .directive('bgSplitter', function() {
    return {
      //使用 标签(tag)的方式
      restrict: 'E',
      //替换节点
      replace: true,
      //替换内容
      transclude: true,
      //独立作用域, 并引用属性
      scope: {
        orientation: '@'
      },
                //包裹的节点;
      template: '<div class="split-panes {{orientation}}" ng-transclude></div>',
      controller: function ($scope) {
        $scope.panes = [];
        
        this.addPane = function(pane){
          if ($scope.panes.length > 1) 
            throw 'splitters can only have two panes';
          $scope.panes.push(pane);
          return $scope.panes.length;
        };
      },
      link: function(scope, element, attrs) {
        //因为这个组件没有进行双向绑定, 链接阶段就对dom进行更改, 也都没什么事情;

                      //把分隔线添加进来;
        var handler = angular.element('<div class="split-handler"></div>');
        var pane1 = scope.panes[0];
        var pane2 = scope.panes[1];
        var vertical = scope.orientation == 'vertical';
        var pane1Min = pane1.minSize || 0;
        var pane2Min = pane2.minSize || 0;
        var drag = false;
        
        pane1.elem.after(handler);
        
        //为这个元素添加事件(不给document添加事件吗?);
        element.bind('mousemove', function (ev) {
          if (!drag) return;
          
          var bounds = element[0].getBoundingClientRect();
          var pos = 0;
          
          //垂直方向
          if (vertical) {
            //这个包裹元素的高度;
            var height = bounds.bottom - bounds.top;

            //pos是这个事件的;
            pos = ev.clientY - bounds.top;


            if (pos < pane1Min) return;
            if (height - pos < pane2Min) return;

            //这种设置高度的方式不常用啊, 但是的确是最方便的方式;
            handler.css('top', pos + 'px');
            pane1.elem.css('height', pos + 'px');
            pane2.elem.css('top', pos + 'px');
      
          } else {
            //左右移动, 水平方向;
            var width = bounds.right - bounds.left;
            pos = ev.clientX - bounds.left;

            if (pos < pane1Min) return;
            if (width - pos < pane2Min) return;

            //
            handler.css('left', pos + 'px');
            pane1.elem.css('width', pos + 'px');
            pane2.elem.css('left', pos + 'px');
          }
        });
        
        //为分割线添加事件;
        handler.bind('mousedown', function (ev) { 
          ev.preventDefault();
          //添加了拖拽的标志;
          drag = true; 
        });
    
        angular.element(document).bind('mouseup', function (ev) {
          //删除拖拽的标志;
          drag = false;
        });
      }
    };
  })
  /*
    就是说指令的顺序是外部包裹节点到内部子节点;
    //
  */
  .directive('bgPane', function () {
    return {
      restrict: 'E',
      //依赖bgSplitter这个controller;
      require: '^bgSplitter',
      replace: true,
      transclude: true,
      scope: {
        minSize: '='
      },
      //主要流程是根据dom的包裹节点从外部到内部
        //先是界面的渲染是先把指令转换成template, 然后为每一个指令定义controller控制器, 然后进行link;
      template: '<div class="split-pane{{index}}" ng-transclude></div>',
      link: function(scope, element, attrs, bgSplitterCtrl) {
        scope.elem = element;
        scope.index = bgSplitterCtrl.addPane(scope);
      }
    };
  });
</script>
<style>


.split-panes
{
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
position: absolute;
}

 
  

.split-panes > .split-handler
{
background: transparent;
position: absolute;
z-index: 999;
}

 
  

/* Horizontal */

 
  

.split-panes.horizontal > .split-handler
{
width: 4px;
top: 0px;
left: 50%;
bottom: 0px;
cursor: ew-resize;
}

 
  

.split-panes.horizontal > .split-pane1,
.split-panes.horizontal > .split-pane2
{
position: absolute;
height: 100%;
}

 
  

.split-panes.horizontal > .split-pane1
{
width: 50%;
}

 
  

.split-panes.horizontal > .split-pane2
{
left: 50%;
right: 0px;
border-left: 1px solid #aaa;
}

 
  


/* Vertical */

 
  

.split-panes.vertical > .split-handler
{
height: 4px;
top: 50%;
left: 0px;
right: 0px;
cursor: ns-resize;
}

 
  

.split-panes.vertical > .split-pane1,
.split-panes.vertical > .split-pane2
{
position: absolute;
width: 100%;
}

 
  

.split-panes.vertical > .split-pane1
{
height: 50%;
}

 
  

.split-panes.vertical > .split-pane2
{
top: 50%;
bottom: 0px;
border-top: 1px solid #aaa;
}


</style>
</html>

 

转载于:https://www.cnblogs.com/diligenceday/p/4171228.html

 类似资料: