Markera ruta

6 svar · 451 visningar · startad av learn 16 dec. 2005

learnMedlem sedan jan. 20051 130 inlägg

Frågan16 dec. 2005 14:50#1

Jag har ett rutnät (en tabell) där jag vill att användaren skall kunna markera en ruta (en cell) genom att klicka på den. Det ska tydligt synas att rutan är markerad och den skall även kunna avmarkeras genom ett klick.

Ett sätt är ju att lägga en checkbox i alla celler, men det är inte så värst snyggt...

Nu vill jag ha lite tips från er andra wF:are på hur jag kan lösa detta! Kanske man kan designa egna checkboxar...Är det bra?? Jag vill självklart att det ska funka i alla de vanligaste webbläsarna.

Tack på förhand!

learnMedlem sedan jan. 20051 130 inlägg

16 dec. 2005 16:00#2

Någon som har ngt tips?? Kom igen, jag vet att ni kan.. ;)

Hur fungerar det med "egen-designade" checkboxar? Hur gör man, hur "säkert" och bra är det?

(Kanske jag postade i fel forum..)

zcorpanMedlem sedan dec. 20042 245 inlägg

16 dec. 2005 16:06#3

Skulle nåt i den här stilen kunna funka?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>test</title>
  <style type="text/css">
   input { position:fixed; top:-10cm; }
   label { background:red; padding:1em; display:block; }
   input:checked + label { background:lime; }
   input:focus + label { outline:thin dotted; }
  </style>
 </head>
 <body>
  <form action="">
   <table>
    <tbody>
     <tr>
      <td><input type="checkbox" id="a"><label for="a">a</label></td>
      <td><input type="checkbox" id="b"><label for="b">b</label></td>
     </tr>
     <tr>
      <td><input type="checkbox" id="c"><label for="c">c</label></td>
      <td><input type="checkbox" id="d"><label for="d">d</label></td>
     </tr>
    </tbody>
   </table>
  </form>
 </body>
</html>

bossseMedlem sedan juni 2003771 inlägg

16 dec. 2005 16:56#4

Slängde ihop ett exempel, kan detta va nåt tro?
Övre raden markeras en cell med ett klick.
Den undre raden kan du markera valfritt antal celler med ett klick.
Undre radens celler avmarkeras med dubbelklick.
Du kan säket modifiera detta så det passar dig.

<html>
<head>
<style type=text/css>
body {background-color:green}
table {width:450px; height:300px; border: 1px solid black; border-collapse:collapse}
td {width:149px; height:148px; border: 1px solid black}
</style>
</head>
<body>
<table>
<tr> 
<td onclick="this.style.backgroundColor='white';"> 
</td> 
<td onclick="this.style.backgroundColor='white';"> 
</td> 
<td onclick="this.style.backgroundColor='white';"> 
</td>
</tr>
<tr> 
<td onclick="this.style.backgroundColor='white';" 
ondblclick="this.style.backgroundColor='green';"> 
</td> 
<td onclick="this.style.backgroundColor='white';" 
ondblclick="this.style.backgroundColor='green';"> 
</td>
<td onclick="this.style.backgroundColor='white';" 
ondblclick="this.style.backgroundColor='green';"> 
</td> 
</tr>
</table>
</body>
</html>

learnMedlem sedan jan. 20051 130 inlägg

16 dec. 2005 18:02#5

Båda verkar fungera finfint! Men för att slippa dubbelklicka väljer jag nog zcorpan's.
Det finns väl inga svagheter med det? Funkar i de flesta webläsarna? Vågar jag använda det på en viktig webbplats?

Tack

learnMedlem sedan jan. 20051 130 inlägg

16 dec. 2005 18:07#6

Det finns väl inga svagheter med det? Funkar i de flesta webläsarna? Vågar jag använda det på en viktig webbplats?

Det funkar inte i IE... Då hamnar det en kryssruta ovanför rutan... Hjälp!!

zcorpanMedlem sedan dec. 20042 245 inlägg

16 dec. 2005 18:42#7

IE saknar stöd för position:fixed, därför syns kryssrutorna. De försvinner om vi använder margin-top istället. Sedan kanske det kan behövas lite javascript för att kunna se vilka som är markerade för IE som saknar stöd för :checked och syskon-selektorn ("+").

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>test</title>
  <style type="text/css">
   input { position:fixed; margin-top:-10cm; }
   label { background:red; padding:1em; display:block; }
   input:checked + label { background:lime; }
   label.checked { background:lime; } /* msie */
   input:focus + label { outline:thin dotted; }
  </style>
  <!--[if IE]>
   <script type="text/javascript">
    window.onload = function() {
      var inputs = document.getElementsByTagName("input");
      for (var i = 0, len = inputs.length; i < len; ++i) {
        inputs[i].onclick = function() {
          this.nextSibling.className = this.checked ? "checked" : null;
        }
      }
    }
   </script>
  <![endif]-->
 </head>
 <body>
  <form action="">
   <table>
    <tbody>
     <tr>
      <td><input type="checkbox" id="a"><label for="a">a</label></td>
      <td><input type="checkbox" id="b"><label for="b">b</label></td>
     </tr>
     <tr>
      <td><input type="checkbox" id="c"><label for="c">c</label></td>
      <td><input type="checkbox" id="d"><label for="d">d</label></td>
     </tr>
    </tbody>
   </table>
  </form>
 </body>
</html>