TD resizable

**mrcanoa** · 26-09-2005, 14:48

Ciao a tutti,

come posso simulare la funzione com questa???

http://www.activewidgets.com/grid/

Le td possono essere resizzate.Potri anche utilizzare il loro codice che è free...ma vorrei capire il funzionamento...

**badaze** · 26-09-2005, 18:17

Ho provato a fare questo x IE soltanto....

E' un buon inizio, ma c'è ancora da fare. Ovviamente non ho guardato come fanno ma secondo me hanno un approccio diverso.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.tab {background-color:white;font-family:verdana;font-size:8pt;text-overflow:ellipsis;text-decoration:none}
.c1  {background-color:#e8e8e8;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#c8c8c8;text-align:left}
.c2  {background-color:#f0f0f0;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#e6e600;text-align:left}
.separator {cursor:W-resize;background-image:url('separator.gif');background-repeat:no-repeat;);

-->
</style>

<script language="JavaScript" type="text/javascript">
<!--

var formerScreenX = 0;
function mouseDir() {
 curScreenX    = event.screenX;
 direction     = curScreenX < formerScreenX ? 'left':'right';
 formerScreenX = curScreenX;
 return direction;
}

//------------- Cambia la classe dell'oggetto th
function changeClass(aTr,aClassName) {
 aTr.className = aClassName;
}

var toggleChangeWidth = false;
var thisCol;
var prevCol;
var formerPos;
var sourceElt;
//------------ Inizio resize
function startResizeColumn(anObject) {
 toggleChangeWidth = true;
 formerScreenX     = event.screenX;
 sourceElt         = anObject;
 thisCol           = anObject.id.replace('t','');
 prevCol           = thisCol - 1;
 document.getElementById('t'+prevCol).className = 'c2'; 
} // function startResizeColumn(anObject)

//------------ Azione resize
function doResize(aTable) {
 if (toggleChangeWidth) {
  event.cancellBubble = true;
  posLeft   = document.getElementById('t'+prevCol).offsetLeft;
	if (mouseDir() == 'right') {
	  status = 'right';
		mult   = -1;
	  document.body.style.cursor = 'W-resize';
	} else {
	  status = 'left';
    mult   = +1;		
	  document.body.style.cursor = 'W-resize';
	} // if (event.x > formerPos)		
  posX    = event.x - (sourceElt.offsetWidth * 2);	
	newPos  = posX - (posLeft) > 0 ? posX - (posLeft) : 1; 
  document.getElementById('t'+prevCol).width = newPos;	
  event.cancellBubble = false;	
 } // if (toggleChangeWidth)
} // function doResize(aTable)

//------------ Fine resize
function endResizeColumn(aTable) {
 toggleChangeWidth = false;
 status = '****************************************************';
 document.body.style.cursor = '';
 document.getElementById('t'+prevCol).className = 'c1';  
} // function endResizeColumn(aTable)
//-->
</script>

</head>
<body >

<table summary="" cellpadding="0" cellspacing="0" class="tab" 
  onmouseup  ="endResizeColumn(this)" 
	onmousemove="doResize(this)">
<th id="t0" class="c1" width="200" onmouseover="changeClass(this,'c2')" onmouseout="changeClass(this,'c1')">Name</th>
<th id="t1" class="separator"      onmousedown="startResizeColumn(this)" width="5px"></th>
<th id="t2" class="c1" width="50"  onmouseover="changeClass(this,'c2')" onmouseout="changeClass(this,'c1')">Size</th>
<th id="t3" class="separator"      onmousedown="startResizeColumn(this)" width="5px"></th>

<tr>
<td>shabadabadaze</td>
<td></td>
<td>1.200</td>
<td></td>
</tr>

<tr>
<td>pippo</td>
<td></td>
<td>1.100</td>
<td></td>
</tr>

</table>
</body>
</html>

**badaze** · 26-09-2005, 21:45

Questo è molto meglio ( ma non usa un tag table )

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.tab {background-color:white;font-family:verdana;font-size:8pt;text-overflow :ellipsis;overflow:hidden;}
.tx  {text-overflow :ellipsis;overflow:hidden;}
.c1  {background-color:#e8e8e8;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#c8c8c8;text-align:left;text-overflow :ellipsis;overflow:hidden;}
.c2  {background-color:#f0f0f0;border-bottom-style:solid;border-bottom-width:2px;border-bottom-color:#e6e600;text-align:left;text-overflow :ellipsis;overflow:hidden;}
.se  {cursor:W-resize;background-image:url('separator.gif');background-repeat:no-repeat;background-color:#e8e8e8;width:3px}
.ts  {width:3px}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
//------------- Cambia la classe dell'oggetto th
function changeClass(aTr,aClassName) {
 if (toggleChangeWidth) {
  return;
 }
 aTr.className = aClassName;
} // function changeClass(aTr,aClassName)

var toggleChangeWidth  = false;
var startedChangeWidth = false;
var thisCol;
var thisRow;
var prevCol;
var formerPos;
var sourceElt;
var targetElt;
//------------ Inizio resize
function startResizeColumn(anObject) {
 if (!toggleChangeWidth) {
  document.body.style.cursor = 'W-resize';
  //
  toggleChangeWidth = true;
  formerScreenX     = event.screenX;
  sourceElt         = anObject;
	//----------- Retrieves coordinates
  thisColArr          = anObject.id.match(/^t\_(\d+)_(\d+)$/);
	thisRow             = thisColArr[1];
	thisCol             = thisColArr[2];
  prevCol             = thisCol - 1;
	targetElt           = document.getElementById('t_0_'+prevCol)
  targetElt.className = 'c2';  
 } // if (!toggleChangeWidth) 
} // function startResizeColumn(anObject)


//------------ Azione resize
function doResize(aTable) {
 if (toggleChangeWidth) {
  posLeft   = targetElt.offsetLeft;	
  posX      = event.x - (sourceElt.offsetWidth * 2);	
	newPos    = posX - (posLeft) > 0 ? posX - (posLeft) : 1; 
  targetElt.style.width = newPos;	
	i         = 1
	curObj    = document.getElementById('t_'+i+'_'+prevCol)
	while (curObj != null) {
	 curObj.style.width = newPos;	
	 //
	 i++;
	 curObj    = document.getElementById('t_'+i+'_'+prevCol)
	} // while (curObj != null)
	status    = newPos;
 } // if (toggleChangeWidth)
} // function doResize(aTable)

function endResizeColumn(aTable) {
 if (toggleChangeWidth) {
  toggleChangeWidth          = false;
  document.body.style.cursor = '';
  targetElt.className        = 'c1';  
 } // if (toggleChangeWidth)
} // function endResizeColumn(aTable)

function init() {
 i = 0;
 curH = document.getElementById('t_0_'+i);
 while (curH != null) {
  w    = curH.offsetWidth;
	//---------- Retrieves max width
	j    = 1;
	curT = document.getElementById('t_'+j+'_'+i);
	while (curT != null) {
   if (curT.offsetWidth > w) {
	  w = curT.offsetWidth;
	 } // if (curT.style.width > w) 	
	 j++;
   curT = document.getElementById('t_'+j+'_'+i);
	} // while (curT != null)
	//---------- Assigns max width
	j    = 1;
	curT = document.getElementById('t_'+j+'_'+i);
	while (curT != null) {
   curT.style.width = w;	
	 j++;
   curT = document.getElementById('t_'+j+'_'+i);
	} // while (curT != null)	
	curH.style.width = w;
	i++;
  curH = document.getElementById('t_0_'+i);
 } // while (curH != null)
} // function init()

//-->
</script>

</head>
<body onload="init()">

<div class="tab" onmouseup="endResizeColumn(this)" onmousemove="doResize(this)" unselectable="on">

<span class="c1" id="t_0_0" onmouseover="changeClass(this,'c2')" onmouseout="changeClass(this,'c1')" unselectable="on">
 Name
</span>
<span class="se" id="t_0_1" onmousedown="startResizeColumn(this)">
 [img]separator.gif[/img]
</span>
<span class="c1" id="t_0_2" onmouseover="changeClass(this,'c2')" onmouseout="changeClass(this,'c1')" unselectable="on">
 Size
</span>
<span class="se" id="t_0_3" onmousedown="startResizeColumn(this)" >
 [img]separator.gif[/img]
</span>



<span id="t_1_0" class="tx">
 badaze
</span>
<span id="t_1_1" class="ts">
</span>
<span id="t_1_2" class="tx">
 1.200
</span>
<span id="t_1_3" class="tx">
</span>




<span id="t_2_0" class="tx">
 chabadabadaze
</span>
<span id="t_2_1" class="ts">
</span>
<span id="t_2_2" class="tx">
 1.200
</span>
<span id="t_2_3" class="tx">
</span>



</div>
</body>
</html>

Discussione: TD resizable

Strumenti discussione

Ricerca discussione

Visualizza

TD resizable

Permessi di invio