Posted on Saturday, 7th November 2009 by zairvai
Kali ini saya ingin berbagi bagaimana penggunaan jqueryfiletree untuk menampilkan list file yang ada pada serverside. Jquery File Tree adalah ekstensi dari jquery, untuk menjalankan client-script ini dibutuhkan :
setelah mendownload file diatas, kemudian ekstrak dengan rar atau zip lalu simpan dalam satu folder dengan file-file html. Seperti struktur dibawah ini:
./home/index.html ./home/js/jquery.js ./home/js/jqueryfiletree/<isi folder hasil ekstrak jqueryfiletree>
sesuai dengan struktur diatas :
load jqueryfiletree javascript dan jqueryfiltree css didalam tag <head>
<head> <link rel="stylesheet" type="text/css" href="js/jqueryfiletree/jqueryfiletree.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jqueryfiletree/jqueryfiletree.js"></script> </head>
lalu buat satu frame <div> didalam tag body , beri id atau class untuk jquery selector
<body> <div id="listfile"></div> </body>
panggil function filetree untuk membangun satu list file explorer, ini bisa dimasukan di dalam tag head
<script type="text/javascript">
$("document").ready(function(){
$("#listfile").fileTree({
root:'d:/files/audio/',
script:'js/jqueryfiletree/connectors/jqueryfiletree.php'
},function(file){
alert(file);
});
});
</script>
keterangan :
root : url folder pada server yang mau ditunjukan listnya,
script : file php yang digunakan untuk membaca list file dalam server
untuk keterangan option yang lain silahkan buka link ini :
http://abeautifulsite.net/2008/03/jquery-file-tree/#configuring
html selengkapnya akan jadi seperti ini
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/jqueryfiletree/jqueryfiletree.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryfiletree/jqueryfiletree.js"></script>
$("document").ready(function(){
$("#listfile").fileTree({
root:'d:/files/audio/',
script:'js/jqueryfiletree/connectors/jqueryfiletree.php'
},function(file){
alert(file);
});
});
</script>
</head>
<body>
<div id="listfile"></div>
</body>
</html>
kalau script diatas berhasil dieksekusi tampilannya akan seperti ini
tampilan file yang ada diserver
selamat mencoba, cheers
Tags: jquery, web developer
Kategori Tutorial | Comments (0)
