view.js加载图片

//定位光标参数
var treeRow_1='';
var treeRow_2='';

//初始化 证据信息树
$(document).ready(function(){
	funShowWslaZjxxWin();
	setTimeout(function(){funIE()},500);//对浏览器进行判断
});

function funShowWslaZjxxWin() {
	var win = $('#wslaZjxxWin');
	win.window({
		maximized: true,
		autoOpen: true,
		collapsible: false,
		minimizable: false,
		maximizable: false,
		closable: true,
		closed: false,
		draggable: false, //是否可拖动
		resizable: true,
		shadow: true,
		modal: true,
		height: 500,
		onClose: function() {
			$("#winFull", parent.document).remove();
		},
		onOpen: function() {
			$('#tree').tree({
				url : appName + '/ssfwpt/hdxx/wslaZjxxTree?action=one&laoid=' + laoid+'&zjid='+zjid+'&fjid='+fjid,
				loadFilter : function(data) {

					outer:for (var i = 0; i < data.length; i++) {
						var children = data[i].children;
						for (var j = 0; j < children.length; j++) {
							if (zjid == children[j].zjid) {
								fjurl = appName + children[j].url;
								fjgs = children[j].fjgs;
								fjmc = children[j].fjxx;

								treeRow_1 = i;
								treeRow_2 = j;
								break outer;
							}
						}
					}

					return data;
				},
				onClick : function(node) { // 在用户点击node
					if($.trim(node.url)!=''){
						$('#tree').find('.tree-node-selected').removeClass('tree-node-selected');//当前选中的材料去掉选中样式
						$('#tree').find('.tree-node-hover').removeClass('tree-node-hover');//当前选中的材料去掉选中样式
						$($(node)[0].target).addClass('tree-node-selected');//添加选中样式
						$($(node)[0].target).addClass('tree-node-hover');//添加选中样式
						fjurl = appName+node.url;
						fjmc = node.fjxx;
						fjgs = node.fjgs;
						pdfShow();
					}
				
				},
				onLoadSuccess : function() { // 加载成功之后初始化光标
					if($.trim(treeRow_1)!=''&&$.trim(treeRow_2)!=''){
						$('#tree').find('ul').eq(treeRow_1).find('li').eq(treeRow_2).find('div').addClass('tree-node-selected');
					}
					
				}
			});
		}
	});
}

function funIE(){
	// 下面代码都是处理IE浏览器的情况 
	if (window.ActiveXObject || "ActiveXObject" in window) {
		readerPDF(false);
	} else {
		pdfShow();//调用显示的方法
	}
}

//显示文件方法，就是将文件展示到div中
function pdfShow() {debugger;
	if(fjgs =="pdf"|| fjgs =="doc" || fjgs =="docx"){
		$("#pdfContent").css("overflow","");
		$("#pdfContent").html('<iframe style="height:100%;width:100%;" frameborder="no" border="0" marginwidth="0"'
			+'marginheight="0" scrolling="no" allowtransparency="yes" src="' + fjurl+ '" ></iframe>');
	}else{
		$("#pdfContent").css("overflow","auto");
		addImg("#pdfContent",fjurl,fjmc);
	}

}

//判断是否安装了adobe Reader
function readerPDF(flag) {
	//判断是否为IE浏览器，"ActiveXObject" in window判断是否为IE11
	//判断是否安装了adobe Reader
	for (x = 2; x < 10; x++) {
		try {
			oAcro = eval("new ActiveXObject('PDF.PdfCtrl." + x + "');");
			if (oAcro) {
				flag = true;
			}
		} catch (e) {
			flag = false;
		}
	}
	try {
		oAcro4 = new ActiveXObject('PDF.PdfCtrl.1');
		if (oAcro4) {
			flag = true;
		}
	} catch (e) {
		flag = false;
	}

	try {
		oAcro7 = new ActiveXObject('AcroPDF.PDF.1');
		if (oAcro7) {
			flag = true;
		}
	} catch (e) {
		flag = false;
	}

	if (flag) {//支持
		pdfShow();//调用显示的方法
	} else {//不支持
		$("#pdfContent").append("对不起,您还没有安装PDF阅读器软件呢,为了方便预览PDF文档,请选择安装！安装成功后重新刷新页面！");
		alert("对不起,您还没有安装PDF阅读器软件呢,为了方便预览PDF文档,请选择安装！安装成功后重新刷新页面！");
		location = appName+"/admin2/help/AdbeRdr11000_zh_CN.exe";
	}
}

