index.jsp:
- <%@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>