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>