unordered list replace bullet by image according to level, if last level text as link

Peuplarchie · 01-31-2010, 04:19 PM

Good day to you all,
I was wondering if there is a way to change the the look of wach level of a list.

Ex:

Last level, text = link
1st level, has 1 image instead of bullet and text in bold
2nd level as another image as bullet and text in bold
3rd level, if not last level, as another image as bullet and text in bold\

Here is where I'm now :

PHP Code:


			

<html>
<head>
<style type="text/css">
ul {
      list-style-image: url(Icons/open_book_icon.jpg);
}

li {
      list-style-image: url(Icons/box_icon.png);
}


</style>
</head>
<body>



<?PHP
function globDir($dir)
{
   $files = glob("$dir/*", GLOB_ONLYDIR);
   
     if(!empty($files))
   {
      echo "<ul>\n";

      foreach($files as $file)
      {
         echo "<li><b>". basename($file)."</b>\n";
         globDir($file);
         echo "</li>\n";
      }
      echo "</ul>\n";
   }
}
globDir('Photos');
?>

</body>
</html>

Thanks !

delayedinsanity · 01-31-2010, 08:05 PM

css Code:

ul { } # level one
ul ul { } # level two
# and so on

You can nest CSS rules as deep as you nest the HTML.

Peuplarchie · 01-31-2010, 09:36 PM

What I really tried to obtain is :

Folder that has folder in them use one icon
Folder that has files it them use another icon

Can I do it ?

andformore · 02-01-2010, 03:38 AM

But this should work:

PHP Code:


			
<html>

<head>

  <title>Dir Test</title>

<style type="text/css">

li {

  color:green;

}



li.empty{

  color:red;

}





</style>

</head>

<body>



<?PHP



  function hasFolders($dir){

    $hasFolders = false;



    $files = glob("$dir/*", GLOB_ONLYDIR);



    if(!empty($files))

    {

      $hasFolders = true;

    }

    

    return $hasFolders;

  }





  function globDir($dir)

  {

    $files = glob("$dir/*", GLOB_ONLYDIR);



    if(!empty($files))

    {

      echo "<ul>\n";



      foreach($files as $file)

      {

        echo "<li ". (( hasFolders($file) ) ? "" : "class=\"empty\"") ."><b>" . basename($file)."</b>\n";

        globDir($file);

        echo "</li>\n";

      }

      echo "</ul>\n";

    }

  }



  $baseDir = "Photos";

  globDir($baseDir);

?>



</body>

</html>

As you see, its not dealing with icons, just changing colors, but that is easy enough to change with css.

Also, it is not checking for files existing, only directories, but you should be able to figure that out if you need it. If not, let me know