与Angularjs可调整大小的列 [英] Resizable columns with Angularjs
问题描述
我有两个栏，我想是可调整大小（即一个得到更广泛的其他变窄），但我真的不知道如何去做。我已经安装此琴： http://jsfiddle.net/4kyoyazq/
我目前所面对的三列，其中一个名为处理之上，它位于（z索引）其他。
//左山坳
＃内容{
位置：绝对的;
左：0;
右：250像素;
底部：30PX;
顶部：50像素;
背景：红色;
Z-指数：0;
溢出-Y：滚动;
}//正确的山坳
#menu {
位置：绝对的;
右：0;
顶部：50像素;
宽度：250像素;
底部：30PX;
背景：#yellow;
}#handle {
位置：绝对的;
右：250像素;
顶部：50像素;
宽度：10px的;
底部：30PX;
背景：蓝色;
光标：COL-调整;
的z-index：5;
}
我的指令是对小提琴的那一刻空 - ？我怎么可以针对两栏的div的指令，这样，如果我拖动手柄的div我可以改变两列的宽度
VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（拖拽功能（）{
返回{
限制：'A'，
链接：功能（范围，元素，ATTRS）{
element.on（'点击'，功能（）{
//这里做什么
}）;
}
};
}）;
这可能是不正是你所寻找的。但是，在我的应用程序它的工作原理pretty很好。
该指令是这个jQuery插件的包装： colResizeable
它通过使用表布局而不是div的。
有角的指令是：
myApp.directive（'colResizeable'，函数（）{
返回{
限制：'A'，
链接：功能（范围，ELEM）{
的setTimeout（函数（）{
elem.colResizable（{
liveDrag：真实，
gripInnerHtml：＆LT; DIV CLASS ='握'＆GT;＆LT; / DIV＆gt;中，
draggingClass：拖
ondrag当：功能（）{
//触发resize事件，所以宽度依赖的东西将被更新
$（窗口）.trigger（'调整'）;
}
}）;
}）;
}
};
和HTML的部分是：
＆LT;身体GT;
＆LT;表样式=宽度：100％;高度：300像素COL-调整大小＆GT;
＆所述; TR＆GT;
＆LT; TD风格=背景：红色＆gt;内容＆LT; / TD＆GT;
＆LT; TD风格=背景：蓝色;宽度：100像素＆GT;菜单＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
看一看的CSS也。 （在此示例中，随机产生的抓握/手柄图标）
一个工作plunker是这里
I have two columns that I would like to be resizable (whereby one gets wider the other becomes narrower) but I'm not really sure how to go about it. I have setup this fiddle: http://jsfiddle.net/4kyoyazq/
I have three columns at the moment, with one called "handle" that sits above (z-index) the others.
//left col
#content {
position:absolute;
left:0;
right:250px;
bottom:30px;
top:50px;
background:red;
z-index:0;
overflow-y:scroll;
}
//right col
#menu {
position:absolute;
right:0;
top:50px;
width:250px;
bottom:30px;
background:#yellow;
}
#handle {
position:absolute;
right:250px;
top:50px;
width:10px;
bottom:30px;
background:blue;
cursor: col-resize;
z-index:5;
}
My directive is empty at the moment on the fiddle - how can I target the two column divs in the directive so that if I drag the handle div I can change the widths of the two columns?
var myApp = angular.module('myApp', []);
myApp.directive("draggable", function(){
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('click', function () {
//do something here
});
}
};
});
This might be not exactly what you are looking for. But in my app it works pretty well.
The directive is a wrapper for this jquery plugin: colResizeable
It works by using a table layout instead of divs.
The directive for angular is:
myApp.directive('colResizeable', function() {
return {
restrict: 'A',
link: function(scope, elem) {
setTimeout(function() {
elem.colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onDrag: function() {
//trigger a resize event, so width dependent stuff will be updated
$(window).trigger('resize');
}
});
});
}
};
And the html part is:
<body>
<table style="width: 100%;height:300px" col-resizeable>
<tr>
<td style="background:red">content</td>
<td style="background:blue;width:100px">menu</td>
</tr>
</table>
</body>
Have a look at the css also. (The grip/handle icon is generated randomly in this example)
A working plunker is here
这篇关于与Angularjs可调整大小的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
