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:

Attachment 3015

**ivan.x** · 11-19-2009, 06:21 PM

I've dropped this in favour of:

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

for obvious reasons...

**Falkon303** · 11-23-2009, 11:25 PM

I've recently found it can be accomplished with pure css...

Code:

<!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>

Thread: listview control proof of concept

Thread Tools

Search Thread

listview control proof of concept

Bookmarks

Bookmarks

Posting Permissions