TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   General (http://www.talkphp.com/general/)
-   -   unordered list replace bullet by image according to level, if last level text as link (http://www.talkphp.com/general/5244-unordered-list-replace-bullet-image-according-level-if-last-level-text-link.html)

Peuplarchie 01-31-2010 04:19 PM

unordered list replace bullet by image according to level, if last level text as link
 
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

Not the cleanest
 
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 :-)


All times are GMT. The time now is 11:12 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0