Template9.jsp 10.1 KB
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%-- <%@ include file="/systeminfo/init_wev8.jsp"%> --%>
<%@ page import="weaver.hrm.*"%>
<%@ page import="java.util.*"%>
<%@ page import="weaver.general.*"%>
<jsp:useBean id="cmutil" class="weaver.km.util.CommonTransUtil" scope="page" />
<jsp:useBean id="transUtil" class="weaver.secondary.util.TransUtil" scope="page" />
<jsp:useBean id="rs" class="weaver.conn.RecordSet" scope="page" />
<%
	User user = HrmUserVarify.getUser (request , response) ;
	if (user == null){
		response.sendRedirect("/login/Login.jsp");
		return;
	}
	String userId = user.getUID()+"";
	String mapId = Util.null2String(request.getParameter("mapId"));
	String name = "";
	String remark = "";
	//创建人
	String creater ="";
	String docmodecontents = "";
	rs.executeSql("select name,remark,createrId,tId,docmodecontents from KT_Map where id="+mapId);
	if(rs.next()){
		name = Util.null2String(rs.getString("name"));
		remark = Util.toHtmlMode(rs.getString("remark"));
		docmodecontents = Util.toHtmlMode(rs.getString("docmodecontents"));
		creater = transUtil.getHrm(Util.null2String(rs.getString("createrId")));
	}
	//文档编号
	String mapNum = ((1000000+Integer.parseInt(mapId))+"").substring(1);
