簡陋的源碼閱讀的app
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="js/highlight.pack.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<!--
作者：dmw
時間：2018-11-19
描述：頁面啓動立即加載h5plus
-->
<script src="html5plus://ready"></script>
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/googlecode.css">
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-left {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #fff;
}
</style>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-action-menu">
<!--側滑菜單部分-->
<aside id="offCanvasSide" class="mui-off-canvas-left">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">搜索</div>
<div class="content">
<div class="mui-input-row mui-search">
<input type="search" id="searchInput" class="mui-input-clear" placeholder="">
</div>
<ul id="searchUl" class="mui-table-view" hidden="hidden">
</ul>
<p style="margin: 10px 15px;">
<button type="button" onclick="find()" class="mui-btn mui-btn-primary mui-icon mui-icon-search">
搜索
</button>
</p>
</div>
<div class="title" style="margin-bottom: 25px;">列表</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" id="tabul">
<!--<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li>-->
</ul>
</div>
</div>
</aside>
<!--主界面部分-->
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">關閉</a>
<div class="mui-title">
<div>
</header>
<div class="mui-content mui-scroll-wrapper" >
<pre class="java">
<code id="java_code">
</code>
</pre>
<!--<div class="mui-scroll">
<div class="mui-content-padded">
</div>
</div>-->
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script>
var javaFullPath;
var javaEtc = ".java";
var name_fullpath = {};
var fullname_fullPath = {};
ui_init();
check();
function check(){
io_init();
}
function find(){
var v = document.getElementById("searchInput").value;
if (v.length > 0){
var name = v + javaEtc;
fullpath_arr = name_fullpath[name];
if (fullpath_arr == null){
alert("沒有該JAVA類");
} else {
var searchUlHtml = "";
for (var i = 0;i<fullpath_arr.length;i++) {
var fullName = getFullName(fullpath_arr[i]);
fullname_fullPath[fullName] = fullpath_arr[i];
var searchLi = "<li class='mui-table-view-cell' onclick='readFileAndAddTab(this.innerHTML)'>"+fullName+"</li>"
searchUlHtml = searchUlHtml + searchLi;
document.getElementById("searchUl").innerHTML = searchUlHtml;
}
document.getElementById("searchUl").hidden = false
}
}
}
/*var fullpath = fullpath_arr[0];
var content = readFile(fullpath);
var i = document.getElementById("java_code");
i.innerHTML = content;
hljs.highlightBlock(i);*/
function pre(){
//取消瀏覽器的所有事件，使得active的樣式在手機上正常生效
document.addEventListener('touchstart',function(){
return false;
},true);
// 禁止選擇
document.oncontextmenu=function(){
return false;
};
// DOMContentLoaded事件處理
document.addEventListener('DOMContentLoaded');
}
function ui_init(){
mui.init();
/**
* 如果mui-scroll-wrapper內容太長，可以滑動，且速率是0.0005
*/
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，默認值0.0006
});
}
function io_init(){
plus.io.requestFileSystem( plus.io.PRIVATE_WWW, function( fs ) {
// 可通過fs操作PRIVATE_WWW文件系統
var root_DirectoryEntry = fs.root;
root_DirectoryEntry.getDirectory( "/source/java",{}, function( java_DirectoryEntry ){
javaFullPath = java_DirectoryEntry.fullPath;
load_java(java_DirectoryEntry);
}, function () {
alert( e.message );
} );
}, function ( e ) {
alert( "Request file system failed: " + e.message );
} );
}
var fileReader = new plus.io.FileReader();
function readFileAndAddTab(a){
readFile(a);
addTab(a);
}
function readFile(a){
document.getElementById("searchUl").hidden = true
var fullpath = fullname_fullPath[a];
plus.io.requestFileSystem( plus.io.PRIVATE_WWW, function( fs ) {
// 可通過fs操作PRIVATE_WWW文件系統
fs.root.getFile(fullpath,{}, function(fileEntry){
fileEntry.file( function(file){
fileReader.readAsText(file, 'utf-8');
fileReader.onloadend = function(evt) {
var content = evt.target.result;
var i = document.getElementById("java_code");
i.innerHTML = content;
hljs.highlightBlock(i);
file.close();
}
} );
},function(re){
alert(re.message)
});
}, function ( e ) {
alert( "Request file system failed: " + e.message );
} );
}
function addTab(a){
var tabulHtml = document.getElementById("tabul").innerHTML;
tabulHtml = '<li class="mui-table-view-cell"><a class="mui-navigate-right" onclick="readFile(this.innerHTML)">'+a+'</a></li>' +tabulHtml ;
document.getElementById("tabul").innerHTML = tabulHtml;
}
/**
* 根據路徑獲取全類名
* @param {Object} fullPath
*/
function getFullName(fullPath){
return new String(fullPath)
.substring(javaFullPath.length)
//正則匹配所有的"/"
.replace(/\//g,".");
}
/**
* 可以這樣理解DirectoryEntry和FileEntry.
* 文件屬性的接口Entry.
* DirectoryEntry和FileEntry都實現了該接口.
* 如果是文件夾,則自動是DirectoryEntry.如果是文件,則自動是FileEntry
* DirectoryEntry|FileEntry是可以互相轉換的.
*
* @param {Object} de
*/
function load_java(de){
//獲取目錄讀流
var de_DirectoryReader = de.createReader();
//獲取子文件
de_DirectoryReader.readEntries( function( entries ){
for(var i=0; i < entries.length; i++ ) {
//子文件
var child_Entry = entries[i];
var full_path = child_Entry.fullPath;
var name = child_Entry.name;
if (child_Entry.isDirectory){
//如果是目錄,則遞歸執行
load_java(child_Entry);
}else{
//如果是文件,拿到文件的全名
var fullpath_arr = name_fullpath[name];
if (fullpath_arr == null){
fullpath_arr = new Array();
fullpath_arr[0] = full_path;
}else {
fullpath_arr[fullpath_arr.length] = full_path;
}
name_fullpath[name] = fullpath_arr;
}
}
}, function ( e ) {
alert( "Read entries failed: " + e.message );
} );
}
</script>
</body>
</html>