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. matlab中subplot函数的功能
			
    转载自http://wenku.baidu.com/link?url=UkbSbQd3cxpT7sFrDw7_BO8zJDCUvPKrmsrbITk-7n7fP8g0Vhvq3QTC0DrwwrXfa ...
    
			
    2. 
						
  2. pyhon之Tkinter实例化学习
			
    Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口,位Python的内置模块,直接import tkinter即可使用. 作为实践, 用Tkinter ...
    
			
    3. 
						
  3. git的使用（二）
			
    1.几个概念 (1)工作区指当前编辑代码的地方,是.git仓库所在的文件夹. (2)暂存区是一个概念,并不存在这个区. (3)仓库是.git文件夹,是运行git init命令时自动创建的,默认是隐藏的 ...
    
			
    4. 
						
  4. 【ASP.NET 进阶】根据IP地址进行百度地图定位
			
    昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息 的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...
    
			
    5. 
						
  5. UVA 12380 Glimmr in Distress --DFS
			
    题意:给你一串数字序列,只包含0,1,2,一路扫描过去,遇到2则新开一个2x2的矩阵,然后如果扫到0或1就将其填入矩阵,注意不能四个方格全是0或者全是1,那样跟一个方格没区别,所以21111这种是不可 ...
    
			
    6. 
						
  6. Spring 一二事（4） - 单例
			
    spring bean配置后再默认情况下是单例的,如果需要配置可以选择 prototype, request, session和global session 在配置spring mvc的action时 ...
    
			
    7. 
						
  7. Android学习----自适应国际化语言
			
    [前言] 自适应的知识与编程无关,关键在于配置文件的修改.自适应的内容包括:语言.屏幕.平台.今天就来说一下如何自适应国际化言. internationalization (国际化)简称:i18n,因 ...
    
			
    8. 
						
  8. NGUI国际化 多语言
			
    相关组件 NGUI的本地化操作相关的组件 Localization UILocalize Language Selection 主要部分 在需要本地化的UILabel上绑定UILocalize,填写K ...
    
			
    9. 
						
  9. finder怎么才能找到library
			
    右键Finder——前往目录 输入~/Library
    
			
    10. 
						
  10. 观察器observes与对象初始化
			
    Demo.Person2 = Ember.Object.extend({ init: function() { alert('lljsd'); this.set('salutation', " ...
    
			
    11.