Je démarre le Javascript depuis quelques jours, je découvre depuis hier les miracles de Prototype et Script.alicio.us : deux bijoux, de l'avis d'un débutant dans ce langage
J'ai démarré un petit script de gestion de "Widgets" pour simuler un environnement fenêtré à la Qt/GTK/wxWindow/... en Javascript. J'ai pas mal avancé, réussi à créer 2-3 Widgets intéressants dont des fenêtres déplacables et redimensionnables. J'utilise un script basé sur les 2 frameworks, pour redimensionner mes div : http://blog.craz8.com/files/resize.js.
Seulement, sous IE j'ai des petits problèmes d'affichage: lorsque je modifie la taille d'un des Widget, les autres Widgets se déplacent...
Mon code est assez simpliste, dans un évènement window#load, je crée 2 Widgets de fenêtre :
Le script qui gère les Widgets concernés est le suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 document.body.appendChild(Widgets.Window({titleBar: true, title: 'Testing window', width: 600, height: 400, statusBar: true, statusEvent: function(event, node){}, resizeable: true, minWidth: 600, minHeight: 400})); document.body.appendChild(Widgets.Window({titleBar: true, width: 600, height: 400, statusBar: true}));
Et le CSS qui va avec :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 var Widgets = { Window: function(options) { var rootNode = Builder.node('div', {'class': 'Window'}); var tmpNode = null; new Effect.Morph(rootNode, {style: { width: ((options != null && options.width != null ? options.width : 300) + 'px'), height: ((options != null && options.height != null ? options.height : 250) + 'px') }, duration: .5}); new Effect.Opacity(rootNode, {from: 0, to: 1, duration: .5}); if(options != null) { if(options.titleBar == true) { tmpNode = Widgets.TitleBar(options.title, {className: 'Window_TitleBar'}); new Draggable(rootNode, {handle: tmpNode}, rootNode); tmpNode.setStyle({cursor: 'move'}); rootNode.appendChild(tmpNode); } if(options.statusBar == true) { tmpNode = Widgets.StatusBar(null, {className: 'Window_StatusBar'}); new Draggable(rootNode, {handle: tmpNode}, rootNode); tmpNode.setStyle({cursor: 'move'}); if(options.resizeable == true) { var minWidth = (options.minWidth != null ? options.minWidth : 250); var minHeight = (options.minHeight != null ? options.minHeight : 100); new Resizeable(rootNode, { resize: function(event) { new Effect.Morph(rootNode, {style: { width: (max($(event).getWidth(), minWidth) + 'px'), height: (max($(event).getHeight(), minHeight) + 'px') }, duration: .5}); }}); } rootNode.appendChild(tmpNode); } } rootNode.appendChild(Builder.node('p', {className: 'Window_UserSpace'})); return rootNode; }, TitleBar: function(title, options) { return Builder.node('h1', {className: (options == null || options.className == null ? 'TitleBar' : options.className)}, (title == null ? Lang.i18n("jGUI::Window") : Lang.i18n(title))); }, StatusBar: function(status, options) { return Builder.node('p', {className: (options == null || options.className == null ? 'StatusBar' : options.className)}, (status == null ? Lang.i18n("Ready...") : Lang.i18n(status))); } };
Je pense que le problème vient de ma gestion des Event. Est-ce qu'une a^me charitable aurait une idée?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99 .Window { padding: 0; margin: 0; border-width: .2em; border-color: #550000; border-style: groove; background: #EFEFEF; vertical-align: top; margin: 1em; position: absolute; display: block; overflow: hidden; width: 0; height: 0; } .Window_TitleBar { margin: 0; font-size: 2em; font-weight: bold; color: #FFF; overflow: hidden; display: block; border-bottom-width: .8em; border-bottom-style: solid; border-bottom-color: #000; background: #A90000; padding: .1em; padding-left: 1em; padding-right: 1em; } .Window_UserSpace { padding: 0; margin: 0; display: block; position: relative; font-size: 1em; font-weight: bold; color: #000; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; background: #FFF; padding: 1.2em; padding-left: 1em; padding-right: 1em; } .Window_StatusBar { position: absolute; bottom: 0; width: auto; display: block; left: 0; right: 0; width: auto; padding: 0; margin: 0; height: 1em; vertical-align: bottom; font-size: 1em; border-top-width: .2em; border-top-style: groove; border-top-color: #000; background: #EFEFEF;; padding: .2em; padding-left: .3em; padding-right: .3em; }
Edit: petite démo : http://www.naivelywatching.net/demo/src/index.html
Partager