|
|
@@ -4,370 +4,590 @@
|
|
|
<meta charset="utf-8" />
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
|
- <link rel="bookmark" href="favicon.ico" type="image/x-icon" />
|
|
|
+ <link rel="bookmark" href="favicon.ico" type="image/x-icon" />
|
|
|
<title>2023年中国航油-管理年鉴</title>
|
|
|
+ <link rel="stylesheet" href="css/mui.min.css">
|
|
|
<link rel="stylesheet" href="css/reset.css" />
|
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
|
<style>
|
|
|
- .m-artical-action-mid{
|
|
|
+ .m-artical-action-mid {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
height: 40%;
|
|
|
top: 30%;
|
|
|
z-index: 9998;
|
|
|
}
|
|
|
+
|
|
|
+ #muluList {
|
|
|
+ /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/
|
|
|
+ margin-top: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #muluList,
|
|
|
+ #muluList .mui-table-view,
|
|
|
+ .list-li-a,
|
|
|
+ .mui-table-view-cell>a:not(.mui-btn).mui-active {
|
|
|
+ background-color: #e9dfc7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highChapter {
|
|
|
+ color: red !important;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <!--中间点击层-->
|
|
|
- <div class="m-artical-action">
|
|
|
- <div class="m-artical-action-mid" id="action_mid"></div>
|
|
|
- </div>
|
|
|
- <!--顶部导航-->
|
|
|
- <div class="nav-top" id="nav_top" style="display: none;">
|
|
|
- <div class="nav_container">
|
|
|
- <div class="nav_return"></div>
|
|
|
- <div class="nav_text" id="nav_text">返回书架</div>
|
|
|
+ <div>
|
|
|
+ <!--中间点击层-->
|
|
|
+ <div class="m-artical-action">
|
|
|
+ <div class="m-artical-action-mid" id="action_mid"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!--主体内容-->
|
|
|
- <div class="container">
|
|
|
- <div class="Content">
|
|
|
+ <!--顶部导航-->
|
|
|
+ <div class="nav-top" id="nav_top" style="display: none;">
|
|
|
+ <div class="nav_container">
|
|
|
+ <div class="nav_return nav_back_book"></div>
|
|
|
+ <div class="nav_text nav_back_book" id="nav_text">返回书架</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--主体内容-->
|
|
|
+ <header id="header" class="top_mulu_box">
|
|
|
+ <div class="top_mulu_return nav_back_book">
|
|
|
+ < </div>
|
|
|
+ <div class="top_mulu_text nav_back_book" id="ChapterTitle"></div>
|
|
|
+ </header>
|
|
|
+ <div class="container">
|
|
|
+ <div class="Content">
|
|
|
|
|
|
|
|
|
- </div>
|
|
|
- <div class="page_btn">
|
|
|
+ </div>
|
|
|
+ <div class="page_btn">
|
|
|
<button class="btn-prev" id="btn_prev">上一页</button>
|
|
|
<button class="btn-next" id="btn_next">下一页</button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!--底部导航栏 -->
|
|
|
- <div class="nav-bottom" id="nav_bottom" style="display: none;">
|
|
|
- <div class="btn-mulu">
|
|
|
- <div class="mulu">
|
|
|
- <div class="icon_mulu"> </div>
|
|
|
- <div class="text_mulu">目录</div>
|
|
|
+ <!--底部导航栏 -->
|
|
|
+ <div class="nav-bottom" id="nav_bottom" style="display: none;">
|
|
|
+ <div class="btn-mulu">
|
|
|
+ <div class="mulu">
|
|
|
+ <div class="icon_mulu" id="icon_mulu"> </div>
|
|
|
+ <div class="text_mulu">目录</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="btn_Aa">
|
|
|
- <div class="Aa">
|
|
|
- <div class="icon-Aa" id="icon_Aa"> </div>
|
|
|
- <div class="text_Aa">字体</div>
|
|
|
+ <div class="btn_Aa">
|
|
|
+ <div class="Aa">
|
|
|
+ <div class="icon-Aa" id="icon_Aa"> </div>
|
|
|
+ <div class="text_Aa">字体</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="btn-yejian">
|
|
|
- <div class="yejian">
|
|
|
- <div class="icon-yejian" id="icon_yejian"> </div>
|
|
|
- <div class="text_yejian">夜间</div>
|
|
|
+ <div class="btn-yejian">
|
|
|
+ <div class="yejian">
|
|
|
+ <div class="icon-yejian" id="icon_yejian"> </div>
|
|
|
+ <div class="text_yejian">夜间</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!--字体功能栏-->
|
|
|
- <div class="fontPop" id="font_Pop" style="display: none;">
|
|
|
- <div class="fontSize">
|
|
|
- <span>字号</span>
|
|
|
- <button class="btnBig" id="btn_Big">大</button>
|
|
|
- <button class="btnSmall" id="btn_Small">小</button>
|
|
|
- </div>
|
|
|
- <div class="fontBk">
|
|
|
- <span>背景</span>
|
|
|
- <div class="bkColor">
|
|
|
- <div class="bk-container" style="background-color: #f7eee5;">
|
|
|
- <div id="mb"><span > 米白 </span></div>
|
|
|
+ <!--字体功能栏-->
|
|
|
+ <div class="fontPop" id="font_Pop" style="display: none;">
|
|
|
+ <div class="fontSize">
|
|
|
+ <span>字号</span>
|
|
|
+ <button class="btnBig" id="btn_Big">大</button>
|
|
|
+ <button class="btnSmall" id="btn_Small">小</button>
|
|
|
</div>
|
|
|
- <div class="bk-container" style="background-color: #e9dfc7;">
|
|
|
- <div id="zz"><span > 纸张 </span></div>
|
|
|
+ <div class="fontBk">
|
|
|
+ <span>背景</span>
|
|
|
+ <div class="bkColor">
|
|
|
+ <div class="bk-container" style="background-color: #f7eee5;">
|
|
|
+ <div id="mb"><span> 米白 </span></div>
|
|
|
+ </div>
|
|
|
+ <div class="bk-container" style="background-color: #e9dfc7;">
|
|
|
+ <div id="zz"><span> 纸张 </span></div>
|
|
|
+ </div>
|
|
|
+ <div class="bk-container" style="background-color: #a4a4a4;">
|
|
|
+ <div id="qh"><span> 浅灰 </span></div>
|
|
|
+ </div>
|
|
|
+ <div class="bk-container" style="background-color: #cdefce;">
|
|
|
+ <div id="hy"><span> 护眼 </span></div>
|
|
|
+ </div>
|
|
|
+ <div class="bk-container" style="background-color: #283548;">
|
|
|
+ <div id="hl"><span> 海蓝 </span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="bk-container" style="background-color: #a4a4a4;">
|
|
|
- <div id="qh"><span > 浅灰 </span></div>
|
|
|
- </div>
|
|
|
- <div class="bk-container" style="background-color: #cdefce;">
|
|
|
- <div id="hy"><span > 护眼 </span></div>
|
|
|
+ </div>
|
|
|
+ <!-- 目录 -->
|
|
|
+ <div class="muluBox" id="mulu_Box" style="display: none;">
|
|
|
+ <div class="muluMask" id="mulu_Mask">
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="bk-container" style="background-color: #283548;">
|
|
|
- <div id="hl"><span > 海蓝 </span></div>
|
|
|
+ <div class="muluCons" id="mulu_Cons">
|
|
|
+ <div class="title"
|
|
|
+ style="margin-bottom: 25px;display: flex;justify-content: space-between;align-items: center;">
|
|
|
+ <div>共<span id="ChapterTotal"></span>章</div>
|
|
|
+ <div>倒叙/正序</div>
|
|
|
+ </div>
|
|
|
+ <div class="mui-content">
|
|
|
+ <ul id="muluList" class="mui-table-view mui-table-view-chevron">
|
|
|
+
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <script type="text/javascript" src="js/jquery.min.js" ></script>
|
|
|
- <script type="text/javascript" src="js/jquery.jsonp.js" ></script>
|
|
|
- <script type="text/javascript" src="js/jquery.base64.js" ></script>
|
|
|
+
|
|
|
+ <script src="js/mui.min.js"></script>
|
|
|
+ <script type="text/javascript" src="js/jquery.min.js"></script>
|
|
|
+ <script type="text/javascript" src="js/jquery.jsonp.js"></script>
|
|
|
+ <script type="text/javascript" src="js/jquery.base64.js"></script>
|
|
|
<script>
|
|
|
- var Dom={
|
|
|
- font_Pop: $("#font_Pop"),
|
|
|
- nav_top:$("#nav_top"),
|
|
|
- nav_bottom:$("#nav_bottom"),
|
|
|
- icon_Aa:$("#icon_Aa"),
|
|
|
- body:$("body"),
|
|
|
- win:$(window),
|
|
|
- icon_yejian:$("#icon_yejian"),
|
|
|
- btn_Big:$("#btn_Big"),
|
|
|
- btn_Small:$("#btn_Small")
|
|
|
+ //移动设备的高度
|
|
|
+ let deviceHeight = document.documentElement.clientHeight;
|
|
|
+ // $('.container').css('height', deviceHeight+'px')
|
|
|
+ //
|
|
|
+ var Dom = {
|
|
|
+ font_Pop: $("#font_Pop"),
|
|
|
+ nav_top: $("#nav_top"),
|
|
|
+ nav_bottom: $("#nav_bottom"),
|
|
|
+ icon_Aa: $("#icon_Aa"),
|
|
|
+ body: $("body"),
|
|
|
+ win: $(window),
|
|
|
+ icon_yejian: $("#icon_yejian"),
|
|
|
+ btn_Big: $("#btn_Big"),
|
|
|
+ btn_Small: $("#btn_Small"),
|
|
|
+ icon_mulu: $("#icon_mulu"),
|
|
|
+ mulu_Box: $("#mulu_Box"),
|
|
|
+ mulu_Mask: $("mulu_Mask"),
|
|
|
+ mulu_Cons: $("#mulu_Cons"),
|
|
|
+ muluList: $("#muluList")
|
|
|
}
|
|
|
+ //数据层的初始化
|
|
|
+ var RootContainer = $('.Content');
|
|
|
+ var readerUIFrame = ReaderBaseFrame(RootContainer);
|
|
|
+ var readerMuluFrame = ReaderMuluFrame(Dom.muluList)
|
|
|
|
|
|
- //数据层的初始化
|
|
|
- var RootContainer = $('.Content');
|
|
|
- var readerUIFrame = ReaderBaseFrame(RootContainer);
|
|
|
+ var File_id = 0;
|
|
|
+ var Chapter_id = 0;
|
|
|
+ var ChapterTotal = 0;
|
|
|
+ var ChapterList = [];
|
|
|
|
|
|
- var readerm=ReaderModel();
|
|
|
- readerm.init(function(data){
|
|
|
- readerUIFrame(data);
|
|
|
- });
|
|
|
- //业务事件的初始化
|
|
|
- EventHandler();
|
|
|
|
|
|
+ var readerm = ReaderModel();
|
|
|
+ readerm.init(function(data, mulu) {
|
|
|
+ readerUIFrame(data);
|
|
|
+ ChapterList = mulu;
|
|
|
+ readerMuluFrame(mulu);
|
|
|
+ });
|
|
|
+ //业务事件的初始化
|
|
|
+ EventHandler();
|
|
|
|
|
|
- var Util=(function(){//封装的本地存储和json数据解析
|
|
|
+
|
|
|
+ var Util = (function() { //封装的本地存储和json数据解析
|
|
|
var prefix = 'function_reader_';
|
|
|
- var StorageGetter = function(key){
|
|
|
+ var StorageGetter = function(key) {
|
|
|
return localStorage.getItem(prefix + key);
|
|
|
}
|
|
|
- var StorageSetter = function(key,val){
|
|
|
- return localStorage.setItem(prefix+key,val);
|
|
|
+ var StorageSetter = function(key, val) {
|
|
|
+ return localStorage.setItem(prefix + key, val);
|
|
|
}
|
|
|
//通过url来获取加密信息,并解密
|
|
|
- var getJsonp=function(url,callback){
|
|
|
+ var getJsonp = function(url, callback) {
|
|
|
return $.jsonp({
|
|
|
- url:url,
|
|
|
- cache:true,
|
|
|
- callback:'duokan_fiction_chapter',
|
|
|
- success:function(result){
|
|
|
+ url: url,
|
|
|
+ cache: true,
|
|
|
+ callback: 'duokan_fiction_chapter',
|
|
|
+ success: function(result) {
|
|
|
//获取加密信息,解码、转json
|
|
|
- var data=$.base64.decode(result);
|
|
|
- var json=decodeURIComponent(escape(data));
|
|
|
+ var data = $.base64.decode(result);
|
|
|
+ var json = decodeURIComponent(escape(data));
|
|
|
callback(json);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- return{
|
|
|
- getJsonp:getJsonp,
|
|
|
- StorageGetter:StorageGetter,
|
|
|
- StorageSetter:StorageSetter
|
|
|
+ return {
|
|
|
+ getJsonp: getJsonp,
|
|
|
+ StorageGetter: StorageGetter,
|
|
|
+ StorageSetter: StorageSetter
|
|
|
}
|
|
|
})();
|
|
|
|
|
|
- //背景颜色 存储记录
|
|
|
- var bkgroundcolor=Util.StorageGetter("bkgroundcolor");
|
|
|
- var bkCurrColor=Util.StorageGetter("bkgroundcolor");
|
|
|
- Dom.body.css('background-color',bkgroundcolor);
|
|
|
- //字号大小 设置存储记录
|
|
|
- var InitFontSize;
|
|
|
- InitFontSize=Util.StorageGetter("font_size");
|
|
|
- InitFontSize= parseInt(InitFontSize);
|
|
|
- if (!InitFontSize) {
|
|
|
+ //背景颜色 存储记录
|
|
|
+ var bkgroundcolor = Util.StorageGetter("bkgroundcolor");
|
|
|
+ var bkCurrColor = Util.StorageGetter("bkgroundcolor");
|
|
|
+ Dom.body.css('background-color', bkgroundcolor);
|
|
|
+ //字号大小 设置存储记录
|
|
|
+ var InitFontSize;
|
|
|
+ InitFontSize = Util.StorageGetter("font_size");
|
|
|
+ InitFontSize = parseInt(InitFontSize);
|
|
|
+ if (!InitFontSize) {
|
|
|
InitFontSize = 18;
|
|
|
}
|
|
|
- $("p").css('font-size',InitFontSize);
|
|
|
+ $("p").css('font-size', InitFontSize);
|
|
|
+
|
|
|
|
|
|
+ function ReaderBaseFrame(container) { //UI渲染层
|
|
|
|
|
|
- function ReaderBaseFrame(container){//UI渲染层
|
|
|
+ function ParseChapterData(jsonData) { //生成要展示的 html文本
|
|
|
+ let jsonObj = jsonData;
|
|
|
+ let html = "<h4>" + jsonObj.t + "</h4>";
|
|
|
+ if (jsonObj.ct) {
|
|
|
+ let hLevel = 4;
|
|
|
+ for (let i = 0; i < jsonObj.ct.length; i++) {
|
|
|
+ hLevel -= 1;
|
|
|
+ html += `<h${hLevel}>${jsonObj.ct[i]}</h${hLevel}><br/>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let i = 0; i < jsonObj.p.length; i++) {
|
|
|
+ if (Chapter_id == 0) {
|
|
|
+ html += "<div>" + jsonObj.p[i] + "</div>";
|
|
|
+ } else {
|
|
|
+ html += "<p>" + jsonObj.p[i] + "</p>";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ html = html.replace("##", )
|
|
|
+ return html;
|
|
|
+ }
|
|
|
|
|
|
- function ParseChapterData(jsonData){//生成要展示的 html文本
|
|
|
- var jsonObj=jsonData;
|
|
|
- var html="<h4>" + jsonObj.t + "</h4>";
|
|
|
- for (var i=0; i<jsonObj.p.length; i++) {
|
|
|
- html+="<p>"+jsonObj.p[i]+"</p>";
|
|
|
+ return function(data) { //返回 渲染后的结果data:解密后的json数据
|
|
|
+ container.html(ParseChapterData(data));
|
|
|
}
|
|
|
- html = html.replace("##",)
|
|
|
- return html;
|
|
|
}
|
|
|
|
|
|
- return function (data){//返回 渲染后的结果data:解密后的json数据
|
|
|
- container.html(ParseChapterData(data));
|
|
|
+ function ReaderMuluFrame(container) { //目录UI渲染层
|
|
|
+ function ParseChapterMuluData(jsonData) { //生成要展示的 html文本
|
|
|
+ let mulu = '';
|
|
|
+ for (let i = 0; i < jsonData.length; i++) {
|
|
|
+ let jsonObj = jsonData[i];
|
|
|
+ if (jsonObj.children) {
|
|
|
+ mulu +=
|
|
|
+ `<li class="mui-table-view-cell mui-collapse parentLi"><a class="mui-navigate-right list-li-a" data-id="${jsonObj.chapter_id}" href="#">${jsonObj.title}</a><ul class="mui-table-view mui-table-view-chevron">`;
|
|
|
+ for (let k = 0; k < jsonObj.children.length; k++) {
|
|
|
+ mulu += `<li class="mui-table-view-cell"><a class="mui-navigate-right list-li-a" data-id="${jsonObj.children[k].chapter_id}" href="#">
|
|
|
+ ${jsonObj.children[k].title}</a></li>`;
|
|
|
+ }
|
|
|
+ mulu += '</ul></li>';
|
|
|
+ } else {
|
|
|
+ mulu += `<li class="mui-table-view-cell parentLi"><a class="mui-navigate-right list-li-a" data-id="${jsonObj.chapter_id}" href="#">${jsonObj.title}
|
|
|
+ </a></li>`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ mulu = mulu.replace("##", );
|
|
|
+ return mulu;
|
|
|
+ }
|
|
|
+
|
|
|
+ return function(data) { //返回 渲染后的结果data:解密后的json数据
|
|
|
+ container.html(ParseChapterMuluData(data));
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- function ReaderModel(){//数据交互层
|
|
|
- //todo 获取章节信息
|
|
|
- var Chapter_id;
|
|
|
- var ChapterTotal;
|
|
|
- var init=function(Uicallback){//初始化 信息
|
|
|
- getFictionInfo(function(){
|
|
|
- getCurChaptInfo(Chapter_id,function(data){
|
|
|
- //todo
|
|
|
- Uicallback&&Uicallback(data);
|
|
|
+
|
|
|
+ function ReaderModel() { //数据交互层
|
|
|
+ //todo 获取章节信息
|
|
|
+ var init = function(Uicallback) { //初始化 信息
|
|
|
+ getFictionInfo(function(mulu) {
|
|
|
+ getCurChaptInfo(Chapter_id, function(data) {
|
|
|
+ //todo
|
|
|
+ Uicallback && Uicallback(data, mulu);
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
- };
|
|
|
-
|
|
|
- var getFictionInfo=function(callback){//获取所有章节摘要信息
|
|
|
- $.get('data/chapter.json',function(data){
|
|
|
- //todo 获取章节信息之后的回调
|
|
|
- Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
|
|
|
- if (Chapter_id == null|| !Chapter_id) {
|
|
|
- Chapter_id=data.chapters[1].chapter_id;
|
|
|
- }
|
|
|
- //Chapter_id=data.chapters[1].chapter_id;
|
|
|
- ChapterTotal=data.chapters.length;
|
|
|
- callback&&callback();
|
|
|
- },'json');
|
|
|
- };
|
|
|
-
|
|
|
- var getCurChaptInfo=function(Chapter_id,callback){//获取当前Chapter_id章节详细信息
|
|
|
- $.get('data/data'+Chapter_id+'.json',function(data){
|
|
|
- //todo 获取详细信息之后的回调
|
|
|
- if(data.result == 0){
|
|
|
- // var url=data.jsonp;
|
|
|
- // Util.getJsonp(url,function(data){
|
|
|
+ };
|
|
|
+
|
|
|
+ var getFictionInfo = function(callback) { //获取所有章节摘要信息
|
|
|
+ $.get('data/chapter.json', function(data) {
|
|
|
+ //todo 获取章节信息之后的回调
|
|
|
+ Chapter_id = parseInt(Util.StorageGetter("ChapterId"));
|
|
|
+ File_id = parseInt(Util.StorageGetter("FileId"));
|
|
|
+ let list = data.chapters;
|
|
|
+ for (let i = 0; i < list.length - 1; i++) {
|
|
|
+ if (!isFinite(Chapter_id) && list[i].type !== 'file') {
|
|
|
+ Chapter_id = list[i].chapter_id;
|
|
|
+ File_id = list[i].file_id
|
|
|
+ }
|
|
|
+ if (list[i].children) {
|
|
|
+ ChapterTotal += list[i].children.length
|
|
|
+ if (!isFinite(Chapter_id)) {
|
|
|
+ Chapter_id = list[i].children[0].chapter_id;
|
|
|
+ File_id = list[i].children[0].file_id
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback && callback(list);
|
|
|
+ }, 'json');
|
|
|
+ };
|
|
|
+
|
|
|
+ var getCurChaptInfo = function(Chapter_id, callback) { //获取当前Chapter_id章节详细信息
|
|
|
+ $.get('data/data' + Chapter_id + '.json', function(data) {
|
|
|
+ //todo 获取详细信息之后的回调
|
|
|
+ if (data.result == 0) {
|
|
|
+ // var url=data.jsonp;
|
|
|
+ // Util.getJsonp(url,function(data){
|
|
|
callback && callback(data);
|
|
|
- // });//通过url来获取加密信息,并解密
|
|
|
+ $("#ChapterTitle").text(data.t);
|
|
|
+ // });//通过url来获取加密信息,并解密
|
|
|
+ }
|
|
|
+ }, 'json');
|
|
|
+ };
|
|
|
+
|
|
|
+ var prveChapter = function() { //上一页
|
|
|
+ Chapter_id = parseInt(Chapter_id);
|
|
|
+ if (Chapter_id == 0) {
|
|
|
+ return;
|
|
|
}
|
|
|
- },'json');
|
|
|
- };
|
|
|
+ Chapter_id -= 1;
|
|
|
+ //调用方法获取 Chapter_id章节信息
|
|
|
+ getCurChaptInfo(Chapter_id, function(data) {
|
|
|
+ readerUIFrame(data); //渲染html数据
|
|
|
+ });
|
|
|
+ Util.StorageSetter("ChapterId", Chapter_id);
|
|
|
+ //
|
|
|
+ for (let item of ChapterList) {
|
|
|
+ if (item.type === 'file') {
|
|
|
+ let obj = item.children.find(child => child.chapter_id == Chapter_id)
|
|
|
+ if (obj) {
|
|
|
+ File_id = obj.file_id
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (Chapter_id === item.chapter_id) {
|
|
|
+ File_id = item.file_id
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ Util.StorageSetter("FileId", File_id);
|
|
|
+ };
|
|
|
+ var nextChapter = function() { //下一页
|
|
|
|
|
|
- var prveChapter=function(){//上一页
|
|
|
- Chapter_id=parseInt(Chapter_id);
|
|
|
- if(Chapter_id == 0){
|
|
|
- return;
|
|
|
+ Chapter_id = parseInt(Chapter_id);
|
|
|
+ if (Chapter_id == ChapterTotal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ Chapter_id += 1;
|
|
|
+ //调用方法获取 Chapter_id章节信息
|
|
|
+ getCurChaptInfo(Chapter_id, function(data) {
|
|
|
+ //console.log(data);
|
|
|
+ readerUIFrame(data);
|
|
|
+ });
|
|
|
+ Util.StorageSetter("ChapterId", Chapter_id);
|
|
|
+ //
|
|
|
+ for (let item of ChapterList) {
|
|
|
+ console.log(item, 'item', Chapter_id)
|
|
|
+ if (item.type === 'file') {
|
|
|
+ let obj = item.children.find(child => child.chapter_id == Chapter_id)
|
|
|
+ if (obj) {
|
|
|
+ File_id = obj.file_id
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (Chapter_id === item.chapter_id) {
|
|
|
+ File_id = item.file_id
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ Util.StorageSetter("FileId", File_id);
|
|
|
+ };
|
|
|
+ var jumpChapter = function() { //跳页
|
|
|
+ Chapter_id = parseInt(Chapter_id);
|
|
|
+ if (Chapter_id == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ Chapter_id -= 1;
|
|
|
+ //调用方法获取 Chapter_id章节信息
|
|
|
+ getJumpChapterInfo(Chapter_id, function(data) {
|
|
|
+ //console.log(data);
|
|
|
+ readerUIFrame(data); //渲染html数据
|
|
|
+ });
|
|
|
+ Unit.StorageSetter("ChapterId", Chapter_id);
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ init: init,
|
|
|
+ prveChapter: prveChapter,
|
|
|
+ nextChapter: nextChapter,
|
|
|
+ jumpChapter: jumpChapter,
|
|
|
}
|
|
|
- Chapter_id -= 1;
|
|
|
- //调用方法获取 Chapter_id章节信息
|
|
|
- getCurChaptInfo(Chapter_id,function(data){
|
|
|
- //console.log(data);
|
|
|
- readerUIFrame(data);//渲染html数据
|
|
|
+ }
|
|
|
+
|
|
|
+ function EventHandler() { //业务事件处理层
|
|
|
+ //点击主体中间事件
|
|
|
+ $("#action_mid").click(function() {
|
|
|
+ if (Dom.nav_top.css('display') == "none") {
|
|
|
+ Dom.nav_top.show();
|
|
|
+ Dom.nav_bottom.show();
|
|
|
+ } else {
|
|
|
+ Dom.nav_top.hide();
|
|
|
+ Dom.nav_bottom.hide();
|
|
|
+ Dom.font_Pop.hide();
|
|
|
+ Dom.icon_Aa.css('border', '');
|
|
|
+ Dom.icon_yejian.css('border', '');
|
|
|
+ Dom.mulu_Box.hide();
|
|
|
+ Dom.mulu_Mask.hide();
|
|
|
+ Dom.mulu_Cons.hide();
|
|
|
+ Dom.icon_mulu.css('border', '');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //点击返回事件
|
|
|
+ // $("#nav_text").click(function(){
|
|
|
+ // window.location = "./pages/bookstand.html";
|
|
|
+ // });
|
|
|
+ $(".nav_back_book").click(function() {
|
|
|
+ window.location = "./pages/bookstand.html";
|
|
|
+ });
|
|
|
+ //点击目录事件
|
|
|
+ $(".icon_mulu").click(function() {
|
|
|
+ if (Dom.mulu_Box.css('display') == 'none') {
|
|
|
+ Dom.icon_mulu.css('border', '1px solid #FF7800');
|
|
|
+ Dom.mulu_Box.show();
|
|
|
+ Dom.nav_top.hide();
|
|
|
+ Dom.mulu_Mask.show();
|
|
|
+ Dom.mulu_Cons.show();
|
|
|
+ //章节总数赋值
|
|
|
+ $('#ChapterTotal').text(ChapterTotal)
|
|
|
+ //给当前选中章节高亮
|
|
|
+ let optDom = $(".parentLi")[File_id];
|
|
|
+ $(optDom).addClass("mui-active")
|
|
|
+ $($(optDom).find("a")).each((i, aNode) => {
|
|
|
+ if ($(aNode).data('id') == Chapter_id) {
|
|
|
+ $(aNode).addClass("highChapter")
|
|
|
+ } else {
|
|
|
+ $(aNode).removeClass("highChapter")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ Dom.icon_mulu.css('border', '');
|
|
|
+ Dom.mulu_Box.hide();
|
|
|
+ Dom.mulu_Mask.hide();
|
|
|
+ Dom.mulu_Cons.hide();
|
|
|
+ muludDelActive();
|
|
|
+ }
|
|
|
+ Dom.icon_Aa.css('border', '');
|
|
|
+ Dom.font_Pop.hide();
|
|
|
+ });
|
|
|
+ //点击字体事件
|
|
|
+ $(".btn_Aa").click(function() {
|
|
|
+ if (Dom.font_Pop.css('display') == 'none') {
|
|
|
+ Dom.icon_Aa.css('border', '1px solid #FF7800');
|
|
|
+ Dom.font_Pop.show();
|
|
|
+ } else {
|
|
|
+ Dom.icon_Aa.css('border', '');
|
|
|
+ Dom.font_Pop.hide();
|
|
|
+ }
|
|
|
+ Dom.icon_mulu.css('border', '');
|
|
|
+ Dom.mulu_Box.hide();
|
|
|
+ Dom.mulu_Mask.hide();
|
|
|
+ Dom.mulu_Cons.hide();
|
|
|
});
|
|
|
- Util.StorageSetter("ChapterId",Chapter_id);
|
|
|
- };
|
|
|
- var nextChapter=function(){//下一页
|
|
|
+ //点击夜间事件
|
|
|
+ $(".btn-yejian").click(function() {
|
|
|
+ if (Dom.body.css('background-color') != "rgb(40, 53, 72)") {
|
|
|
+ bkCurrColor = '#283548';
|
|
|
+ //$(".bkColor").find('.bk-container-current')[0].className='';
|
|
|
+ Dom.body.css('background-color', bkCurrColor);
|
|
|
+ Dom.icon_yejian.css('border', '1px #FF7800 solid');
|
|
|
+ $("#hl").addClass('bk-container-current');
|
|
|
+
|
|
|
+ } else {
|
|
|
+ bkCurrColor = '#e9dfc7';
|
|
|
+ Dom.body.css('background-color', bkCurrColor);
|
|
|
+ Dom.icon_yejian.css('border', '');
|
|
|
+ $("#hl").removeClass('bk-container-current');
|
|
|
+ $("#mb").addClass('bk-container-current');
|
|
|
+ }
|
|
|
+ Util.StorageSetter("bkgroundcolor", bkCurrColor);
|
|
|
|
|
|
- Chapter_id=parseInt(Chapter_id);
|
|
|
- if(Chapter_id == ChapterTotal){
|
|
|
- return;
|
|
|
- }
|
|
|
- Chapter_id += 1;
|
|
|
- //调用方法获取 Chapter_id章节信息
|
|
|
- getCurChaptInfo(Chapter_id,function(data){
|
|
|
- //console.log(data);
|
|
|
- readerUIFrame(data);
|
|
|
});
|
|
|
- Util.StorageSetter("ChapterId",Chapter_id);
|
|
|
- };
|
|
|
|
|
|
- return{
|
|
|
- init:init,
|
|
|
- prveChapter:prveChapter,
|
|
|
- nextChapter:nextChapter
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function EventHandler(){//业务事件处理层
|
|
|
- //点击主体中间事件
|
|
|
- $("#action_mid").click(function(){
|
|
|
- if(Dom.nav_top.css('display')=="none"){
|
|
|
- Dom.nav_top.show();
|
|
|
- Dom.nav_bottom.show();
|
|
|
- }else{
|
|
|
+ //滚动条事件
|
|
|
+ Dom.win.scroll(function() {
|
|
|
Dom.nav_top.hide();
|
|
|
Dom.nav_bottom.hide();
|
|
|
Dom.font_Pop.hide();
|
|
|
- Dom.icon_Aa.css('border','');
|
|
|
- Dom.icon_yejian.css('border','');
|
|
|
- }
|
|
|
- });
|
|
|
- //点击书架事件
|
|
|
- $("#nav_text").click(function(){
|
|
|
- window.location = "./pages/bookstand.html";
|
|
|
- });
|
|
|
- //点击字体事件
|
|
|
- $(".btn_Aa").click(function(){
|
|
|
- if (Dom.font_Pop.css('display') == 'none') {
|
|
|
- Dom.icon_Aa.css('border','1px solid #FF7800');
|
|
|
- Dom.font_Pop.show();
|
|
|
- } else{
|
|
|
- Dom.icon_Aa.css('border','');
|
|
|
- Dom.font_Pop.hide();
|
|
|
- }
|
|
|
- });
|
|
|
- //点击夜间事件
|
|
|
- $(".btn-yejian").click(function(){
|
|
|
- if (Dom.body.css('background-color')!="rgb(40, 53, 72)") {
|
|
|
- bkCurrColor='#283548';
|
|
|
- //$(".bkColor").find('.bk-container-current')[0].className='';
|
|
|
- Dom.body.css('background-color',bkCurrColor);
|
|
|
- Dom.icon_yejian.css('border','1px #FF7800 solid');
|
|
|
- $("#hl").addClass('bk-container-current');
|
|
|
-
|
|
|
- } else{
|
|
|
- bkCurrColor='#e9dfc7';
|
|
|
- Dom.body.css('background-color',bkCurrColor);
|
|
|
- Dom.icon_yejian.css('border','');
|
|
|
- $("#hl").removeClass('bk-container-current');
|
|
|
- $("#mb").addClass('bk-container-current');
|
|
|
- }
|
|
|
- Util.StorageSetter("bkgroundcolor",bkCurrColor);
|
|
|
- });
|
|
|
- //滚动条事件
|
|
|
- Dom.win.scroll(function(){
|
|
|
- Dom.nav_top.hide();
|
|
|
- Dom.nav_bottom.hide();
|
|
|
- Dom.font_Pop.hide();
|
|
|
- Dom.icon_Aa.css('border','');
|
|
|
- Dom.icon_yejian.css('border','');
|
|
|
- })
|
|
|
- //点击 大、小事件
|
|
|
- Dom.btn_Big.click(function(){
|
|
|
- if(InitFontSize>=20){
|
|
|
- return;
|
|
|
- }
|
|
|
- InitFontSize+=1;
|
|
|
- console.log(InitFontSize);
|
|
|
- $("p").css('font-size',InitFontSize);
|
|
|
- Util.StorageSetter("font_size",InitFontSize);
|
|
|
- });
|
|
|
- Dom.btn_Small.click(function(){
|
|
|
- if(InitFontSize<=12){
|
|
|
- return;
|
|
|
- }
|
|
|
- InitFontSize-=1;
|
|
|
- console.log(InitFontSize);
|
|
|
- $("p").css('font-size',InitFontSize);
|
|
|
- Util.StorageSetter("font_size",InitFontSize);
|
|
|
- });
|
|
|
- //点击背景颜色切换
|
|
|
- $(".bk-container").bind('click',function(){
|
|
|
- if ($(".bkColor").find('.bk-container-current').length>0) {
|
|
|
- $(".bkColor").find('.bk-container-current')[0].className='';
|
|
|
- } else{
|
|
|
+ Dom.mulu_Box.hide();
|
|
|
+ Dom.mulu_Mask.hide();
|
|
|
+ Dom.mulu_Cons.hide();
|
|
|
+ Dom.icon_Aa.css('border', '');
|
|
|
+ Dom.icon_yejian.css('border', '');
|
|
|
+ Dom.icon_mulu.css('border', '');
|
|
|
|
|
|
- }
|
|
|
- var id= this.firstElementChild.id;
|
|
|
- $("#"+id).addClass('bk-container-current');
|
|
|
|
|
|
- switch (id){
|
|
|
- case 'mb':
|
|
|
- Dom.body.css('background-color','#f7eee5');
|
|
|
- break;
|
|
|
+ })
|
|
|
+ //点击 大、小事件
|
|
|
+ Dom.btn_Big.click(function() {
|
|
|
+ if (InitFontSize >= 20) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ InitFontSize += 1;
|
|
|
+ console.log(InitFontSize);
|
|
|
+ $("p").css('font-size', InitFontSize);
|
|
|
+ Util.StorageSetter("font_size", InitFontSize);
|
|
|
+ });
|
|
|
+ Dom.btn_Small.click(function() {
|
|
|
+ if (InitFontSize <= 12) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ InitFontSize -= 1;
|
|
|
+ console.log(InitFontSize);
|
|
|
+ $("p").css('font-size', InitFontSize);
|
|
|
+ Util.StorageSetter("font_size", InitFontSize);
|
|
|
+ });
|
|
|
+ //点击背景颜色切换
|
|
|
+ $(".bk-container").bind('click', function() {
|
|
|
+ if ($(".bkColor").find('.bk-container-current').length > 0) {
|
|
|
+ $(".bkColor").find('.bk-container-current')[0].className = '';
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ var id = this.firstElementChild.id;
|
|
|
+ $("#" + id).addClass('bk-container-current');
|
|
|
+
|
|
|
+ switch (id) {
|
|
|
+ case 'mb':
|
|
|
+ Dom.body.css('background-color', '#f7eee5');
|
|
|
+ break;
|
|
|
case 'zz':
|
|
|
- Dom.body.css('background-color','#e9dfc7');
|
|
|
- break;
|
|
|
+ Dom.body.css('background-color', '#e9dfc7');
|
|
|
+ break;
|
|
|
case 'qh':
|
|
|
- Dom.body.css('background-color','#a4a4a4');
|
|
|
- break;
|
|
|
+ Dom.body.css('background-color', '#a4a4a4');
|
|
|
+ break;
|
|
|
case 'hy':
|
|
|
- Dom.body.css('background-color','#cdefce');
|
|
|
- break;
|
|
|
+ Dom.body.css('background-color', '#cdefce');
|
|
|
+ break;
|
|
|
case 'hl':
|
|
|
- Dom.body.css('background-color','#283548');
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- Util.StorageSetter("bkgroundcolor",Dom.body.css('background-color'));
|
|
|
- });
|
|
|
+ Dom.body.css('background-color', '#283548');
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ Util.StorageSetter("bkgroundcolor", Dom.body.css('background-color'));
|
|
|
+ });
|
|
|
|
|
|
- $("#btn_prev").click(function(){
|
|
|
- readerm.prveChapter();
|
|
|
- });
|
|
|
+ $("#btn_prev").click(function() {
|
|
|
+ readerm.prveChapter();
|
|
|
+ });
|
|
|
|
|
|
- $("#btn_next").click(function(){
|
|
|
- readerm.nextChapter();
|
|
|
- });
|
|
|
- }
|
|
|
+ $("#btn_next").click(function() {
|
|
|
+ readerm.nextChapter();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function muludDelActive() {
|
|
|
+ $(".parentLi").each((i, liNode) => {
|
|
|
+ console.log(liNode, 'li')
|
|
|
+ $(liNode).removeClass("mui-active")
|
|
|
+ $($(liNode).find("a")).each((k, aNode) => {
|
|
|
+ console.log(aNode, 'aNode', )
|
|
|
+ $(aNode).removeClass("highChapter")
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
-</html>
|
|
|
+</html>
|