Changeset 2:26a11fc8e3e4

Timestamp:

05/23/09 20:16:03 (16 years ago)

Author:

František Kučera <franta-hg@…>

Branch:

default

Message:

AJAX – zatím jen demo: načítání tabulky ze souboru do výstupního pole.

Location:

html

Files:

• ahoj.html (added)
• hlavni.js (added)
• index.html (modified) (4 diffs)
• styl.css (modified) (5 diffs)

html/index.html

@@ -6 +6 @@
         <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
         <link href="styl.css" type="text/css" rel="StyleSheet"/>
+        <script type="text/javaScript" src="hlavni.js"></script>
         <title>SQL: pojďte si hrát!</title>
     </head>
@@ -15 +16 @@
                 <h2>Nápověda</h2>
                 <div class="vnitrekBloku">
-                    <p>lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
+                    <p id="napovedniPole">lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
                 </div>
             </div>
@@ -27 +28 @@
                         <form>
                             <textarea>SELECT * FROM tabulka;</textarea>
-                            <button type="submit">Vykonat SQL!</button>
+                            <button type="button" onclick="javascript:demo();">Vykonat SQL!</button>
                         </form>
                     </div>
@@ -38 +39 @@
                 <div class ="blok" id="vystup">
                     <h2>Výsledek</h2>
-                    <div class="vnitrekBloku">
+                    <div class="vnitrekBloku" id="vystupniPole">
                         <p>
                             lorem ipsum, nějaký text, něco jako latina, ale jiné…

html/styl.css

@@ +1 @@
+/** Obrázky s odkazem bez rámečku */
 a img {
     border: none;
 }
 
+/** Pozadí stránky a text */
 html {
     background: #42afdc;
     color:black;
 }
+
+/** Bezpatkové písmo */
 body {
     font-family: sans-serif;
 }
 
+/** Prostor pro logo a název programu */
 #zahlavi {
     height: 48px;
@@ -40 +45 @@
 #vstup textarea {
     width: 640px;
-    height: 110px;
+    height: 108px;
     padding: 8px;
+    border: 1px solid silver;
 }
 
@@ -51 +57 @@
     padding: 2px;
     font-size: 12px;
-    margin-right: 3px;
+    margin-right: 0px;
+    margin-top: 5px;
 }
 
@@ -63 +70 @@
 }
 
+/** Nadpisy bloků */
 .blok h2 {
-    font-size: medium;
+    font-size: 12px;
     padding: 2px;
+    padding-top: 4px;
     padding-left: 32px;
     margin: 0px;
     color: gray;
+    height: 20px;
 }
 
@@ -75 +85 @@
 }
 
+/** Vstupně-výstupní část */
+#io {
+    float: left;
+}
+
 #io h2 {
     background-image: url('grafika/blok-nadpis-680.png');
 }
 
-#io {
-    float: left;
-}
-
+/** Blok vstupu */
 #vstup {
     width: 680px;
 }
 
+/** Blok výstupu */
 #vystup {
     width: 680px;
 }
 
+/** Blok nápovědy */
 #napoveda {
     float: right;
     width: 320px;
 }
+
+/** Formátování (výstupní) tabulky */
+table {
+    border: 1px solid green;
+    border-collapse:collapse;
+}
+
+td {
+    border: 1px solid black;
+    padding: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+td.cislo {
+    text-align: right;
+}
+
+thead {
+    background: silver;
+    font-weight:bold;
+}
+
+thead td a {
+    color: black;
+    text-decoration: none;
+}