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 :

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}));
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
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))); 
    }
};
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
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;
}
Je pense que le problème vient de ma gestion des Event. Est-ce qu'une a^me charitable aurait une idée?

Edit: petite démo : http://www.naivelywatching.net/demo/src/index.html