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. C语言使用宏实现２个变量的交换
			
    记录哪个方法更普适,更高效,这些方法不包括使用函数的方法,如果使用函数的话,使用指针的方法更合适. 使用中间变量 形如 int tmp, tmp = a; a=b; b = tmp; #define  ...
    
			
    2. 
						
  2. [转]WCDMA系统结构及关键技术
			
    本文转自:http://blog.csdn.net/lele52141/article/details/8498951 WCDMA系统结构: CN指核心网,UTRAN接入网,UE用户设备. UTRAN ...
    
			
    3. 
						
  3. 矩阵乘法快速幂  codevs 1574 广义斐波那契数列
			
    codevs 1574 广义斐波那契数列  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond   题目描述 Description 广义的斐波那契数列是指形如 ...
    
			
    4. 
						
  4. 边工作边刷题：70天一遍leetcode: day 73
			
    Read N Characters Given Read4 I/II 要点:这题的要点就是搞清楚几个变量的内在逻辑:只有buffer是整4 bytes的.而client要读的bytes(需求)和实际上 ...
    
			
    5. 
						
  5. 内网穿透利器 Ngrok 使用教程
			
    ngrok 服务可以分配给你一个域名让你本地的web项目提供给外网访问,特别适合向别人展示你本机的web demo 以及调试一些远程的API (比如微信公众号,企业号的开发) 下面开始教程 Step  ...
    
			
    6. 
						
  6. 如何在HTML不同的页面中，共用头部与尾部？
			
    一.asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,& ...
    
			
    7. 
						
  7. Update和LateUpdate的区别
			
    LateUpdate晚于所有Update执行 在圣典里LateUpdate被解释成一句话:LateUpdate是在所有Update函数调用后被调用.这可用于调整脚本执行顺序. 当物体在Update里移 ...
    
			
    8. 
						
  8. 关于eclipse入门开发c/c++文章推荐
			
    1. 关于编译说明. http://www.ibm.com/developerworks/cn/linux/opensource/os-ecc/ 2. 关于快捷键与代码阅读 http://www.cn ...
    
			
    9. 
						
  9. 对比git rm和rm的使用区别
			
    在这里说一下git rm和rm的区别,虽然觉得这个问题有点肤浅,但对于刚接触git不久的朋友来说还是有必要的. 用 git rm 来删除文件,同时还会将这个删除操作记录下来:用 rm 来删除文件,仅仅 ...
    
			
    10. 
						
  10. RDLC系列之五 初试XAML
			
    本章只讲解xaml部分,其余都和winform下一样 1.xaml代码 <Window x:Class="RDLC.WPF.MainWindow" xmlns="h ...
    
			
    11.