JQuery文件浏览器插件使用示例

来源：互联网发布：在淘宝卖鞋需要多少钱编辑：程序博客网时间：2024/06/05 23:47
index.jsp:
[java] view plaincopyprint?
<%@page contentType="text/html" pageEncoding="utf-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
                       "http://www.w3.org/TR/html4/loose.dtd">  
<!-- jqueryFileTree.jsp上加上了contentType和pageEncoding用于解决读取到的目录或文件名称中文乱码问题 -->  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>JQuery文件浏览器插件示例</title>  
    <!-- 由 于css和图片没有放在css代码中可读的图片路径下,所在这里的css读取图片路径的代码改成适应本示例路径 -->  
    <link type="text/css" rel="stylesheet" href="style/jqueryFileTree.css" mce_href="style/jqueryFileTree.css"></link>  
    <mce:style type="text/css"><!--  
   
            BODY,  
            HTML {  
                padding: 0px;  
                margin: 0px;  
            }  
            BODY {  
                font-family: Verdana, Arial, Helvetica, sans-serif;  
                font-size: 11px;  
                background: #EEE;  
                padding: 15px;  
            }  
            H2 {  
                font-family: Georgia, serif;  
                font-size: 16px;  
                font-weight: normal;  
                margin: 0px 0px 10px 0px;  
            }  
              
            .example {  
                float: center;  
                margin: 215px;  
            }  
              
            .show {  
                width: 250px;  
                height: 600px;  
                border-top: solid 1px #BBB;  
                border-left: solid 1px #BBB;  
                border-bottom: solid 1px #FFF;  
                border-right: solid 1px #FFF;  
                background: #FFF;  
                overflow: scroll;  
                padding: 5px;  
            }  
          
--></mce:style><style type="text/css" mce_bogus="1">   
            BODY,  
            HTML {  
                padding: 0px;  
                margin: 0px;  
            }  
            BODY {  
                font-family: Verdana, Arial, Helvetica, sans-serif;  
                font-size: 11px;  
                background: #EEE;  
                padding: 15px;  
            }  
            H2 {  
                font-family: Georgia, serif;  
                font-size: 16px;  
                font-weight: normal;  
                margin: 0px 0px 10px 0px;  
            }  
              
            .example {  
                float: center;  
                margin: 215px;  
            }  
              
            .show {  
                width: 250px;  
                height: 600px;  
                border-top: solid 1px #BBB;  
                border-left: solid 1px #BBB;  
                border-bottom: solid 1px #FFF;  
                border-right: solid 1px #FFF;  
                background: #FFF;  
                overflow: scroll;  
                padding: 5px;  
            }  
        </style>   
      
    <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>  
    <!-- 打开和关闭文件夹时的动画效果要依赖下面的两个js库 -->  
    <mce:script type="text/javascript" src="js/jquery.easing.1.3.js" mce_src="js/jquery.easing.1.3.js"></mce:script>  
    <mce:script type="text/javascript" src="js/jquery.easing.compatibility.js" mce_src="js/jquery.easing.compatibility.js"></mce:script>  
    <mce:script type="text/javascript" src="js/jqueryFileTree.js" mce_src="js/jqueryFileTree.js"></mce:script>  
    <mce:script type="text/javascript"><!--  
        $(document).ready( function() {  
            $('#show').fileTree({  
                root: 'E:/',//指定加载文件的路径  
                script: 'jqueryFileTree.jsp',  
                expandSpeed: 750,  
                collapseSpeed: 750,  
                multiFolder: false,  
                expandEasing: 'easeOutBounce', //打开时的动画效果  
                collapseEasing: 'easeOutBounce',//关闭时的动画效果  
                loadMessage:'正在加载中...'  
            }, function(file) {  
                //点击文件后的回调函数,自己可实现要的逻辑  
                alert(file);  
            });  
        });  
      
// --></mce:script>  
  </head>  
  <body>  
    <div class="example">   
            <h2>JQuery文件浏览器插件示例</h2>   
            <div id="show" class="show"></div>   
    </div>   
  </body>  
</html>   
0 0