Witam czy jest możliwośc napisania skryptu w JS(JavaScript) z takimi możliwosciami:
Tabelka:
- ukrywanie do postaci naglowka
- zamykanie i otworzenie poprzez link
- swobodne przenoszenie tabelki po stronie
Oczywiście chciałbym żeby to niebyło na ramkach :wink:
Pełna wersja: [js]tabelki
Nikt z was nie wie? :cry:
ja wlasnie ci to pisze 
troche mnie drag & drop (reszte juz mam) przychamowalo, ale zrobie ci to jeszcze dzisiaj 
troche mnie drag & drop (reszte juz mam) przychamowalo, ale zrobie ci to jeszcze dzisiaj
Paul THX 
Napisalem to w koncu ...
Nie jest to idealne.. :? Jedynie na Mozilli dziala jak ma dzialac, mowie o drag&drop, reszta ok. Na IE i Operze zachowuje sie dobrze, ale przy malych predkosciach myszki
Sam zobaczysz jesli teraz mnie nie rozumiesz Probowalem temu zapobiec dokladajac pare zdarzen, ale to wtedy zaczyna coraz bardziej isc klatka po klatce Nie mam juz do tego IE sily ...
[xml:1:15322c49f5]<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
#tabelka{background-color:green;color:white;width:400;font-family:tahoma;font-size:10pt;position: absolute;}
#tabelka2{background-color:#336699;color:white;width:400;font-family:tahoma;font-size:10pt;position: absolute;}
#tabelka_naglowek{background-color:#339933;}
#tabelka_naglowek2{background-color:#3366CC;}
body{font-family:tahoma;font-size:10pt;}
</style>
<script type="text/javascript">
function pokaz_ukryj(obj){
obj = document.getElementById(obj);
(obj.style.display == 'none')?obj.style.display = '':obj.style.display = 'none';
}
ie = navigator.userAgent.indexOf('MSIE') != -1;
function dragdrop(obj,obj2,left,top){
obj = document.getElementById(obj);
obj2 = document.getElementById(obj2);
obj.onmousemove = mousemove;
obj2.obj = obj;
obj.obj2 = obj2;
obj2.onmousedown = mousedown;
obj2.onmouseup = mouseup;
if(!ie){
obj.style.left = left;
obj.style.top = top;
}else{
obj.style.pixelLeft = left;
obj.style.pixelTop = top;
}
}
function mousedown(e){
this.obj.down = true;
if(ie){
this.obj.x2 = window.event.x-this.obj.style.pixelLeft;
this.obj.y2 = window.event.y-this.obj.style.pixelTop;
}else{
this.obj.x2 = e.pageX-parseInt(this.obj.style.left.slice(0,-2));
this.obj.y2 = e.pageY-parseInt(this.obj.style.top.slice(0,-2));
}
}
function mouseup(){
this.obj.down = false;
}
function mousemove(e){
if(this.down){
if(ie){
this.style.pixelLeft = window.event.x-this.x2;
this.style.pixelTop = window.event.y-this.y2;
}else{
this.style.left = e.pageX-this.x2;
this.style.top = e.pageY-this.y2;
}
}
}
</script>
</head>
<body onload="dragdrop('tabelka', 'tabelka_naglowek',100,200);dragdrop('tabelka2', 'tabelka_naglowek2',200,400);">
<table id="tabelka" cellspacing="0" cellpadding="0">
<tr id="tabelka_naglowek"><td colspan="2" align="center">Naglowek</td></tr>
<tbody id="tabelka_body" >
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</tbody>
</table><table id="tabelka2" cellspacing="0" cellpadding="0">
<tr id="tabelka_naglowek2"><td colspan="2" align="center">Naglowek</td></tr>
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</table>
<br><br><br><br><br><br>
<a href="java script: void pokaz_ukryj('tabelka_body');">Pokaz calosc / Ukryj do naglowka</a><br><br><br>
<a href="java script: void pokaz_ukryj('tabelka');">Pokaz / Ukryj tabele</a><br>
</body>
</html>[/xml:1:15322c49f5]
edit:
Widze, ze mi tu cssa w pol przecielo
- jak bedziesz kopiowac usun sobie te entery.
...
Nie jest to idealne.. :? Jedynie na Mozilli dziala jak ma dzialac, mowie o drag&drop, reszta ok. Na IE i Operze zachowuje sie dobrze, ale przy malych predkosciach myszki
Sam zobaczysz jesli teraz mnie nie rozumiesz Probowalem temu zapobiec dokladajac pare zdarzen, ale to wtedy zaczyna coraz bardziej isc klatka po klatce Nie mam juz do tego IE sily ...
[xml:1:15322c49f5]<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
#tabelka{background-color:green;color:white;width:400;font-family:tahoma;font-size:10pt;position: absolute;}
#tabelka2{background-color:#336699;color:white;width:400;font-family:tahoma;font-size:10pt;position: absolute;}
#tabelka_naglowek{background-color:#339933;}
#tabelka_naglowek2{background-color:#3366CC;}
body{font-family:tahoma;font-size:10pt;}
</style>
<script type="text/javascript">
function pokaz_ukryj(obj){
obj = document.getElementById(obj);
(obj.style.display == 'none')?obj.style.display = '':obj.style.display = 'none';
}
ie = navigator.userAgent.indexOf('MSIE') != -1;
function dragdrop(obj,obj2,left,top){
obj = document.getElementById(obj);
obj2 = document.getElementById(obj2);
obj.onmousemove = mousemove;
obj2.obj = obj;
obj.obj2 = obj2;
obj2.onmousedown = mousedown;
obj2.onmouseup = mouseup;
if(!ie){
obj.style.left = left;
obj.style.top = top;
}else{
obj.style.pixelLeft = left;
obj.style.pixelTop = top;
}
}
function mousedown(e){
this.obj.down = true;
if(ie){
this.obj.x2 = window.event.x-this.obj.style.pixelLeft;
this.obj.y2 = window.event.y-this.obj.style.pixelTop;
}else{
this.obj.x2 = e.pageX-parseInt(this.obj.style.left.slice(0,-2));
this.obj.y2 = e.pageY-parseInt(this.obj.style.top.slice(0,-2));
}
}
function mouseup(){
this.obj.down = false;
}
function mousemove(e){
if(this.down){
if(ie){
this.style.pixelLeft = window.event.x-this.x2;
this.style.pixelTop = window.event.y-this.y2;
}else{
this.style.left = e.pageX-this.x2;
this.style.top = e.pageY-this.y2;
}
}
}
</script>
</head>
<body onload="dragdrop('tabelka', 'tabelka_naglowek',100,200);dragdrop('tabelka2', 'tabelka_naglowek2',200,400);">
<table id="tabelka" cellspacing="0" cellpadding="0">
<tr id="tabelka_naglowek"><td colspan="2" align="center">Naglowek</td></tr>
<tbody id="tabelka_body" >
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</tbody>
</table><table id="tabelka2" cellspacing="0" cellpadding="0">
<tr id="tabelka_naglowek2"><td colspan="2" align="center">Naglowek</td></tr>
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</table>
<br><br><br><br><br><br>
<a href="java script: void pokaz_ukryj('tabelka_body');">Pokaz calosc / Ukryj do naglowka</a><br><br><br>
<a href="java script: void pokaz_ukryj('tabelka');">Pokaz / Ukryj tabele</a><br>
</body>
</html>[/xml:1:15322c49f5]
edit:
Widze, ze mi tu cssa w pol przecielo
- jak bedziesz kopiowac usun sobie te entery.
Paul: właśnie o takie coś mi chodzi tylko jeśli dalbyś rade to ja bym chciał innaczej to:
mam przy kazdej z tabel link +, - i ()
+ pokazuje tabele
(+) zamykanie okna tabeli
- ukrywa
Bo zauważyłem że strasznie jest nieestetyczne przenoszenie tabel wiec sobie dam spokuj z tym :]
Paul jeśli nie dasz rady mi tego przerobić to i tak jestem wdzięczny
mam przy kazdej z tabel link +, - i ()
+ pokazuje tabele
(+) zamykanie okna tabeli
- ukrywa
Bo zauważyłem że strasznie jest nieestetyczne przenoszenie tabel wiec sobie dam spokuj z tym :]
Paul jeśli nie dasz rady mi tego przerobić to i tak jestem wdzięczny
Przerobilem troche Co do drag&drop to jak cos mi sie uda wykombinowac, to napisze
[xml:1:f8d8ebce24]<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
.tabelka{width:400;font-family:tahoma;font-size:10pt;position: absolute;}
body{font-family:tahoma;font-size:10pt;color:white;}
.text{font-size:10pt;}
</style>
<script type="text/javascript">
function pokaz_ukryj(obj){
obj = document.getElementById(obj);
(obj.style.display == 'none')?obj.style.display = '':obj.style.display = 'none';
}
ie = navigator.userAgent.indexOf('MSIE') != -1;
function dragdrop(obj,obj2,left,top){
obj = document.getElementById(obj);
obj2 = document.getElementById(obj2);
obj.onmousemove = mousemove;
obj2.obj = obj;
obj.obj2 = obj2;
obj2.onmousedown = mousedown;
obj2.onmouseup = mouseup;
if(!ie){
obj.style.left = left;
obj.style.top = top;
}else{
obj.style.pixelLeft = left;
obj.style.pixelTop = top;
}
}
function mousedown(e){
this.obj.down = true;
if(ie){
this.obj.x2 = window.event.x-this.obj.style.pixelLeft;
this.obj.y2 = window.event.y-this.obj.style.pixelTop;
}else{
this.obj.x2 = e.pageX-parseInt(this.obj.style.left.slice(0,-2));
this.obj.y2 = e.pageY-parseInt(this.obj.style.top.slice(0,-2));
}
}
function mouseup(){
this.obj.down = false;
}
function mousemove(e){
if(this.down){
if(ie){
this.style.pixelLeft = window.event.x-this.x2;
this.style.pixelTop = window.event.y-this.y2;
}else{
this.style.left = e.pageX-this.x2;
this.style.top = e.pageY-this.y2;
}
}
}
function minimalizuj(naglowek1,body){
if(document.getElementById(naglowek1).style.display != 'none'){
pokaz_ukryj(body);
body = document.getElementById(body);
body.mini = (body.style.display == 'none')?true:false;
}
}
function zamknij(body, naglowek1,naglowek2){
if(document.getElementById(body).mini)
minimalizuj(naglowek1,body);
pokaz_ukryj(body);
pokaz_ukryj(naglowek1);
pokaz_ukryj(naglowek2);
}
</script>
</head>
<body onload="dragdrop('tabelka', 'tabelka_naglowek',100,200);dragdrop('tabelka2', 'tabelka2_naglowek',200,400);">
<table id="tabelka" class="tabelka" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><table class="text" width="100%" cellspacing="0" cellpadding="0"><tr id="tabelka_naglowek"><td align="center" style="background-color:#339933;" width="370" id="tabelka_naglowek1">Naglowek</td><td width="370" style="display:none;" id="tabelka_naglowek2"></td><td width="30" style="cursor: pointer;background-color:green;" onselectstart="return false;"> <b><span onclick="minimalizuj('tabelka_naglowek1','tabelka_body');">_</span> <span onclick="zamknij('tabelka_body','tabelka_naglowek1','tabelka_naglowek2');">X</span></b></td></tr></table></td></tr>
<tbody id="tabelka_body" style="background-color:green;">
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</tbody>
</table>
<table id="tabelka2" class="tabelka" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><table class="text" width="100%" cellspacing="0" cellpadding="0"><tr id="tabelka2_naglowek"><td align="center" style="background-color:#3366CC;" width="370" id="tabelka2_naglowek1">Naglowek</td><td width="370" style="display:none;" id="tabelka2_naglowek2"> </td><td width="30" style="cursor: pointer;background-color:#336699;" onselectstart="return false;"> <b><span onclick="minimalizuj('tabelka2_naglowek1','tabelka2_body');">_</span> <span onclick="zamknij('tabelka2_body','tabelka2_naglowek1','tabelka2_naglowek2');">X</span></b></td></tr></table></td></tr><tbody id="tabelka2_body" style="background-color:#336699;">
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</tbody>
</table>
</body>
</html>[/xml:1:f8d8ebce24]
Co do drag&drop to jak cos mi sie uda wykombinowac, to napisze
[xml:1:f8d8ebce24]<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
.tabelka{width:400;font-family:tahoma;font-size:10pt;position: absolute;}
body{font-family:tahoma;font-size:10pt;color:white;}
.text{font-size:10pt;}
</style>
<script type="text/javascript">
function pokaz_ukryj(obj){
obj = document.getElementById(obj);
(obj.style.display == 'none')?obj.style.display = '':obj.style.display = 'none';
}
ie = navigator.userAgent.indexOf('MSIE') != -1;
function dragdrop(obj,obj2,left,top){
obj = document.getElementById(obj);
obj2 = document.getElementById(obj2);
obj.onmousemove = mousemove;
obj2.obj = obj;
obj.obj2 = obj2;
obj2.onmousedown = mousedown;
obj2.onmouseup = mouseup;
if(!ie){
obj.style.left = left;
obj.style.top = top;
}else{
obj.style.pixelLeft = left;
obj.style.pixelTop = top;
}
}
function mousedown(e){
this.obj.down = true;
if(ie){
this.obj.x2 = window.event.x-this.obj.style.pixelLeft;
this.obj.y2 = window.event.y-this.obj.style.pixelTop;
}else{
this.obj.x2 = e.pageX-parseInt(this.obj.style.left.slice(0,-2));
this.obj.y2 = e.pageY-parseInt(this.obj.style.top.slice(0,-2));
}
}
function mouseup(){
this.obj.down = false;
}
function mousemove(e){
if(this.down){
if(ie){
this.style.pixelLeft = window.event.x-this.x2;
this.style.pixelTop = window.event.y-this.y2;
}else{
this.style.left = e.pageX-this.x2;
this.style.top = e.pageY-this.y2;
}
}
}
function minimalizuj(naglowek1,body){
if(document.getElementById(naglowek1).style.display != 'none'){
pokaz_ukryj(body);
body = document.getElementById(body);
body.mini = (body.style.display == 'none')?true:false;
}
}
function zamknij(body, naglowek1,naglowek2){
if(document.getElementById(body).mini)
minimalizuj(naglowek1,body);
pokaz_ukryj(body);
pokaz_ukryj(naglowek1);
pokaz_ukryj(naglowek2);
}
</script>
</head>
<body onload="dragdrop('tabelka', 'tabelka_naglowek',100,200);dragdrop('tabelka2', 'tabelka2_naglowek',200,400);">
<table id="tabelka" class="tabelka" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><table class="text" width="100%" cellspacing="0" cellpadding="0"><tr id="tabelka_naglowek"><td align="center" style="background-color:#339933;" width="370" id="tabelka_naglowek1">Naglowek</td><td width="370" style="display:none;" id="tabelka_naglowek2"></td><td width="30" style="cursor: pointer;background-color:green;" onselectstart="return false;"> <b><span onclick="minimalizuj('tabelka_naglowek1','tabelka_body');">_</span> <span onclick="zamknij('tabelka_body','tabelka_naglowek1','tabelka_naglowek2');">X</span></b></td></tr></table></td></tr>
<tbody id="tabelka_body" style="background-color:green;">
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</tbody>
</table>
<table id="tabelka2" class="tabelka" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="2"><table class="text" width="100%" cellspacing="0" cellpadding="0"><tr id="tabelka2_naglowek"><td align="center" style="background-color:#3366CC;" width="370" id="tabelka2_naglowek1">Naglowek</td><td width="370" style="display:none;" id="tabelka2_naglowek2"> </td><td width="30" style="cursor: pointer;background-color:#336699;" onselectstart="return false;"> <b><span onclick="minimalizuj('tabelka2_naglowek1','tabelka2_body');">_</span> <span onclick="zamknij('tabelka2_body','tabelka2_naglowek1','tabelka2_naglowek2');">X</span></b></td></tr></table></td></tr><tbody id="tabelka2_body" style="background-color:#336699;">
<tr><td>a</td><td>b</tr><tr><td>c</td><td>d</td></tr><tr><td>e</td><td>f</td></tr><tr><td>g</td><td>f</td></tr>
</tbody>
</table>
</body>
</html>[/xml:1:f8d8ebce24]
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.