angular的splitter案例学习

　　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案例学习的更多相关文章

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

随机推荐

半径无关单核单线程最快速高斯模糊实现(附完整C代码)
之前,俺也发过不少快速高斯模糊算法. 俺一般认为,只要处理一千六百万像素彩色图片,在2.2GHz的CPU上单核单线程超过1秒的算法,都是不快的. 之前发的几个算法,在俺2.2GHz的CPU上耗时都会超 ...
POJ 3481Double Queue Splay
#include<stdio.h> #include<string.h> ; ],data[N],id[N],fa[N],size,root; void Rotate(int ...
liunx中的进程与线程
1. 进程和线程进程和线程是程序运行时状态,是动态变化的,进程和线程的管理操作(比如,创建,销毁等)都是有内核来实现的. Linux中的进程于Windows相比是很轻量级的,而且不严格区分进程和线程 ...
android studio没有org.apache.http.client.HttpClient;等包问题解决方案
以前用Eclipse做Android开发工具一直使用apache的http做网络请求,最近换用了Android studio发现没有办法引用apache的包,下面是我引用的步骤
Android系列之网络（一）----使用HttpClient发送HTTP请求（通过get方法获取数据）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
Unity-WIKI 之 AllocationStats(内存分配)
组件功能 allocationstats是一个简单的辅助工具,用于显示您的应用程序分配多少内存.它采用GC.GetTotalMemory来跟踪内存使用使用方法添加 Allocmem.cs 到场景中 ...
分享一例脚本发版和tomcat重启脚本
线上有个网站业务部署在tomcat上,由于频繁上线修改,需要经常启动tomcat.tomcat服务自带的bin下没有重启脚本,下面分享一例脚本发版和tomcat重启脚本: 1)现将业务代码从svn里下 ...
kvm虚拟机日常管理和配置操作命令梳理
KVM虚拟机的管理主要是通过virsh命令对虚拟机进行管理.1)查看KVM虚拟机配置文件及运行状态KVM虚拟机默认配置文件位置: /etc/libvirt/qemu/autostart目录是配置kvm ...
css常用中文字体的英文名称写法
我们知道网页中使用中文字体最好用其对应的英文名称,这样可以避免出现编码问题导致样式中的中文名称出现乱码,从而不识别.下面是网页中常用的中文字体所对应的英文名称.留着,不用翻资料了中文英文宋体 S ...
DWM 窗体玻璃效果实现
我一直盼望着 Windows 新版本的发布.令人感兴趣的事情莫过于浏览 MSDN® 和 SDK 文档,查找一些可以利用和依赖的最新创新,然后让朋友和同事以及您的老板(如果幸运的话)大开眼界.Windo ...

angular的splitter案例学习

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

随机推荐

热门专题