commit 56eeeaac1984ba28a92073562f58464d5e2e9d6d
parent 2dfcb2b6327a2b10f164c6ef40196ac1add1f949
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Mon, 26 Apr 2010 12:28:57 +0000
essais avec une mise en page avec tableaux
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@23 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
5 files changed, 303 insertions(+), 74 deletions(-)
diff --git a/jside/ide.js b/jside/ide.js
@@ -19,7 +19,7 @@ function init() {
test();
var b = nouveauBloc("Scratch");
- uiEditer(b.uid);
+ editer(b.uid);
rechercher('');
}
@@ -54,7 +54,6 @@ function bloc(uid, nom, description) {
this.nom = nom || "Nouveau bloc";
this.description = description || "Aucune description.";
this.definitions = [];
- log("Nouveau bloc \"" + this.nom + "\"");
b = this;
}
@@ -99,7 +98,8 @@ jQuery.fn.extend({
}
});
-function uiRechercher() {
+function uiRechercher() {
+ log("Recherche…");
rechercher($('#nom-bloc').val());
}
@@ -115,8 +115,6 @@ function demarrerRecherche() {
}
function rechercher(terme) {
- log("Recherche…");
-
demarrerRecherche();
$(
@@ -152,7 +150,10 @@ function rechercher(terme) {
function uiEditer(uid) {
log("Édition de " + uid);
-
+ editer(uid);
+}
+
+function editer(uid) {
/* $('#edition-blocs').children().hide(); */
$('#edition-' + $w.blocActif).hide();
$w.blocActif = uid;
@@ -190,7 +191,9 @@ function uiSerialiser() {
}
function uiNouveauBloc() {
- nouveauBloc($('#nom-bloc').val());
+ var nom = $('#nom-bloc').val();
+ log("Nouveau bloc \"" + nom + "\"");
+ nouveauBloc(nom);
}
function nouveauBloc(nom) {
@@ -251,19 +254,19 @@ jQuery.fn.extend({
function logPauseToggle() {
if (logPause) {
- $('#log .contenu').stop().scrollTo($('#log .contenu :last'), 200);
+ $('.log .contenu').stop().scrollTo($('.log .contenu :last'), 200);
logPause = false;
$('#log-pause').text("pause");
} else {
logPause = true;
- $('#log .contenu').stop();
+ $('.log .contenu').stop();
$('#log-pause').text("play");
}
}
function log(msg) {
- var elem = $('#log .contenu').append("<p>"+msg+"</p>");
+ var elem = $('.log .contenu').append("<p>"+msg+"</p>");
if (!logPause) {
- $('#log .contenu').stop().scrollTo($('#log .contenu :last'), 100);
+ $('.log .contenu').stop().scrollTo($('.log .contenu :last'), 100);
}
}
diff --git a/jside/index.html b/jside/index.html
@@ -25,9 +25,9 @@
<body id="body">
<div id="outils">
<input type="text" class="bouton" id="nom-bloc" />
- <a href="#" class="bouton" id="rechercher">Rechercher</a>
- <a href="#" class="bouton" id="nouveau-bloc">Nouveau bloc</a>
- <a href="#" class="bouton" id="serialiser">Serialiser</a>
+ <input type="button" class="bouton" id="rechercher" value="Rechercher" />
+ <input type="button" class="bouton" id="nouveau-bloc" value="Nouveau bloc" />
+ <input type="button" class="bouton" id="serialiser" value="Serialiser" />
<div class="clear"></div>
</div>
<div id="edition">
@@ -86,12 +86,12 @@
</script>
</div>
</div>
- <div id="log">
+ <div class="log">
<div id="log-en-tete">
<h2>Log</h2>
<a href="#" class="bouton" id="log-pause">pause</a>
</div>
- <div id="log-contenu">
+ <div class="contenu">
</div>
</div>
</body>
diff --git a/jside/index3.html b/jside/index3.html
@@ -3,51 +3,111 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>IDE</title>
+ <link rel="stylesheet" type="text/css" href="jquery/themes/custom-theme/jquery.ui.all.css" />
<link rel="stylesheet" type="text/css" href="style3.css" />
+
+ <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
+
+ <script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
+ <script type="text/javascript" src="jquery/jquery.jqote2.js"></script>
+
+ <script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.mouse.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.draggable.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.droppable.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.resizable.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.ui.effects.core.js"></script>
+ <script type="text/javascript" src="jquery/ui/jquery.effects.core.js"></script>
+
+ <script type="text/javascript" src="ide.js"></script>
</head>
<body>
<table id="hauteur-max">
- <tr>
- <td>
- Menu
- </td>
- </tr>
- <tr id="main">
- <td id="td1">
- abc
- </td>
- </tr>
- <tr>
- <td id="td1">
- Log
- </td>
- </tr>
- <tr>
- <td id="log">
- <div id="log-contenu">
- 1 Contenu du log<br/>
- 2 Contenu du log<br/>
- 3 Contenu du log<br/>
- 4 Contenu du log<br/>
- 5 Contenu du log<br/>
- 6 Contenu du log<br/>
- 7 Contenu du log<br/>
- 8 Contenu du log<br/>
- 9 Contenu du log<br/>
- 10 Contenu du log<br/>
- 11 Contenu du log<br/>
- 12 Contenu du log<br/>
- 13 Contenu du log<br/>
- 14 Contenu du log<br/>
- 15 Contenu du log<br/>
- 16 Contenu du log<br/>
- 17 Contenu du log<br/>
- 18 Contenu du log<br/>
- 19 Contenu du log<br/>
- 20 Contenu du log<br/>
- </div>
- </td>
- </tr>
+ <tbody>
+ <tr>
+ <td>
+ <div id="outils">
+ <input type="text" class="bouton" id="nom-bloc" />
+ <input type="button" class="bouton" id="rechercher" value="Rechercher" />
+ <input type="button" class="bouton" id="nouveau-bloc" value="Nouveau bloc" />
+ <input type="button" class="bouton" id="serialiser" value="Serialiser" />
+ </div>
+ </td>
+ </tr>
+ <tr id="elastique">
+ <td id="edition">
+ <table id="resultats-recherche">
+ <thead>
+ <tr>
+ <th>
+ Uid
+ </th>
+ <th>
+ Nom
+ </th>
+ <th>
+ Description
+ </th>
+ <th>
+ Actions
+ </th>
+ </tr>
+ </thead>
+ <script type="text/x-jqote-template" id="modele-resultat-recherche">
+ <![CDATA[
+ <tr class="resultat-recherche">
+ <td>
+ <%= this.uid %>
+ </td>
+ <td>
+ <%= this.nom %>
+ </td>
+ <td>
+ <%= this.description %>
+ </td>
+ <td>
+ <a class="button editer" href="#">Éditer</a>
+ <a class="button utiliser" href="#">Utiliser</a>
+ </td>
+ </tr>
+ ]]>
+ </script>
+ <tbody>
+ </tbody>
+ </table>
+ <div id="edition-blocs">
+ <script type="text/x-jqote-template" id="modele-utilisation-bloc">
+ <![CDATA[
+ <div class="bloc">
+ <div class="tete">
+ <span class="reduire icone icone-moins"></span>
+ <%= this.nom %>
+ </div>
+ <div class="contenu">
+ <%= this.description %>
+ </div>
+ </div>
+ ]]>
+ </script>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td class="log">
+ <div class="tete">
+ <h2>Log</h2>
+ <input type="button" class="bouton" id="log-pause" value="pause" />
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td id="td-log-contenu" class="log">
+ <div id="log" class="contenu">
+ </div>
+ </td>
+ </tr>
+ </tbody>
</table>
</body>
</html>
diff --git a/jside/style.css b/jside/style.css
@@ -2,7 +2,7 @@ body {
margin: 0;
}
-#log {
+.log {
position: absolute;
top: 75%;
bottom: 0;
@@ -10,7 +10,7 @@ body {
right: 0;
}
-#log p {
+.log p {
border-bottom: thin solid lightgray;
padding: 0.7em 0.3em 0.3em;
margin: 0;
@@ -23,7 +23,7 @@ body {
background-color: lightgray;
}
-#log h2 {
+.log h2 {
display: inline;
font-size: 100%;
margin-right : 1em;
@@ -41,7 +41,7 @@ body {
background-color: #fff
}
-#log-contenu {
+.log .contenu {
position: absolute;
top: 1.7em; /* Hack, mais CSS ne nous permettra pas de faire mieux… :( */
bottom: 0;
@@ -64,9 +64,6 @@ body {
}
#outils .bouton {
-}
-
-#outils .bouton {
color: #242;
border-color: #8a8;
background-color: #efd;
diff --git a/jside/style3.css b/jside/style3.css
@@ -1,3 +1,5 @@
+/* Mise en page */
+
html, body, #hauteur-max {
height:100%;
width: 100%;
@@ -5,24 +7,192 @@ html, body, #hauteur-max {
padding: 0;
}
-td {
- border: thin solid red;
+#hauteur-max {
+ border-collapse: collapse;
+}
+
+#hauteur-max > tbody > tr {
+ height:1em;
+ margin: 0;
+ padding: 0;
+}
+
+#hauteur-max > tbody > tr > td {
vertical-align: top;
+ margin: 0;
+ padding: 0;
}
-td#log{
+#hauteur-max > tbody > tr#elastique {
+ height: auto;
+}
+
+#hauteur-max > tbody > tr > td#td-log-contenu{
height:10em; /* On ne peut pas mettre 20% ici… */
}
-#log-contenu {
+.log .contenu {
height: 100%;
overflow: auto;
}
-tr {
- height:1em;
+
+
+/* Tous */
+
+.bouton {
+ display: inline-block;
+ margin: 0.2em;
+ text-decoration: none;
+ border-width: thin;
+ border-style: solid;
}
-tr#main {
- height: auto;
-}
-\ No newline at end of file
+.bouton {
+ color: #333;
+ border-color: #999;
+ background-color: #eee
+}
+
+.bouton:hover {
+ color: #555;
+ border-color: #ccc;
+ background-color: #fff
+}
+
+/* Icônes */
+.icone {
+ display: block;
+ font-weight: bolder;
+ color: black;
+ text-align: center;
+ min-width: 1em;
+}
+
+.icone-plus:before {
+ content: "+";
+}
+
+.icone-moins:before {
+ content: "-";
+}
+
+
+
+/* Outils */
+
+#outils .bouton {
+ color: #242;
+ border-color: #8a8;
+ background-color: #efd;
+}
+
+#outils .boutonNormal {
+ color: #242;
+ border-color: #8a8;
+ background-color: #efd;
+}
+
+#outils .bouton:hover {
+ color: #422;
+ border-color: #a88;
+ background-color: #fed;
+}
+
+#outils .boutonHover {
+ color: #422;
+ border-color: #a88;
+ background-color: #fed;
+}
+
+
+
+/* Zone principale */
+
+#elastique > td {
+ border-top: thick solid gray;
+ border-bottom: thick solid gray;
+}
+
+#edition {
+ border: thin solid green;
+ height: 100%;
+}
+
+/* Résultats de la recherche */
+
+#resultats-recherche {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+#resultats-recherche thead th {
+ border-bottom: thin solid black;
+}
+
+#resultats-recherche thead tr {
+}
+
+#resultats-recherche tbody tr:first-child td {
+ /*padding-top: 0.2em;*/
+}
+
+#resultats-recherche td {
+ border-bottom: thin solid lightgray;
+}
+
+#resultats-recherche th {
+ text-align: left;
+}
+
+/* Édition des blocs */
+#edition-blocs > * {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.bloc {
+ border: medium solid gray;
+ position: absolute;
+ width: 25%;
+ height: 30%;
+ top: 10%;
+ left: 20%;
+}
+
+.bloc .tete {
+ margin: 0.2em;
+ padding: 0.3em;
+ background-color: lightgray;
+}
+
+.bloc .tete .icone {
+ float: right;
+}
+
+.bloc .contenu {
+ padding: 0.4em;
+}
+
+
+
+/* Log */
+
+.log .tete {
+ padding: 0 0.3em;
+}
+
+.log h2 {
+ display: inline;
+ font-size: 100%;
+ margin-right : 1em;
+}
+
+.log p {
+ border-bottom: thin solid lightgray;
+ padding: 0.7em 0.3em 0.3em;
+ margin: 0;
+}
