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. hdu 3987 Harry Potter and the Forbidden Forest 求割边最少的最小割
			
    view code//hdu 3987 #include <iostream> #include <cstdio> #include <algorithm> #in ...
    
			
    2. 
						
  2. puppet学习笔记（一）
			
    之前搞了一个月zabbix,基本上是能熟练使用了,不过在后来部署的时候发现这玩意在部署的时候机子少还行,机子多了手动安装手会残的.第一反应是用puppet,后来师父直接用puppet搞定了.索性自己也 ...
    
			
    3. 
						
  3. Scribefire离线编写博客的方法
			
    用Firefox下载Scribefire next插件www.scribefire.com cnblogs添加方法: URL:http://www.cnblogs.com/[你的博客名] API为ht ...
    
			
    4. 
						
  4. [转帖]迅为4412开发板最小linux系统的存储空间修改
			
    本文转自迅为论坛:http://www.topeetboard.com 最小linux系统的存储空间修改以修改成 1G 存储空间为例来修改,如果需要改成其他大小的存储空间,参照此方法修改即可. 首先连 ...
    
			
    5. 
						
  5. 二分+DP  HDU 3433 A Task Process
			
    HDU 3433 A Task Process Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...
    
			
    6. 
						
  6. 如何实现ZBrush中的Alt和Shift键的快速运用
			
    ZBrush是一个数字雕刻和绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维雕刻行业.在一个简洁的界面中,ZBrush®为当代数字艺术家提供了世界上最先进的工具.利用快捷键能使操作更快捷高效 ...
    
			
    7. 
						
  7. [转]在Eclipse中使用JUnit4进行单元测试（高级篇）
			
    通过前2篇文章,您一定对JUnit有了一个基本的了解,下面我们来探讨一下JUnit4中一些高级特性. 一.高级Fixture 上一篇文章中我们介绍了两个Fixture标注,分别是@Before和@Af ...
    
			
    8. 
						
  8. Spring 中注入 properties 中的值
			
    <bean id="ckcPlaceholderProperties" class="org.springframework.beans.factory.confi ...
    
			
    9. 
						
  9. 护眼色的RGB值
			
    网上流行护眼色的RGB值和颜色代码 在搜索引擎搜“护眼色”,就会搜出一堆关于保护眼睛的屏幕颜色文章,说的统统是一种颜色,有点像绿豆沙的颜色.方法就是在屏幕设置里, 色调:85:饱和度:123:亮度:2 ...
    
			
    10. 
						
  10. js 方法重载
			
    function fun1(arm1) { alert(arm1); } function fun2(arm1, arm2) { alert(arm1 + "_" + arm2); ...
    
			
    11.