PDA

View Full Version : listview control proof of concept



ivan.x
11-19-2009, 05:03 PM
This is work in progress and extremely rudimentary to solve a table with fixed headers and scroll capabilities.

I also want to turn this into a listview control similar to the MS OS and have managed to overcome some of the problems I have encountered elsewhere.

I have only tested this in IE8, Chrome and FF. Further testing is probably required.

Basic todo list:
1.- Create an array in the global scope containing the ids of the divs that have listviews (LV) in the html.
var aLV=Array(0:'lv_Id_0',1:'lv_Id_1');


2.- Create an object from the LVs
var oLV=LV_Init();

3.- Create methods for the above object
LV_SelectAll,
LV_DeselectAll,
LV_Reset,
LV_ToggleSortByHeader,
LV_SetHoverState,
LV_SetSelectedState,
LV_SetNormalState,
LV_Resize,
LV_Resized,
LV_Drag,
LV_Move

Any thoughts, criticisms are greatly appreciated. By the way, I've only been doing javascript for a few weeks, so do expect odd constructs.

Enough talk and here is the first skelleton:

3015

ivan.x
11-19-2009, 06:21 PM
I've dropped this in favour of:

http://www.dynamicdrive.com/forums/showthread.php?t=6155

for obvious reasons...

Falkon303
11-23-2009, 11:25 PM
I've recently found it can be accomplished with pure css...

:)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
tr {width:100%;}
td {width:25%;}
</style>
</head>
<body>
<div style="height:100px;overflow:auto;width:415px;">
<table width="400px" border="0" cellspacing="2" cellpadding="2" style="height:100px;overflow:auto;">
<tr style="position:absolute;">
<td bgcolor="#999999">woohoo!</td>
<td bgcolor="#999999">these</td>
<td bgcolor="#999999">fit!</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
<td bgcolor="#ADC6EF">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>