• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Dienstplan formatieren

mo

mo

Administrator
Teammitglied
hi,
ich habe folgenden code
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
body { color:black; background-color:white; font-family: Arial }

.cols {
    float:left;
    width: 25px;
    height:120px;
    border:1px solid;
    border-color: black
    
}

.name {
	font-size: 12px;
    float:left;
    width: 20px;
    height:130px;
    margin-left:60px;
	border:0px solid;
    border-color: black;
			-webkit-transform:rotate(270deg);
			-moz-transform:rotate(270deg);
			-o-transform:rotate(270deg);
			/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
			-ms-transform:rotate(270deg);
}

.tag {
	font-size: 14px;
	font-weight: bold;
    float:left;
    width: 30px;
    height:20px;
    border:1px solid;
    border-color: black;
    background-color:#f5f5f5;
    text-align: center;
}

.zeit {
	float:left;
	width: 30px;
	font-size: 12px;
	height:55px;
	margin-left: 20px;
	margin-top: 30px;
			-webkit-transform:rotate(270deg);
			-moz-transform:rotate(270deg);
			-o-transform:rotate(270deg);
			/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
			-ms-transform:rotate(270deg);
}

.stunden {
    float:left;
    font-size: 12px;
    width: 30px;
    height:20px;
    border:1px solid;
    border-color: black
    background-color:#efefef;
}
</style>

</head>
<body>

<div class="name" >Test<BR />Person</div>
<div class="cols" ><div class="tag">01</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">02</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">03</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">04</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">05</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">06</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">07</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">08</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">09</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">10</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">11</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">12</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">13</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">14</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">15</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">16</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">17</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">18</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">19</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">20</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">21</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">22</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">23</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">24</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">25</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">26</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">27</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">28</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">29</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<div class="cols" ><div class="tag">30</div><div class="zeit">12:00 - 20:00</div><div class="stunden">8:00</div></div>
<br clear="all" />
</body>
</html>

das ganze soll ein dienstplan sein, was aber nicht passt, ist die ausrichtung der inhalte.
im div tag steht das tagesdatum, im div zeit die arbeitszeit und im div stunden die arbeitsstunden.
diese 3 sollen sauber untereinander stehen.
der name des mitarbeiters soll links in der ersten spalte um 270 grad gedreht stehen (ebenso wie die arbeitszeit).
fixe div-höhen sind soweit kein problem, da das nur hier im intranet läuft.
was muss ich noch ändern, damits vernünftig aussieht?
 
ja, ist eine tabelle. du meinst also, ich sollte weiterhin table-tags verwenden? habe einen onlinedienstplan gesehen, der war komplett mit divs, hatte mich gedanklich daran orientiert.
ich habe bereits eine tabelle fertig für das layout, das problem dabei war, dass ich den namen um 270 grad gedreht habe und der name aber horizontal immer noch so viel breite belegt, wie wenn ich ihn normal schreiben würde. anscheinend passiert das rendern im browser erst nachdem der text sichtbar wurde. gibts da evtl. ne lösung für?
 
Die komplette Tabelle drehen? Da hättest du dann nur die kurzen Zeiten, die die Zellen höher machen, als sie eigentlich sein müssten.
 
tja, die macht der gewohnheit.. wir haben den dienstplan seit ca. 25 jahren so.. :) da geht nix mit drehen.
 
so, gleich noch eine frage.
ich hab das jetzt alles schön in eine tabelle gepackt und jede zelle hat eine ID: id="38.2011.10.6".
wie kann ich mit jquery diese ID auslesen?
diese ID soll dann im zusammenspiel mit jeditable (http://www.appelsiini.net/projects/jeditable) den wert in die datenbank speichern.
 
BWT: eine ID (u.a.) darf nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9)
und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen ... ;)

Im Prinzip ist es erstmal kein Problem diese Regelung nicht zu beachten, aber im Zusammenspiel mit Javascript könnte es zu einem werden.
 
Ich meine, die komplette Tabelle mit CSS drehen. Dann sollten die langen Texte passen und du musst dich nur um die Zahlen kümmern.
 
ok, die IDs sind jetzt umbenannt. das ist ja das kleinere problem :)
wie komm ich denn nun an die IDs ran?

es läuft folgender code:

Code: 
<script src="js/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(function() {

  $(".editable_select").editable("./verwaltung_dienstplan_save.php?id="+id, { 
    indicator : '<img src="gfx/loading.gif">',
    data   : "{'Lorem ipsum':'Lorem ipsum','Ipsum dolor':'Ipsum dolor','Dolor sit':'Dolor sit'}",
    type   : "select",
    submit : "OK",
    style  : "inherit",
    submitdata : function() {
      return {id : 2};
    }
  });
});
</script>
und die id sollte beim platzhalter eingefügt werden. jemand ne idee?
 
so, problem gelöst.. jeditable liefert die id mit, wurde nur vom script überschrieben..
jetzt hab ich gleich ein anderes problem..

ich habe 2 zellen mit unterschiedlichen IDs, z.b. AB_123 und CD_456.
nun will ich, in der hoffnung dass das geht, folgendes haben:
bei klick auf die zelle AB_123 soll das hintergrund von CD_456 ausgetauscht werden.
ich will aber nicht in jeder der 500 AB_123 derivate den code einfügen sondern das per jquery quasi anheften, geht sowas? wenn ja: wie?
 
mo schrieb:
nun will ich, in der hoffnung dass das geht, folgendes haben:
bei klick auf die zelle AB_123 soll das hintergrund von CD_456 ausgetauscht werden.
Zum Vergrößern anklicken....
Ohne irgendeine Logik wird das nicht gehn. Wenn die Logik ist: *klick* 'AB_xxxx' => ändere Hintergrund von 'CD_xxx' musst du das einfach programmieren. Entweder mit einem regulären Ausdruck oder mit Stringoperationen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben