目录增加顶部导航入口，底部工具栏改造

bookdetail.html

@@ -50,9 +50,14 @@
 			</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>
+				<div class="top_mulu_left">
+					<div class="top_mulu_return  nav_back_book"></div>
+					<div class="top_mulu_text  nav_back_book" id="ChapterTitle"></div>
+				</div>
+				
+				<div class="top_mulu_right">
+					<div class="top_mulu_text  nav_back_book" id="topMulu">目录</div>
+				</div>
 			</header>
 			<div class="container">
 				<div class="Content">
@@ -73,30 +78,27 @@
 						<div class="text_mulu">目录</div>
 					</div>
 				</div>
-				<div class="btn-model">
+				<!-- <div class="btn-model">
 					<div class="model">
 						<div class="icon-yejian" id="icon_model"> </div>
 						<div class="text_yejian">夜间</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="text_Aa">字号</div>
 					</div>
 				</div>
-
-				<!--字体功能栏-->
-				<div class="fontPop" id="font_Pop" style="display: none;">
-					<div class="fontItem">
-						<span class="fontItemTitle">字号</span>
-						<div class="fontItemCons">
-<!--							<button class="btn_Big" id="btn_Big">大</button>
-							<button class="btn_Small" id="btn_Small">小</button>-->
-							小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min=16 max=24 step="1">大
-						</div>
+				<div class="btn-extra">
+					<div class="extra">
+						<div class="icon-extra" id="icon_extra"> </div>
+						<div class="text_extra">其他</div>
 					</div>
+				</div>
+				<!-- 其他功能栏 -->
+				<div class="extraPop" id="extra_Pop" style="display: none;">
 					<div class="fontItem">
 						<span class="fontItemTitle">背景</span>
 						<div class="fontItemCons" id="bk-list">
@@ -120,30 +122,44 @@
 								<div class="bk-container" style="background-color: #283548;"></div>
 								<span>海蓝</span>
 							</div>
-
+					
 						</div>
 					</div>
+					
 				</div>
-				<!-- 目录 -->
-				<div class="muluBox" id="mulu_Box" style="display: none;">
-					<div class="muluMask" id="mulu_Mask">
-
-					</div>
-					<div class="muluCons" id="mulu_Cons">
-						<div class="muluTitle">
-							<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 class="fontPop" id="font_Pop" style="display: none;">
+					<div class="fontItem">
+						<span class="fontItemTitle">字号</span>
+						<div class="fontItemCons">
+							<!--							<button class="btn_Big" id="btn_Big">大</button>
+							<button class="btn_Small" id="btn_Small">小</button>-->
+							小<input style="width: 80%; margin: 0 auto;" type="range" id="slider" name="slider" min=16
+								max=24 step="1">大
 						</div>
-
+					</div>	
+				</div>
+			</div>
+			
+			<!-- 目录 -->
+			<div class="muluBox" id="mulu_Box" style="display: none;">
+				<div class="muluMask" id="mulu_Mask">
+			
+				</div>
+				<div class="muluCons" id="mulu_Cons">
+					<div class="muluTitle">
+						<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>
 
@@ -159,9 +175,11 @@
 			//
 			var Dom = {
 				font_Pop: $("#font_Pop"),
+				extra_Pop:$("#extra_Pop"),
 				nav_top: $("#nav_top"),
 				nav_bottom: $("#nav_bottom"),
 				icon_Aa: $("#icon_Aa"),
+				icon_extra: $("#icon_extra"),
 				body: $("body"),
 				win: $(window),
 				icon_model: $("#icon_model"),
@@ -170,11 +188,13 @@
 				btn_Small: $("#btn_Small"),
 				icon_mulu: $("#icon_mulu"),
 				mulu_Box: $("#mulu_Box"),
+				mulu_Dialog: $("#mulu_Dialog"),
 				mulu_Mask: $("mulu_Mask"),
 				mulu_Cons: $("#mulu_Cons"),
 				muluList: $("#muluList"),
 				bkList: $("#bk-list"),
-				header: $("#header")
+				header: $("#header"),
+				ChapterDialog: $("#ChapterDialog")
 			}
 			//数据层的初始化
 			var RootContainer = $('.Content');
@@ -230,6 +250,7 @@
 			//背景颜色 存储记录
 			var bkgroundcolor = Util.StorageGetter("bkgroundcolor");
 			var bkCurrColor = Util.StorageGetter("bkgroundcolor");
+			var txtCurrColor = Util.StorageGetter("txtcolor");
 			Dom.body.css('background-color', bkgroundcolor);
 			Dom.header.css('background-color', bkCurrColor);
 			//字号大小 设置存储记录
@@ -255,7 +276,8 @@
 					}
 					let TitleFontSize = CurrFontSize + 6;
 					let RedFontSize = CurrFontSize + 2;
-					let html = "<br/><br/><br/><br/><br/><h4 style='font-size: " + TitleFontSize + "px'>" + jsonObj.t + "</h4><br/>";
+					let html = "<br/><br/><br/><br/><br/><h4 style='font-size: " + TitleFontSize + "px'>" + jsonObj.t +
+						"</h4><br/>";
 					if (jsonObj.ct) {
 						let hLevel = 4;
 						for (let i = 0; i < jsonObj.ct.length; i++) {
@@ -267,10 +289,10 @@
 						if (Chapter_id == 0) {
 							html += "<div>" + jsonObj.p[i] + "</div>";
 						} else {
-							if(jsonObj.p[i].indexOf('#') > -1) {
-								html += "<br/><h5 style='color: crimson; font-size: " + RedFontSize + "px'>" + jsonObj.p[i].replace('#','') + "</h5>";
-							}
-							else {
+							if (jsonObj.p[i].indexOf('#') > -1) {
+								html += "<br/><h5 style='color: crimson; font-size: " + RedFontSize + "px'>" + jsonObj.p[i]
+									.replace('#', '') + "</h5>";
+							} else {
 								html += "<p style='font-size: " + CurrFontSize + "px'>" + jsonObj.p[i] + "</p>";
 							}
 						}
@@ -329,8 +351,7 @@
 						File_id = parseInt(Util.StorageGetter("FileId"));
 						//选择是否从头阅读
 						if (Chapter_id !== 0) {
-							if (confirm('您要继续上次的阅读么？')) {
-							} else {
+							if (confirm('您要继续上次的阅读么？')) {} else {
 								Chapter_id = 0;
 							}
 						}
@@ -467,20 +488,9 @@
 				//点击主体中间事件
 				$("#action_mid").click(function() {
 					if (Dom.nav_top.css('display') == "none") {
-						// Dom.nav_top.show();
-						// Dom.nav_bottom.show();
-						actExtraDialog(true)
+						actNavDialog(true)
 					} else {
 						actAllDialog(false)
-						// Dom.nav_top.hide();
-						// Dom.nav_bottom.hide();
-						// Dom.font_Pop.hide();
-						// Dom.icon_Aa.css('border', '');
-						// Dom.icon_model.css('border', '');
-						// Dom.mulu_Box.hide();
-						// Dom.mulu_Mask.hide();
-						// Dom.mulu_Cons.hide();
-						// Dom.icon_mulu.css('border', '');
 					}
 				});
 				//点击返回事件
@@ -499,11 +509,24 @@
 					Chapter_id = 0;
 					readerm.jumpChapter();
 				});
-				//点击目录事件
+				//点击目录事件--顶部浮窗
+				$("#topMulu").click(function() {
+					muluShow("top")
+				});
+				//点击目录事件--底部导航
 				$(".icon_mulu").click(function() {
+					muluShow()
+				});
+				var muluShow = function(type){
 					if (Dom.mulu_Box.css('display') == 'none') {
-						// Dom.icon_mulu.css('border', '1px solid #FF7800');
+						$('body,html').addClass('notScroll');
 						Dom.mulu_Box.show();
+						if(type==='top'){
+							Dom.mulu_Box.css("bottom",0)
+						}else{
+							Dom.mulu_Box.css("bottom",70)
+						}
+						
 						Dom.nav_top.hide();
 						Dom.mulu_Mask.show();
 						Dom.mulu_Cons.show();
@@ -520,16 +543,12 @@
 							}
 						})
 					} else {
-						// Dom.icon_mulu.css('border', '');
-						// Dom.mulu_Box.hide();
-						// Dom.mulu_Mask.hide();
-						// Dom.mulu_Cons.hide();
 						muluUpdateActive();
 						actMuluDialog(false);
 					}
