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>


												


											
angular的splitter案例学习的更多相关文章
	

    
								
  1. Storm入门2-单词计数案例学习
		
     [本篇文章主要是通过一个单词计数的案例学习,来加深对storm的基本概念的理解以及基本的开发流程和如何提交并运行一个拓扑] 单词计数拓扑WordCountTopology实现的基本功能就是不停地读入 ...
    
		
    2. 
						
  2. 8.3 ContosoMVCWeb官方案例学习
		
    1. 分页案例学习 2. 排序搜索案例学习 3.使用Configuration.cs中的Seed方法 在数据库迁移过程中,使用update-database,会运行seed方法.seed方法能够将初始 ...
    
		
    3. 
						
  3. 通过 Autostereograms 案例学习 OpenGL 和 OpenCL 的互操作性
		
    引言 在过去的十年里, GPU (图形处理单元)已经从特殊硬件(特供)转变成能够在数值计算领域开辟新篇章的高性能计算机设备. 很多算法能够使用拥有巨大的处理能力的GPU来快速运行和处理大数据量.即使在 ...
    
		
    4. 
						
  4. GIS案例学习笔记-三维生成和可视化表达
		
    GIS案例学习笔记-三维生成和可视化表达 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:针对栅格或者矢量数值型数据,进行三维可视化表达 操作时间:15分钟 案 ...
    
		
    5. 
						
  5. 获取字段唯一值工具- -ArcPy和Python案例学习笔记
		
    获取字段唯一值工具- -ArcPy和Python案例学习笔记   目的:获取某一字段的唯一值,可以作为工具使用,也可以作为函数调用 联系方式:谢老师,135-4855-4328,xiexiaokui# ...
    
		
    6. 
						
  6. 面图层拓扑检查和错误自动修改—ArcGIS案例学习笔记
		
    面图层拓扑检查和错误自动修改-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据源: gis_ex10\ex01\parcel.shp, ...
    
		
    7. 
						
  7. 计算平面面积和斜面面积-ArcGIS案例学习笔记
		
    计算平面面积和斜面面积-ArcGIS案例学习笔记 联系方式:谢老师,135_4855_4328,xiexiaokui#139.com 数据:实验数据\Chp8\Ex5\demTif.tif 平面面积= ...
    
		
    8. 
						
  8. ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画
		
    ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画 计划时间:第二天下午 教程:Pdf/405 数据:ch9/ex3 方法: 1. 创建DEM SA工具箱/插值分析/地形转栅格 2. 生成 ...
    
		
    9. 
						
  9. ArcGIS案例学习笔记2_2_txtexcel空间可视化和空间插值
		
    ArcGIS案例学习笔记2_2_txt/excel空间可视化和空间插值 计划时间:第二天下午 教程:pdf page=337 数据:chapter8/ex4 方法: 1.加载xy.txt和gdp.tx ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JasperReports教程：Report Data Sources
			
    原文地址:http://www.tutorialspoint.com/jasper_reports/jasper_report_data_sources.htm Datasources是一个结构化的数 ...
    
			
    2. 
						
  2. matlab ASCII 格式导入
			
    matlab ASCII 格式导入 可以用fprintf函数,来代替save函数啊比如现在我有一个变量a=[0.1223 345.4544]如果我想保存它的话,可以用下面的程序:fid = fopen ...
    
			
    3. 
						
  3. [转]ASP.NET 2.0中GridView无限层复杂表头的实现
			
    本文转自:http://blog.csdn.net/net_lover/article/details/1306211 实现方法就是给单元格填充我们想要的格式代码. C# <%@ Page La ...
    
			
    4. 
						
  4. ASP.NET网站开发中的配置文件
			
    来源:微信公众号CodeL 1.配置文件层次分类 Machine.config:  对.netframework整体的配置 web.config(framework目录下):  对所有项目所公有的应用 ...
    
			
    5. 
						
  5. 【软件使用】GitHub使用教程for VS2012
			
    一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业.Cop ...
    
			
    6. 
						
  6. 边工作边刷题：70天一遍leetcode: day 87
			
    Implement strStr() 要点:rolling hash方法的速度比较慢. 小优化:不用hash%base,而用hash-=base*最高位是一样的. rolling hash错误点: b ...
    
			
    7. 
						
  7. HDU 5017 Ellipsoid 模拟退火第一题
			
    为了补这题,特意学了下模拟退火算法,感觉算法本身不是很难,就是可能降温系数,步长等参数不好设置. 具体学习可以参见: http://www.cnblogs.com/heaad/archive/2010 ...
    
			
    8. 
						
  8. 【WIN10】基本控件
			
    先發個下載地址: http://yunpan.cn/cHuCqYzvsWFAL  访问密码 3470 說明一下.這個示例只是最簡單的演示,並不能提供太大的實用價值. 後面會介紹 Bing &  ...
    
			
    9. 
						
  9. [转]redis 五种数据类型的使用场景
			
    FROM : http://blog.csdn.net/gaogaoshan/article/details/41039581#t5 String 1.String 常用命令: 除了get.set.i ...
    
			
    10. 
						
  10. chrome设置--disable-web-security解决跨域
			
    我们可以通过使用chrome命令行启动参数来改变chrome浏览器的设置,具体的启动参数说明参考这篇介绍.https://code.google.com/p/xiaody/wiki/ChromiumC ...
    
			
    11.