commit 2cc991a4757836cc65bef632b46ba3c65a3e990a
parent bb5cd3beca6796103a8b7d5add4f06457e122806
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Sun, 9 May 2010 17:20:49 +0000
redimensionnement & déplacement : OK
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@36 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
4 files changed, 71 insertions(+), 161 deletions(-)
diff --git a/jside2/extensions-jQuery.js b/jside2/extensions-jQuery.js
@@ -22,6 +22,18 @@ String.prototype.appendTo = function() {
// Extensions de jQuery
jQuery.fn.extend({
+ remap: function(fn) {
+ var a = $.makeArray(arguments);
+ a.shift();
+
+ var r = $();
+ this.each(function(i, e) {
+ var aa = $.makeArray(a);
+ aa.push(e);
+ r = r.add(fn.apply(this, aa));
+ });
+ return r;
+ },
// Sérialise le DOM de l'élément sous forme de HTML.
serializeDOM: function(value) {
/* get the DOM of this node, serialized as HTML.
diff --git a/jside2/index.html b/jside2/index.html
@@ -30,139 +30,5 @@
<script type="text/javascript" src="tk/test.js"></script>
</head>
<body>
- <div id="test-table-layout" class="tk window">
- <table style="height:100%; width:100%;">
- <tr style="height:1px">
- <td class="tk titre">
- <div class="tk box">
- Titre
- <br/>
- Je prends mon titre !
- <br/>
- Ça rigole pas !
- </div>
- </td>
- </tr>
- <tr>
- <td class="tk contenu">
- <div class="tk box">
- Contenu A
- </div>
- </td>
- </tr>
- <tr>
- <td rowspan="3" class="tk contenu">
- <div class="tk box">
- Contenu B
- </div>
- </td>
- </tr>
- <tr>
- </tr>
- <tr>
- </tr>
- <tr style="height:1px">
- <td class="tk pied">
- <div class="tk box">
- Pied
- <br/>
- Je prends mon pied !
- </div>
- </td>
- </tr>
- </table>
- </div>
- <div id="test-ui-layout" class="tk window">
- <div class="ui-layout-north tete">
- Titre
- <br/>
- Je prends mon titre !
- <br/>
- Ça rigole pas !
- </div>
- <div class="ui-layout-center contenu">
- Contenu A
- Contenu B
- </div>
- <div class="ui-layout-south pied">
- Pied
- <br/>
- Je prends mon pied !
- </div>
- </div>
- <div id="test-js-layout" class="tk window">
- <div class="tk titre">
- <table class="tk box-table">
- <tr>
- <td>
- <div class="tk box">
- Titre
- <br/>
- Je prends mon titre !
- <br/>
- Ça rigole pas !
- </div>
- </td>
- </tr>
- </table>
- </div>
- <div class="tk contenu auto-height">
- <table class="tk box-table">
- <tr>
- <td class="tk box">
- Contenu A
- </td>
- </tr>
- </table>
- </div>
- <div class="tk contenu auto-height">
- <table class="tk box-table">
- <tr class="tk box-tr">
- <td class="tk box-td box">
- Contenu B
- </td>
- </tr>
- </table>
- </div>
- <div class="tk pied">
- <table class="tk box-table">
- <tr>
- <td>
- <div class="tk box">
- Pied
- <br/>
- Je prends mon pied !
- </div>
- </td>
- </tr>
- </table>
- </div>
- </div>
- <script type="text/x-jqote-template" id="tk-box">
- <![CDATA[
- <table class="tk box-table">
- <tr class="tk box-tr">
- <td class="tk box-td box" style="text-align:<%:hpos%>; vertical-align:<%:vpos%>;">
- <%:contenu%>
- </td>
- </tr>
- </table>
- ]]>
- </script>
- <script type="text/x-jqote-template" id="tk-window">
- <![CDATA[
- <div class="tk window">
- <div class="tk titre">
- <%:titre%>
- </div>
- <div class="tk contenu auto-height">
- <%:contenu%>
- </div>
- <div class="tk pied">
- <%:pied%>
- </div>
- </div>
- ]]>
- </script>
</body>
</html>
diff --git a/jside2/test.css b/jside2/test.css
@@ -22,7 +22,7 @@
/* Positions */
.tk.window {
- position: absolute;
+ position: absolute ! important;
width: 200px;
height: 300px;
top:100px;
@@ -33,6 +33,7 @@
}
.tk.contenu {
+ height: 100%;
text-align: center;
}
@@ -50,15 +51,40 @@
padding: 0;
}
-.tk.hcontainer > * {
- float: left;
+/* hcontainer */
+.tk.hcontainer-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.tk.hcontainer-td {
+ padding: 0;
+ width: 1px;
+}
+
+.tk.hcontainer-td.auto-width {
+ width: auto;
+}
+
+/* vcontainer */
+.tk.vcontainer-table {
+ height: 100%;
+ border-collapse: collapse;
+}
+
+.tk.vcontainer-td {
+ padding: 0;
+}
+
+.tk.vcontainer-tr {
+ height: 0px;
}
-.tk.hcontainer-clear {
- clear: both;
- float: none;
+.tk.vcontainer-tr.auto-height {
+ height: auto;
}
+/* bouton */
.tk.bouton {
text-align: center;
border: thin solid gray;
diff --git a/jside2/tk/tk.js b/jside2/tk/tk.js
@@ -198,12 +198,12 @@ function widget(a, b, c) {
},
boutonReduire: function(_) {
_.options('class', '');
- this['class'] += 'tk bouton fermer';
+ this['class'] += ' tk bouton fermer';
_.square(_, this,'-');
},
boutonFermer: function(_) {
_.options('class', '');
- this['class'] += 'tk bouton reduire';
+ this['class'] += ' tk bouton reduire';
_.square(_, this,'×');
},
barreTitre: function(_) {
@@ -255,8 +255,7 @@ function widget(a, b, c) {
},
square: function(_) {
_.options('class', '');
- _.div(_, this,
- _('rest'));
+ _.div(_, this, _('rest'));
_().square();
},
@@ -266,16 +265,20 @@ function widget(a, b, c) {
'autoWidth', []
);
-// _().catchFromUp('sizeChange', 'autoWidth');
-// _().catchFromDown('sizeChange', 'autoWidth');
-
_(this.autoWidth).addClass('auto-width');
- this['class'] += ' tk hcontainer';
+ this['class'] += ' tk hcontainer-table';
+
+ _.table(_, this,
+ _.tr('tk hcontainer-tr',
+ _('rest').remap(_.hcontainerCell, 'tk hcontainer-td')));
+ },
+ hcontainerCell: function(_) {
+ _.options('class', '');
+
+ if (_('rest').is('.auto-width'))
+ this['class'] += ' auto-width';
- _.div(_, this,
- _('rest'));
- _().append('<div class="tk hcontainer-clear">');
- _().autoWidth();
+ _.td(_, this, _('rest'))
},
vcontainer: function(_) {
_.options(
@@ -284,11 +287,20 @@ function widget(a, b, c) {
);
_(this.autoHeight).addClass('auto-height');
+ this['class'] += ' tk vcontainer-table';
- _.div(_, this,
- _('rest'));
+ _.table(_, this,
+ _('rest').remap(_.vcontainerCell, 'tk vcontainer-tr'));
+ },
+ vcontainerCell: function(_) {
+ _.options('class', '');
+
+ if (_('rest').is('.auto-height'))
+ this['class'] += ' auto-height';
- _().autoHeight();
+ _.tr(_, this,
+ _.td('tk vcontainer-td',
+ _('rest')));
},
box: function(_) {
_.options(
@@ -377,12 +389,6 @@ jQuery.fn.extend({
$(this.height($(this).width()));
}
return this;
- },
- catchFromUp: function(signal, action) {
- console.log('catchFromUp', signal, action);
- },
- catchFromDown: function(signal, action) {
- console.log('catchFromDown', signal, action);
}
});