-					Dom.icon_Aa.css('border', '');
-					Dom.font_Pop.hide();
-				});
+					actFontDialog(false)
+					actExtraDialog(false);
+				}
 				//点击目录列表进行指定跳转
 				Dom.muluList.on("click", function(e) {
 					let cid = $(e.target).data('cid');
@@ -542,44 +561,32 @@
 					muluUpdateActive();
 					readerm.jumpChapter();
 					actAllDialog(false)
-					window.scrollTo(0,0);
+					window.scrollTo(0, 0);
 				})
-				 // 点击弹窗内容以外的地方关闭弹窗
+				// 点击弹窗内容以外的地方关闭弹窗
 				$("#mulu_Mask").on('click', function(e) {
-				    // if ($(e.target).closest('#mui-content').length > 0) {
-				    //   console.log('弹出框内部被点击了');
-				    // } else {
-				    //   console.log('弹出框以外的部分被点击了');
-				      // 关闭弹框
-				      actAllDialog(false)
-				    // }
-				  });
-				//点击字体事件
+					// if ($(e.target).closest('#mui-content').length > 0) {
+					//   console.log('弹出框内部被点击了');
+					// } else {
+					//   console.log('弹出框以外的部分被点击了');
+					// 关闭弹框
+					actAllDialog(false)
+					
+					// }
+				});
+				//点击字号事件
 				$(".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();
+					actMuluDialog(false);
+					actExtraDialog(false);
 				});
 				//滚动条事件
 				Dom.win.scroll(function() {
 					actAllDialog(false)
-					// Dom.nav_top.hide();
-					// Dom.nav_bottom.hide();
-					// Dom.font_Pop.hide();
-					// Dom.mulu_Box.hide();
-					// Dom.mulu_Mask.hide();
-					// Dom.mulu_Cons.hide();
-					// Dom.icon_Aa.css('border', '');
-					// Dom.icon_model.css('border', '');
-					// Dom.icon_mulu.css('border', '');
 				})
 				//点击 大、小事件
 				Dom.slider.change(function() {
@@ -588,8 +595,8 @@
 						return;
 					}
 					$("p").css('font-size', Number(NowFontSize));
-					$("h4").css('font-size', Number(NowFontSize)+ 6);
-					$("h5").css('font-size', Number(NowFontSize)+ 2);
+					$("h4").css('font-size', Number(NowFontSize) + 6);
+					$("h5").css('font-size', Number(NowFontSize) + 2);
 					Util.StorageSetter("font_size", Number(NowFontSize));
 				});
 				Dom.btn_Big.click(function() {
@@ -611,23 +618,34 @@
 					Util.StorageSetter("font_size", InitFontSize);
 				});
 				//点击夜间&日间 切换模式