//显示PDF文件名
function showFjmc(){
	layer.tips(fjmc, '#showFjmc', {
		  tips: [1, '#3595CC'],
		 // area:['600px','auto'],
		  time: 10000
	});
}

/**
 * 上一页、下一页
 * @param n
 * @param tag  last 上一页；first 下一页
 * @returns
 */
function funClickPage(n,tag) {
	var hideArr = new Array();
	var nodeLi= $('#tree').find('.tree-node-selected').parent('li');
	if(!recursive(n,hideArr,nodeLi,tag)){
		if(tag=='last'){
			layer.msg("当前材料是第一页");
		}else if(tag=='first'){
			layer.msg("当前材料是最后一页");
		}
		
	}else{
		showFjmc();
	}
}

//递归
function recursive(n,hideArr,nodeLi,tag) {
	if(n>2){
		return false;
	}else{
		var nodeLi2="";
		if(tag=='last'){
			nodeLi2= nodeLi.prev();
		}else if(tag=='first'){
			nodeLi2 = nodeLi.next();
		}
		if(pageHideAndShow(n,hideArr,nodeLi2,tag)){
			return true;
		}else{
			hideArr.push(nodeLi);
			return recursive(n+1,hideArr,nodeLi.parent('ul').parent('li'),tag);
		}
		
	}
}

