Ik probeer een layout te maken waarbij je 3 kolommen hebt die versleepbaar zijn. Ik ben al een heel eind op weg, mijn layout heeft echter nog wat bugs en ik weet niet waar ze vandaag komen, en dus ook niet hoe ik ze op moet lossen.
De code (gewoon plakken in een nieuw .html bestand om het te testen):
Hoe moet het werken:
De kolommen moeten versleepbaar zijn. De content mag elkaar niet overlappen, dat werkt al. Een kolom mag niet kleiner worden dan 20 pixels.
Als de menu kolom groter gemaakt wordt, moet de overview kolom kleiner worden. De detail kolom mag niet verschuiven.
Er zijn 3 kolommen, dus 2 handles om het maar even zo te noemen. De linkse is handle 1, de rechtse is handle 2.
De bugs:
1. Als je handle 1 helemaal naar rechts sleept, schuift handle 2 mee.
2. Als je handle 1 helemaal naar links sleept, schuift handle 2 opeens de andere kant uit.
3. Als je handle 1 1 pixel versleept, verspringt hij een stuk of 5 pixels.
Ik gebruik jQuery en de externe library jquery.event.drag. Als jullie een betere library weten hoor ik dat graag, maar deze heeft denk ik het voordeel dat het lightweight is en dat je zelf veel controle hebt over wat je bouwt. Alle andere input (best practices, performance optimalisaties etc.) is ook welkom.
De code (gewoon plakken in een nieuw .html bestand om het te testen):
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
cms.init();
});
var cms = {
'init': function() {
this.attachColumnDragEvents();
},
'attachColumnDragEvents': function() {
var width = {};
var updateWidth = function() {
width = {
'menu': $('#menu-column').width(),
'overview': $('#overview-column').width()
};
};
updateWidth();
var overviewStartX = 0;
$('.dragger')
.drag('init', function(event, handle) {
updateWidth();
})
.drag('start', function(event, handle) {
overviewStartX = width.overview;
})
.drag(function(event, handle) {
$('body').css('cursor', 'e-resize');
var $element = $(handle.drag);
var $column = $('#'+$element.attr('id').replace('-dragger', '-column'));
var columnName = $column.attr('id').replace('-column', '');
if ('menu' == columnName) {
var newWidth = handle.offsetX;
var newWidthOverview = overviewStartX - handle.deltaX;
if (newWidthOverview > 20) {
$('#overview-column').width(newWidthOverview);
}
updateWidth();
} else if ('overview' == columnName) {
var newWidth = handle.offsetX - width.menu;
}
if (newWidth > 20) {
$column.width(newWidth);
}
})
.drag('end', function(event, handle) {
updateWidth();
$('body').css('cursor', 'auto');
});
}
};
</script>
<style type="text/css">
html,body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { background: #eeeeee; }
.draggable { position: relative; height: 100%; float: left; z-index: 5; }
.col-menu { width: 200px; background: #d0d0d0; z-index: 1; }
.overview { width: 400px; margin-left: -10px; background: #dfdfdf; z-index: 2; }
.detail { position: relative; height: 100%; float: left; margin-left: -10px; background: #eeeeee; z-index: 3; }
.dragger { position: relative; left: -5px; width: 10px; height: 100%; float: left; cursor: e-resize; z-index: 10; }
</style>
</head>
<body>
<div id="menu-column" class="col-menu draggable">
menu
</div>
<div id="menu-dragger" class="dragger"></div>
<div id="overview-column" class="overview draggable">
overview
</div>
<div id="overview-dragger" class="dragger"></div>
<div class="detail">
detail
</div>
</body>
</html> |
Hoe moet het werken:
De kolommen moeten versleepbaar zijn. De content mag elkaar niet overlappen, dat werkt al. Een kolom mag niet kleiner worden dan 20 pixels.
Als de menu kolom groter gemaakt wordt, moet de overview kolom kleiner worden. De detail kolom mag niet verschuiven.
Er zijn 3 kolommen, dus 2 handles om het maar even zo te noemen. De linkse is handle 1, de rechtse is handle 2.
De bugs:
1. Als je handle 1 helemaal naar rechts sleept, schuift handle 2 mee.
2. Als je handle 1 helemaal naar links sleept, schuift handle 2 opeens de andere kant uit.
3. Als je handle 1 1 pixel versleept, verspringt hij een stuk of 5 pixels.
Ik gebruik jQuery en de externe library jquery.event.drag. Als jullie een betere library weten hoor ik dat graag, maar deze heeft denk ik het voordeel dat het lightweight is en dat je zelf veel controle hebt over wat je bouwt. Alle andere input (best practices, performance optimalisaties etc.) is ook welkom.
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
Dit topic is gesloten.