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. Mongodb--gridfs与分片实验
			
    1.放置一个大文件到gridfs,查看fs.chunks和fs.files的情况. Step1.开启一台mongod服务. ./mongod --dbpath dbs/master     登录mon ...
    
			
    2. 
						
  2. Hadoop 2.0 中的资源管理框架 - YARN(Yet Another Resource Negotiator)
			
    1. Hadoop 2.0 中的资源管理 http://dongxicheng.org/mapreduce-nextgen/hadoop-1-and-2-resource-manage/ Hadoop ...
    
			
    3. 
						
  3. ZooKeeper架构设计及其应用要点
			
    问题导读: 1.ZooKeeper的数据模型是什么 ?2.ZooKeeper应用有哪些陷阱 ?3.每个节点(ZNode)中存储的是什么?4.一个ZNode维护了一个状态结构都包含了什么?5.ZNode ...
    
			
    4. 
						
  4. 《TCP/IP 详解 卷一》读书笔记 -----第四章 ARP
			
    1.一个物理层的网络,例如以太网,可以同时被多个不同的网络层所使用.例如网络中的一些主机使用TCP/IP协议,其他主机使用其他的网络协议. 2.设备驱动软件从不关心IP数据报中的目的IP地址.这也是为 ...
    
			
    5. 
						
  5. javascript中的this应用
			
    1. this作为全局变量2. 作为对象方法的调用3. 作为构造函数调用4. apply调用 this是Javascript语言的一个关键字.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使 ...
    
			
    6. 
						
  6. [推荐]看图/图片管理软件XnViewMP
			
    软件授权:免费 (希望你可以支持开发者) 软件官网:http://www.xnview.com/en/xnviewmp/ 软件简介: XnView MP 是一款非常著名的免费看图软件XnView 的新 ...
    
			
    7. 
						
  7. 在3D Max中查看模型引用的贴图
			
    需求 假如在Max中有一个模型,想查看贴图 操作步骤 1.右上角点击 2.在弹出材质编辑器中 点击吸管 3.把吸管点击在角色模型上,然后点击M 4.点击查看图像 5.就能查看到模型使用的贴图
    
			
    8. 
						
  8. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法
			
    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...
    
			
    9. 
						
  9. VS 2013 中如何自定义代码片段
			
    1.菜单 工具->代码段管理器
    
			
    10. 
						
  10. Datagrid数据导出到excel文件的三种方法
			
    原文连接: http://www.cnblogs.com/xieduo/articles/606202.html 一.文件保存在服务器,提供下载 方法一:导出到csv文件,存放在服务器端任一路径,然后 ...
    
			
    11.