1) include t3lib_browsetree in your class file:

require_once(PATH_t3lib.'class.t3lib_browsetree.php');

2) extend t3lib_browsetree wrapIcon and wrapTitle to add the HTML-Eventhandler onMouseover, onMouseout and onClick to each tree element:

class localPageTree extends t3lib_browseTree {
 function wrapIcon($icon,$row)   {
  $cmd = ' onMouseover="rollover(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')" onMouseout="rollout(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')"';
  return '<a href="#"'.$cmd.'>'.$icon.'</a>';
 }	
 
 function wrapTitle($title,$row,$bank=0)	{		
  $cmd = ' onMouseover="rollover(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')" onMouseout="rollout(\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\')"';
  $aOnClick = 'mClick(\.$this->getId($row).'\',\.$this->domIdPrefix.$row['uid'].'_'.$this->bank.'\');';	   return '<a href="#"'.$cmd.' onclick="'.htmlspecialchars($aOnClick).'">'.$title.'</a>';
 }
}

3) include the javascript function rollover()(HTML-Eventhandler onMouseover), function rollout()(HTML-Eventhandler onMouseout) and function click()(HTML-Eventhandler onclick) in the document header (the function click() select the current element and saves the id of the element and the id of the page in a hidden form field):

$this->doc->JScode = '
 <script language="javascript" type="text/javascript">					
  function mClick(t,id) {
   old = document.getElementsByName("tx_myext[targetID]")[0].value;
   if (old) {
    identity=document.getElementById(old);
    identity.className="rolloutMain";
   }
   identity=document.getElementById(id);
   identity.className="rolloverMain";
   document.getElementsByName("tx_myext[targetFolder]")[0].value = t;
   document.getElementsByName("tx_myext[targetID]")[0].value = id;
  }					
  function rollover(x) {					
   identity=document.getElementById(x);
   identity.className="rolloverMain";							
  }
  function rollout(x) {
   if (x != document.getElementsByName("tx_myext[targetID]")[0].value) {
    identity=document.getElementById(x);
    identity.className="rolloutMain";
   }
  }					
  function refresh() {
   refresh = document.getElementsByName("tx_myext[targetID]")[0].value;
   if (refresh) {
    identity=document.getElementById(refresh);
    identity.className="rolloverMain";
   }					
  }';

4) include the css-styles:

$this->doc->inDocStyles='
 .rolloverMain	{							
                 background-color:#e3dfdb;
  }
 .rolloutMain	{
 }
';

5) run the javascript function refresh() from the body onload() event to refresh the current element after the form was submitted:

$this->doc->bodyTagAdditions='onLoad=refresh()';	

6) make an instance of the class localPageTree from the new class definition, add icons to the tree ($ext_IconMode), set the path ($thisScript) to the script file (in web module usually index.php) and run the function getBrowsableTree(). Save the incoming data in the variable $output and wrap the result with a css box:

$treeView = t3lib_div::makeInstance('localPageTree');
$treeView->ext_IconMode = true;
$treeView->thisScript = 'index.php';		
$output = $treeView->getBrowsableTree();
$output = '<div style="width:250px;height:350px;background-color:#f7f3ef;margin-right:14px">'.$output.'</div>';

DISCUSS: There has to be a call to $treeView->init() before calling $treeView->getBrowsableTree().

7) include 2 conditionals in the main function to check the incoming data. In the form include 2 hidden fields to save the cursor position ($targetID) and the id of the selected page ($targetFolder):

// get all GP data for extension
$inData = t3lib_div::_GP('tx_myext');			
		
if ($inData['targetFolder'] != "") {
 $targetFolder = $inData['targetFolder'];		
}
if ($inData['targetID'] != "") {
 $targetID = $inData['targetID'];
}

...
 
$row[] = '<input type="hidden" name="tx_myext[targetFolder]" value="'.$targetFolder.'" />';		
$row[] = '<input type="hidden" name="tx_myext[targetID]" value="'.$targetID.'" />';