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

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>  

 

JQuery文件浏览器插件使用示例_第1张图片

 

你可能感兴趣的:(html,jquery,浏览器,function,float,stylesheet)