%>
<html>
<head>
	<title><%=name %></title>
	<script type="text/javascript" src="/wui/common/jquery/jquery.min_wev8.js"></script>
	<script language="javascript" type="text/javascript" src="/js/init_wev8.js"></script>
	<script type="text/javascript" src="/js/ecology8/jNice/jNice/jquery.jNice_wev8.js"></script>

	<link rel="stylesheet" href="/wui/theme/ecology8/page/perfect-scrollbar/perfect-scrollbar_wev8.css">
	<script type="text/javascript" src="/wui/theme/ecology8/page/perfect-scrollbar/perfect-scrollbar_wev8.js"></script>
	<script type="text/javascript" src="/wui/theme/ecology8/page/perfect-scrollbar/jquery.mousewheel_wev8.js"></script>

	<link href="../js/zDialog/zDialog_e8_wev8.css" type=text/css rel=stylesheet>
	<link href="../js/zDialog/e8_zDialog_btn_wev8.css" type=text/css rel=stylesheet>
	<script language="javascript" src="../js/zDialog/zDialog_wev8.js"></script>
	<script language="javascript" src="../js/weaver_lang_7_wev8.js"></script>
	<style>
		body{
			margin:0;
			padding:0;
			font-size: 12px;
			min-width: 800px;
		}
		*{
			font-family: '微软雅黑';
		}
		a {
			text-decoration: none;
		}

		/**头部和右侧边样式**/
		.top {
			height: 74px;
			margin: 0 0 0 50px;
			border-bottom: 1px solid #CFCFCF;
		}
		.topLeftDiv{
			float: left;
			font-size: 13px;
			width: 200px;
			margin-top: 7px;
		}
		.topLeftDiv div {
			line-height: 20px;
		}
		.titleDiv1{
			/* 		float: left; */
			font-size: 18px;
			line-height: 108px;
			font-weight: bold;
			text-align: center;
			text-indent: -200px;
			height: 75px;
		}
		.logoDiv{
			background: #fff url('/knowledgeMap/images/logo.png') no-repeat 35px;
			width: 100px;
			height: 75px;
			top:0;
			right:0;
			position: absolute;
			z-index: 3;
		}
		.leftFrameDiv{
			height:100%;
			width:70px;
			background: #3072D3;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
		}
		.menu {
			position: fixed;
			top: 100px;
			right: 7%;
			width: 200px;
			border: 1px solid #DDD;
			background: #FFF;
			z-index: 10;
			padding: 10px 0;
		}
		/**头部和右侧边样式**/

		.container {
			margin: 50px auto;
			border-left: 1px #ccc solid;
			/* 		border-radius: 5px; */
			background-color: #fff;
			max-width: 900px;
			min-width: 600px;
			margin-left: 10%;
			/* 		position: relative; */
		}

		.detail {
			padding: 0 15px;
		}

		.title {
			font-size: 25px;
			font-weight: bold;
			text-align: center;
			margin: 20px auto;
		}

		.disgest {
			padding: 10px;
		}

		.content {
			/* 		padding: 10px; */
		}

		.title-item {
			position: relative;
			z-index: 1;
			margin-top: 20px;
		}

		.title-logo {
			position: absolute;
			/* 		top: 20px; */
			left: -15px;
			width: 25px;
			height: 24px;
			line-height: 24px;
			font-size: 16px;
			background: #519cea;
			color: #fff;
			text-align: center;
			border-radius: 0 2px 2px 0;
		}

		.title-new {
			display: inline-block;
			padding: 0 10px;
			background: #fff;
			margin-left: 10px;
			margin-top: -20px;
			margin-bottom: 20px;
		}

		.title-line {
			width: 100%;
			background-color: #ccc;
			height: 1px;
			position: absolute;
			margin-top: -51px;
			z-index: -1;
		}

		.nav {
			position: fixed;
			right: 7%;
			width: 200px;
			border: 1px solid #DDD;
			background: #FFF;
			z-index: 2;
			padding: 5px 0 5px 5px;
			top: 100px;
		}

		.navMove {
			position: absolute;
			/* 		right:-200px; */
		}

		.scrollDiv{
			max-height: 400px;
			/* 		margin: 10px; */
			padding-right: 10px;
		}

		.nav ul {
			list-style: none;
			padding-left: 24px;
		}

		.nav ul li {
			cursor: pointer;
			line-height: 24px;
			overflow: hidden;
			cursor: pointer;
			text-overflow: ellipsis;
		}

		.nav ul li:HOVER {
			background-color: #f0f0f0;
		}

		.nav .sn {
			padding-right: 5px;
			color: #999;
		}

		.nav .txt {
			white-space: nowrap;
		}
		.content p{
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
<div id="mainDiv" style="margin-right: 70px;">
	<div class="top">
		<div class="topLeftDiv">
			<div>文档编号:<%=mapNum %></div>
			<div style="color:#2D8B00;">凝聚分散智慧 协同提速发展</div>
			<div>发布人员:<span><%=creater %></span></div>
		</div>
		<div class="titleDiv1"><%=name %></div>
	</div>
	<%
		if(remark.length() > 0){
	%>
	<div style="margin: 0 0 0 50px;">
		<div id="remarkComtainer" class="remarkComtainer">
			<%
				session.setAttribute("remark_"+mapId,remark);
			%>
			<iframe id="iframepage" src="/knowledgeMap/template/ShowFckEditorDesc.jsp?sessionname=remark_<%=mapId %>&seth=0"  scrolling=no width="100%" onLoad="iFrameHeight(this)"  marginheight="0" marginwidth="0" allowTransparency="true" frameborder="0"></iframe>
		</div>
	</div>
	<%
		}
	%>
</div>
<div class="leftFrameDiv"></div>
<div class="logoDiv"></div>
<script type="text/javascript">
	var array = [];

	$(document).ready(function() {
		$("h1").each(function(i, e) {
			var text = $(e).text();
			var html = "<div class=\"title-item\"><div class=\"title-logo\">" + (i + 1) + "</div><div class=\"title-new\"><h1>"
					+ text + "</h1></div><div class=\"title-line\"></div></div>"
			$(e).replaceWith(html);
		});

// 	$(".title-line").each(function(i, e) {
// 		$(e).css("width", ($(e).parent(".title-item").width() - $(e).parent(".title-item").find(".title-new").width() - 10) + "px");
// 	});

		var html = "<ul style=\"padding: 5px 0 5px 5px;\">";
// 	var fengmian = "";
// 		<%
// 		if(remark.length() > 0){
// 			%>
// 			fengmian ='<li style="color: rgb(0, 0, 0); font-weight: normal;" _index="-1"><span class="txt" style="font-weight: bold;">封面</span></li>';
// 			<%
// 		}
// 		%>
// 	html += fengmian;
		$(".title-item").each(function(i, e) {
			array.push($(e));
			var text = $(e).find("h1").text();
			html += "<li _index=\"#"+(i+1) +"\"><span class=\"sn\">" + (i + 1) + "</span><span class=\"txt\" style=\"font-weight: bold;\" title='" + text + "'>" + text + "</span></li>";
			html += loadNav($(e), 2, (i + 1) + ".", 0);
		});
		html += "</ul>";
		$("#scrollDiv").html(html);

		var lis = $(".nav").find("li");
		window.onscroll = function() {
			var winScroll = jQuery(window).scrollTop();
			for(var i=0;i<array.length;i++){
				if(array[i].offset().top<winScroll + 5 && (i == array.length - 1 || array[i + 1].offset().top>winScroll + 5)){
					lis.eq(i)[0].style.color = "#2a7ee7";
					lis.eq(i)[0].style.fontWeight = "bold";
					jQuery("#scrollDiv").scrollTop(i*24);
				}else{
					lis.eq(i)[0].style.color = "#000";
					lis.eq(i)[0].style.fontWeight = "normal";
				}
			}

			var containerTop = jQuery(".detail").offset().top;
			//menu距离右边body宽度的7%
			var menuRight = jQuery("body").width()*0.07;
			if(containerTop - winScroll < 100){
				jQuery(".nav").removeClass("navMove").css("top","100px");
			}else{
				//滚动到明细页面的时候添加menu移动的class
				var menuTop = jQuery(".container").offset().top;
				jQuery(".nav").addClass("navMove").css("top",menuTop+"px");
			}
		};

// 	for (var i = 0; i < lis.length; i++) {
// 		lis.eq(i).live("click", function() {
// 			var k = $(".nav").find("li").index($(this));
// 			$(array[k])[0].scrollIntoView();
// 		});
// 	}

		jQuery(".nav li").click(function(){
			var _index = $(this).attr("_index");
			if("-1" == _index){
				jQuery(window).scrollTop(0);
			}else{
				console.log(jQuery(".nav li"))
				var k = jQuery(".nav li").index($(this)[0]);
				$(array[k])[0].scrollIntoView();
			}

		});

		jQuery("#scrollDiv").perfectScrollbar();
	});

	function loadNav(obj, deep, prev, f) {
		var _html = "<ul>";

		if (f == 0) {
			obj.nextUntil(".title-item").filter("h" + deep).each(function(i, e) {
				array.push($(e));
				var text = $(e).text();
				_html += "<li _index=\"#"+ prev + "" + (i + 1) +"\"><span class=\"sn\">" + prev + "" + (i + 1) + "</span><span class=\"txt\" title='" + text + "'>" + text + "</span></li>";
				var __html = loadNav($(e), deep + 1, prev + (i + 1) + ".");
				_html += __html == "<ul></ul>" ? "" : __html;
			});
		} else {
			obj.nextUntil("h" + (deep - 1)).filter("h" + deep).each(function(i, e) {
				array.push($(e));
				var text = $(e).text();
				_html += "<li _index=\"#"+ prev + "" + (i + 1) +"\"><span class=\"sn\">" + prev + "" + (i + 1) + "</span><span class=\"txt\" title='" + text + "'>" + text + "</span></li>";
				var __html = loadNav($(e), deep + 1, prev + (i + 1) + ".");
				_html += __html == "<ul></ul>" ? "" : __html;
			});
		}
		_html += "</ul>";
		return _html;
	}

	function iFrameHeight(obj) {
		var iframe = obj;
		try{
			var bHeight =   iframe.contentWindow.document.body.scrollHeight;
			var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
			var height = Math.max(bHeight, dHeight);
			iframe.height =  height;
			jQuery(".leftFrameDiv").height(jQuery("body").height()+75);

			var menuTop = jQuery(".container").offset().top;
			jQuery(".nav").addClass("navMove").css("top",menuTop+"px");

		}catch (ex){}
	}
</script>
<div class="container">
	<div class="detail">
		<div class="content"><%=docmodecontents %></div>
	</div>
	<div class="nav"><div id="scrollDiv" class="scrollDiv"></div></div>
</div>
</body>
</html>