-				Dom.icon_model.click((e) => {
-					if ($(e.target).hasClass("icon-yejian")) {
-						//日间模式转夜间模式
-						Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
-						Dom.icon_model.siblings().text("日间");
-						bkCurrColor = '#283548';
-						updateBgColor($("#hl").find(".bk-container"))
+				// Dom.icon_model.click((e) => {
+				// 	if ($(e.target).hasClass("icon-yejian")) {
+				// 		//日间模式转夜间模式
+				// 		Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
+				// 		Dom.icon_model.siblings().text("日间");
+				// 		bkCurrColor = '#283548';
+				// 		updateBgColor($("#hl").find(".bk-container"))
+
+				// 	} else {
+				// 		//夜间模式转日间模式
+				// 		Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
+				// 		Dom.icon_model.siblings().text("夜间");
+				// 		bkCurrColor = Util.StorageGetter("bkHistory");
+				// 		model = Util.StorageGetter("model") || "zz";
+				// 		updateBgColor($("#" + model).find(".bk-container"))
+				// 	}
 
+				// });
+				
+				//点击其他事件
+				$(".btn-extra").click(function() {
+					if (Dom.extra_Pop.css('display') == 'none') {
+						Dom.extra_Pop.show();
 					} else {
-						//夜间模式转日间模式
-						Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
-						Dom.icon_model.siblings().text("夜间");
-						bkCurrColor = Util.StorageGetter("bkHistory");
-						model = Util.StorageGetter("model") || "zz";
-						updateBgColor($("#" + model).find(".bk-container"))
+						Dom.extra_Pop.hide();
 					}
-
+					actMuluDialog(false);
+					actFontDialog(false);
 				});
 
 				//点击背景颜色切换
@@ -644,23 +662,23 @@
 					Dom.body.css('background-color', bkCurrColor);
 					Dom.header.css('background-color', bkCurrColor);
 					//更新日夜模式
-					let model = $(target).parent(".bk-item")[0].id;
-					if (model === 'hl') {
-						//记录夜间模式前的背景颜色和模式
-						Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
-						if (type === "bgCheck") {
-							//点击的背景颜色选择，需要更新模式  转为日间显示
-							Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
-							Dom.icon_model.siblings().text("日间");
-						}
-					} else {
-						Util.StorageSetter("model", model);
-						if (type === "bgCheck") {
-							//点击的背景颜色选择，需要更新模式  转为夜间显示
-							Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
-							Dom.icon_model.siblings().text("夜间");
-						}
-					}
+					// let model = $(target).parent(".bk-item")[0].id;
+					// if (model === 'hl') {
+					// 	//记录夜间模式前的背景颜色和模式
+					// 	Util.StorageSetter("bkHistory", Util.StorageGetter("bkgroundcolor") || "#e9dfc7");
+					// 	if (type === "bgCheck") {
+					// 		//点击的背景颜色选择，需要更新模式  转为日间显示
+					// 		Dom.icon_model.removeClass("icon-yejian").addClass("icon-rijian");
+					// 		Dom.icon_model.siblings().text("日间");
+					// 	}
+					// } else {
+					// 	Util.StorageSetter("model", model);
+					// 	if (type === "bgCheck") {
+					// 		//点击的背景颜色选择，需要更新模式  转为夜间显示
+					// 		Dom.icon_model.removeClass("icon-rijian").addClass("icon-yejian");
+					// 		Dom.icon_model.siblings().text("夜间");
+					// 	}
+					// }
 					let optDom = $(target).parent(".bk-item").siblings();
 					$(optDom).each((i, liDom) => {
 						$($(liDom).find(".bk-container")).removeClass("bk-container-current")
@@ -670,12 +688,12 @@
 
 
 				$("#btn_prev").click(function() {
-					window.scrollTo(0,0);
+					window.scrollTo(0, 0);
 					readerm.prveChapter();
 				});
 
 				$("#btn_next").click(function() {
-					window.scrollTo(0,0);
+					window.scrollTo(0, 0);
 					readerm.nextChapter();
 				});
 			}
@@ -684,6 +702,7 @@
 				actLightDialog(flag);
 				actFontDialog(flag);
 				actMuluDialog(flag);
+				actNavDialog(flag);
 				actExtraDialog(flag);
 
 			}
@@ -695,10 +714,9 @@
 					return
 				}
 				//隐藏
-				Dom.icon_model.css('border', '');
 
 			}
-			//字体设置 展示控制
+			//字号设置 展示控制
 			function actFontDialog(flag) {
 				//展示
 				if (flag) {
@@ -706,7 +724,6 @@
 				}
 				//隐藏
 				Dom.font_Pop.hide();
-				Dom.icon_Aa.css('border', '');
 
 			}
 			//目录设置 展示控制
@@ -719,12 +736,22 @@
 				Dom.mulu_Box.hide();
 				Dom.mulu_Mask.hide();
 				Dom.mulu_Cons.hide();
-				Dom.icon_mulu.css('border', '');
+				$('body,html').removeClass('notScroll');
 
 			}
