制作像mega.nz这样的侧边栏菜单

时间:2017-07-02 13:01:11

标签: php html sidebar

我想制作一个侧边栏菜单,如php中的网站mega.nz ..就像这样

enter image description here

我尝试过这段代码:

function foldersList($folderName = NULL) {

    $return = '';

    $globFolder = ($folderName != NULL ? $folderName : './server/'.$_SESSION['username']) . "/*";


    foreach (glob($globFolder, GLOB_ONLYDIR) as $subFolder) {

        $baseFolder = basename($subFolder) . '';
        // okay let me see
        // call function to check subfolders - don't forget write `/`
        $subFolders = foldersList($subFolder);

        $return .= '<li><a><i class="fa fa-desktop"></i>' . $baseFolder . '<span class="fa fa-chevron-down"></span></a>';
        $return .= '<ul class="nav child_menu">';

        // if subfolder exist add to return variable
        $return .= $subFolders != '' ? $subFolders : '';


        $return .= '</ul>';
        $return .= '</li>';
    }

    return $return;
}

但问题是文件夹无法识别是否在文件夹内,还有一个文件夹或有文件列表。 我想,如果文件夹里面有文件列表,请转到另一个链接 if文件夹,还有一个文件夹,下拉菜单,显示此文件夹。

2 个答案:

答案 0 :(得分:0)

要跳过仅包含文件的空文件夹或文件夹,请将功能更改为:

ToolTipService

答案 1 :(得分:0)

其他解决方案:使用一个漂亮的插件来帮助您使用树https://www.jstree.com/

编辑:添加了jstree的示例用法 将您的功能更改为:

function foldersList($folderName = NULL) {

$return = '';

$globFolder = ($folderName != NULL ? $folderName : 
  './server/'.$_SESSION['username']) . "/*";

$folders = glob($globFolder, GLOB_ONLYDIR);
$foldersArray = [];
if(!empty($folders)) {
    foreach ($folders as $subFolder) {
        $baseFolder = basename($subFolder) . '';
        // okay let me see
        // call function to check subfolders - don't forget write `/`
        $subFolders = foldersList($subFolder);


        $foldersArray[] = [
            'text' => $baseFolder,
            'children' => $subFolders
        ];
    }
}
return $foldersArray;}

这是一个带有修改函数输出的演示:https://jsfiddle.net/mrazvan/3sxh0b3c/1/

创建一个文件,运行该函数并在一个php文件中回显json输出:

echo json_encode( foldersList('path/to/folder/'));exit;

要从后端获取输出,您可以尝试使用以下JS代码:

$(function() {
 $.ajax({
   type: "GET",
   dataType: "json",
   url: "path/to/phpfile.php",
   success: function(data) {
      $('#tree-container').jstree({
        'plugins' : ['types'],
        'core' : {
          'data' : data,
          'themes' : {
            'variant' : 'medium'
          }
        }
      });
   }
  }); 
});