//显示、隐藏元素
function pageHideAndShow(n,hideArr,obj,tag){
	if(obj.length==0){
		return false;
	}
	if(n==0){
		$('#tree').find('.tree-node-selected').removeClass('tree-node-selected');//当前选中的材料去掉选中样式
		$('#tree').find('.tree-node-hover').removeClass('tree-node-hover');//当前选中的材料去掉选中样式
		
		obj.find('div').addClass('tree-node-selected');//添加选中样式
		obj.find('div').addClass('tree-node-hover');//添加选中样式
	}else{
		if(n>=2){
			var obj2=obj.find('ul:'+tag+'');
			for(var i=0;i<n;i++){
				if(obj2.find('ul:'+tag+'').length==0){
					return false;
				}else{
					obj2 = obj2.find('ul:'+tag+'');
				}
			}
		}
		
		$('#tree').find('.tree-node-selected').removeClass('tree-node-selected');//当前选中的材料去掉选中样式
		$('#tree').find('.tree-node-hover').removeClass('tree-node-hover');//当前选中的材料去掉选中样式
		for(var i=0;i<n;i++){
			hideArr[i].parent('ul').css("display", "none");//当前证据ul节点隐藏
			hideArr[i].parent('ul').prev().find(".tree-hit").removeClass('tree-expanded');
			hideArr[i].parent('ul').prev().find(".tree-hit").addClass('tree-collapsed');
			hideArr[i].parent('ul').prev().find(".tree-icon").removeClass('tree-folder-open');
		}
		
		for(var i=0;i<n;i++){
			obj.find('ul').css("display", "block");//下一个或上一个文件展示
			obj.find('ul').prev().find(".tree-hit").removeClass('tree-collapsed');
			obj.find('ul').prev().find(".tree-hit").addClass('tree-expanded');
			obj.find('ul').prev().find(".tree-icon").addClass('tree-folder-open');
			if(i==n-1){
				obj.find('ul li:'+tag+'').find('div').addClass("tree-node-selected");
				obj.find('ul li:'+tag+'').find('div').addClass("tree-node-hover");
			}else{
				obj=obj.find('ul:'+tag+'');
			}
			
		}
	}
	
	fjurl = appName+$('#tree').tree("getSelected").url;
	fjmc = $('#tree').tree("getSelected").fjxx;
	fjgs = $('#tree').tree("getSelected").fjgs;
	pdfShow();
	return true;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cmn-Hans">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>广东法院诉讼服务网管理平台</title>
<#include "/admin2/common/common_css_js.html" />
	<#--图片展示插件-->
<link rel="stylesheet" href="${base!}/admin2/hdxx/css/viewer.css">
<link rel="stylesheet" href="${base!}/admin2/hdxx/css/viewer_main.css?v=1">
<script type="text/javascript" src="${(appName)!}/admin2/hdxx/js/viewer.js"></script>
<script type="text/javascript" src="${(appName)!}/admin2/hdxx/js/viewer_main.js"></script>

<script type="text/javascript" src="${(appName)!}/admin2/hdxx/template/js/wslaZjxx.js?v=4"></script>
</head>
<style>
.page-turning {
	width: 50px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background-color: #3595CC;
}
.page-turning:hover{
	cursor:pointer;
}
.label_flag2 {
	display: inline-block;
	font-size: 75%;
	padding: 3px 6px;
	background-color: #e21515;
	color: #efe5e5;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
}
</style>

<body>
<script type="text/javascript">
var laoid = '${(laoid)!}';
var zjid = '${(zjid)!}';
var fjid = '${(fjid)!}';
var fjurl = '${(appName)!}/admin2/help/Scala.pdf';//默认图片展示
var fjmc = 'Scala.pdf';//默认附件名称
var fjgs = "pdf";
/*function ss(){
	$(".docs-galley").html('<ul class="docs-pictures clearfix"><li><img data-original="http://localhost:9081/gycourt/upload/wordTopdf2?fjid=1294123176531329024" src="http://localhost:9081/gycourt/upload/wordTopdf2?fjid=1294123176531329024"></li></ul>')
	// init();
    addImg(".docs-galley","http://localhost:9081/gycourt/upload/wordTopdf2?fjid=1294123176531329024","fjmc");
}*/
</script>

<#--<div class="container">
    <div class="row">

        <div class="col-sm-8 col-md-6">
            <h3 class="page-header">Demo</h3>
            <div class="docs-galley">

            </div>
            <div onClick="ss();">点击事件</div>
        </div>
    </div>
</div>-->

<div id="wslaZjxxWin" title="网上立案材料信息" class="mainBgColor">
	<div class="easyui-layout" style="width: 100%;">
	
		<#--树开始-->
		<div class="easyui-panel" region="east" split="false"
			style="width: 300px; height: 100%; padding: 10px;" border="false">
			<div class="easyui-layout" style="width: 100%;">
				<div class="easyui-panel" region="west" title="证据信息"
					collapsible="false" split="false"
					style="width: 100%; height: 100%; padding: 10px;" border="true">
					<div class="left-tree">
						<ul id="tree" class="easyui-tree"></ul>
					</div>
				</div>
			</div>
	
		</div>
		<#--树结束-->
	
		<div id="showFjmc" style="position: absolute; z-index: 2;top:-8%;left:2%;width:300px;height:30px;">
		</div>
		<#--外围布局开始-->
		<div class="easyui-panel" region="center" split="false" border="false">
			
			<div id="info" class="easyui-panel" onmouseover="showFjmc()" onmouseout="layer.closeAll();"
				style="width: 100%; height: 100%;position:relative; padding: 0;overflow: hidden;">
				<div id="pdfContent" onmouseover="showFjmc()" onmouseout="layer.closeAll();" style="margin:5% auto;position: realtive; z-index: 1; width: 90%; height: 92%;">
	
				</div>
				
				<div class='page-turning' style="position: absolute; z-index: 2;width:5%;top:45%;left:0%;" onclick="funClickPage(0,'last')">
						上一页
				</div>
				<div class='page-turning' style="position: absolute; z-index: 2;width:5%;top:45%;right:0%;"οnclick="funClickPage(0,'first')">
					下一页
				</div>
			</div>
		</div>
		<!--外围布局结束-->
	</div>

</div>
</body>

</html>

function funOpenWslaZjxx(laoid,zjid,fjid){
	var url =  appName +'/ssfwpt/hdxx/wslaZjxxView?action=one&laoid='+laoid+'&zjid='+zjid+'&fjid='+fjid;
	layer.open({
		// title: "当事人列表", //不显示标题
		type: 2,
		// maxmin:true,
		area: ["100%", "100%"],
		shade: [0.8, '#393D49'],
		content: url

	})

	// $("body").append('<div id="winFull" clas="winFull" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;"><iframe name="mainFrame" scrolling="none" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe></div>');
}

function addImg(id,img,fjmc){

	$(id).html('<ul class="docs-pictures clearfix"><li><img data-original="'+img+'" src="'+img+'" alt="'+fjmc+'" style="cursor:pointer;"></li></ul>');
	debugger;
    //viewer-title
    $('.docs-pictures').viewer({url: 'data-original'});
}