-
 			//其他设置 展示控制
 			function actExtraDialog(flag) {
+				//展示
+				if (flag) {
+					return
+				}
+				//隐藏
+				Dom.extra_Pop.hide();
+			
+			}
+
+			//顶部导航+底部导航 展示控制
+			function actNavDialog(flag) {
 				//展示
 				if (flag) {
 					Dom.nav_top.show();
@@ -758,4 +785,4 @@
 		</script>
 	</body>
 
-</html>
+</html>

css/main.css

@@ -78,6 +78,7 @@ p {
 /*-----------顶部nav  end-----------*/
 
 /*-----------顶部--目录 start-----------*/
+
 .top_mulu_box {
 	cursor: pointer;
 	position: fixed;
@@ -91,14 +92,31 @@ p {
 	border-bottom: 0;
 	display: flex;
 	align-items: center;
-	justify-content: flex-start;
+	justify-content: space-between;
 	background: #e9dfc7;
 }
+.top_mulu_left,.top_mulu_right{
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+.top_mulu_left{
+	justify-content: flex-start;
+}
+
+.top_mulu_right{
+	justify-content: flex-end;
+}
 
 .top_mulu_return {
 	line-height: 2em;
-	margin-right: 4px;
+	margin-left: -0.5rem;
+	margin-right: -0.125rem;
 	font-size: 14px;
+	width: 1.875rem;
+	height: 1.875rem;
+	background: url(../img/leftNav.png);
+	background-size: contain;
 }
 
 .top_mulu_text {
@@ -106,6 +124,7 @@ p {
 	font-size: 16px;
 }
 
+
 /*-----------顶部--目录 end-----------*/
 /*-----------底部导航-----------*/
 .nav-bottom {
@@ -122,7 +141,8 @@ p {
 
 .btn-mulu,
 .btn_Aa,
-.btn-model {
+.btn-model,
+.btn-extra {
 	width: 32%;
 	display: inline-block;
 	color: #F8F8F8;
@@ -130,7 +150,8 @@ p {
 
 .mulu,
 .Aa,
-.model {
+.model,
+.extra {
 	width: 32px;
 	margin: 0 auto;
 	text-align: center;
@@ -152,6 +173,20 @@ p {
 	background: url(../img/Aa.png);
 	background-size: contain;
 }
+.icon-extra {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	background: url(../img/set.png);
+	background-size: contain;
+}
+.icon-extra.act {
+	position: absolute;
+	width: 20px;
+	height: 20px;
+	background: url(../img/set_act.png);
+	background-size: contain;
+}
 
 .icon-yejian {
 	position: absolute;
@@ -171,19 +206,26 @@ p {
 
 .text_mulu,
 .text_Aa,
-.text_yejian {
+.text_yejian,
+.text_extra  {
 	position: absolute;
 	top: 23px;
 	font-size: 11px;
 }
 
 /*-----------底部导航 end-----------*/
+/*-----------其他功能栏-----------*/
+.extraPop{
+}
 /*-----------字体功能栏-----------*/
-.fontPop {
+.fontPop{
+	
+}
+.fontPop, .extraPop {
 	position: fixed;
 	bottom: 4.375rem;
 	width: 100%;
-	height: 8.125rem;
+	height: 5.125rem;
 	background-color: #000000;
 	color: #F8F8F8;
 	font-size: 0.9375rem;
@@ -271,13 +313,13 @@ p {
 }
 
 /*-----------图片样式 end----------*/
-/*-----------目录栏 start-----------*/
+/*-----------底部导航的目录栏 start-----------*/
 .muluBox {
 	position: fixed;
-	bottom: 70px;
+	/* bottom: 70px; */
 	width: 100%;
 	height: 100%;
-	z-index: 900;
+	z-index: 99999;
 }
 
 .muluMask {
@@ -311,3 +353,6 @@ p {
 }
 
 /*-----------目录栏 end-----------*/
+
+.notScroll { overflow: hidden; } 
+