First, do a simple look at the file features, files and folders are displayed, but double-click the folder can display the next level of subdirectories, double-click Back to the previous level to return to the previous level of the directory
(1) First, you need to manage the file traversal, you can add a style
$dname = "./dist"; Open the Directory Resource $dir=opendir ($dname), while ($n =readdir ($dir)) {$url = $dname. " /". $n;//spelling a path if ($n! =". "&& $n! =" ... ") {if (Is_dir ($url))//Determine if the path is not directory {echo "<div class= ' file Mulu ' lj= ' {$url} ' >{$n}</div>";//if it is a directory, enter this, name, Double-click this to enter the next subdirectory}else{echo "<div class= ' file ' lj= ' {$url} ' >{$n}</div>";//if it is not a directory, put it there. }}}//Close Directory Resource Closedir ($DIR);
Add styles to the traversed directories and files
*{margin:0px auto;padding:0px}.file{width:50%; height:30px; border:1px solid #60F}.mulu{background-color: #639; color: #FFF}.mulu:hover{cursor:pointer}.prev{background-color:# 09F; Color: #906}.prev:hover{cursor:pointer}
Look at the effect: with the background color is the directory folder, representing the following files, you need to double-click the event to open the next step; no background color is pure file
(2) Add an event to the directory in the traversed file (double-click the directory to open the subdirectory)
<script type= "Text/javascript" >//Locate this directory, and then double-click the event $ (". Mulu"). DblClick (function () {var url=$ (this). attr ("LJ"); /Click this directory to find the path to this directory $.ajax ({URL: "wjcl.php", Data:{url:url},type: "POST", DataType: "TEXT", success:function (data) { Window.location.href= "wenjianjia.php";//Refresh Page})})
(3) The processing of the page writing (can not use post or get to pass value, the session will be passed the value of the value)
<?phpsession_start (); $url = $_post["url"];$_session["url"]= $url;
(4) After the end of the processing page, also to open the session on the main page, but also to determine whether the value is empty, because just start to manage the page does not "return to the upper level", so to judge
Session_Start ();//file name to display $dname= "./dist"; if (!empty ($_session["url"])) { $dname = $_session["url"];}
(5) Output "Back to top level" div
$fuji = DirName ($dname); if ($dname! = "./dist") {echo "<div class= ' file prev ' lj= ' {$fuji} ' > Return to the top </div>";}
The first open is not returned to the upper level of this column
When you open a folder, you have it.
(6) Now that you have this column, you can use this column to return to the previous level of the table of contents, we can give this div double-click event, let it return
$ (". Prev"). DblClick (function () { var url = $ (this). attr ("LJ"); $.ajax ({ URL: "wjcl.php", Data:{url:url}, type: "POST", dataType: "TEXT", success:function ( Data) { window.location.href = "wenjianjia.php"; }} )})
This allows you to double-click to return to the top level directory.
Second, further management of the file, you can create a new file in this folder
(1) Just write a text box and add a New button
<div id= "Kuangjia" ><input type= "text" id= "name"/><input type= "button" value= "Create" id= "new"/></ Div>
(2) Write Click event for button
$ ("#delete"). Click (function () { var LJ = $ (this). attr ("LJ");//alert (LJ); $.ajax ({ URL: "deletecl.php", Data:{lj:lj}, type: "POST", dataType: "TEXT", success:function ( Data) { window.location.href = "wenjianjia.php"; }} )})
(3) Processing page for new file
<?phpsession_start (); Open session$name = $_post["name"]; Gets the name passed in $url = $_session["url"]; Saved path location $dname = $url. " /". $name; Spell Save Path Touch ($dname); New file Method Touch ()
Effect:
We add a
This creates the.
Third, the next management function, delete the unwanted files
(1) Add Delete button, in traverse file that add Delete button
echo "<div class= ' file ' lj= ' {$url} ' >{$n}<input type= ' button ' value= ' delete ' lj= ' {$url} ' class= ' delete '/></ Div> "; A name, add a style to him, you can make him look a little bit, but also for the following Add event
The added style
. delete{Float:right} //floating again
Remove the display effect when the button is added
(2) Add a click event to a button
$ (". Delete"). Click (function () { var LJ = $ (this). attr ("LJ");//alert (LJ); $.ajax ({ URL: "deletecl.php", Data:{lj:lj}, type: "POST", dataType: "TEXT", success:function ( Data) { window.location.href = "wenjianjia.php"; }} )})
(3) Delete the page is very simple, is to find this value, delete the file method can be deleted
<?PHP$LJ = $_post["LJ"];unlink ($LJ); Methods for deleting Files unlink ()?>
To see the effect, delete the file you created earlier
Administration of PHP files