模拟tab页签切换+窗口页面传值到当前页面
一、父页面Jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>乐视-全球版权系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/webpage/letv_common/mobile/letv_gcr_mobile_head_boot.jsp"%>
<script type="text/javascript" src="<%=basePath%>/webpage/com/letv/gcr_mobile/approve/js/myApprovePage.js"></script>
</head>
<body>
<form id="pageForm" method="post" name="contract_search_form" action="<%=basePath%>/task_to_do_MobileController.do?my_to_do_task_list_page">
<!-- 顶部导航 start -->
<c:set var="checkContentTitle" value="${bpm_biz_title }" />
<c:set var="checkContentNum" value="${bpm_biz_num }" />
<%-- <c:set var="historyBack" value="true" /> --%>
<%@include file="/webpage/com/letv/gcr_mobile/approve/approve_top.jsp"%>
<!-- 顶部导航 end -->
<!-- 内容主体 start -->
<div class="wrapper">
<!-- 一级页签 -->
<div class="tab-title">
<ul class="tab_menu tab_2">
<li id="form_details_tab" class="cur items"><!-- 表单详情 --><t:mutiLang langKey="common.form_details"/></li>
<li id="historical_process_tab" class="items"><!-- 历史流程 --><t:mutiLang langKey="common.historical_process"/></li>
</ul>
</div>
<!-- 页签内容 -->
<div class="tab-content">
<div class="swiper-wrapper" style="margin-top:1px;">
<!-- 表单详情 -->
<div id="form_details_content">
<%@include file="/webpage/com/letv/gcr_mobile/approve_content/demand_manage.jsp"%>
<%-- <jsp:include page="/webpage/com/letv/gcr_mobile/approve_content/demand_manage.jsp" flush="true"/> --%>
</div>
<!--历史流程 -->
<div id="historical_process_content">
<%@include file="/webpage/com/letv/gcr_mobile/approve_content/flow_history.jsp"%>
<%-- <jsp:include page="/webpage/com/letv/gcr_mobile/approve_content/flow_history.jsp" flush="true"/> --%>
</div>
</div>
</div>
</div>
<!-- 内容主体 end -->
<!-- 底部签收 start -->
<div id="init_div" class="footer">
<div class="f_fx">
<div class="inner">
<div class="ft_cont">
<em class="img icon-eidt"></em>
<span class="blue"><!-- 审批处理 --><t:mutiLang langKey="common.approval_process"/></span>
</div>
</div>
</div>
</div>
<div id="approve_div" class="footer" style="display:none;">
<div class="f_fx">
<div class="inner">
<div class="ft_cont tab_three">
<div id="approve_submit_click">
<em class="img icon-ok"></em>
<span><!-- 提交 --><t:mutiLang langKey="common.submit"/></span>
</div>
<div id="turn_to_send_click">
<em class="img icon-transfer"></em>
<span><!-- 转派 --><t:mutiLang langKey="common.turn_to_send"/></span>
</div>
<div class="cancel_click">
<em class="img icon-cancel"></em>
<span><!-- 取消 --><t:mutiLang langKey="common.cancel"/></span>
</div>
</div>
<ul class="ft_action">
<c:if test="${approve_checkbox eq 1}">
<li class="hd"><!-- 审批 --><t:mutiLang langKey="common.process.approval"/>:<span class="ck">
<input type="checkbox" id="approve" class="chk_3" checked/>
<label for="approve"></label>
</span></li>
</c:if>
<li class="hd bdr"><!-- 备注 --><t:mutiLang langKey="common.remark"/>:
<textarea class="ta"></textarea>
<a href="#" class="ico_paperclip"></a>
</li>
<li class="hd">
<div class="fj">
<img src="<%=basePath%>/webpage/letv_common/mobile/images/ico_bot_fj.png" width="35" height="35" alt=""/>
<p class="txt">通知1.rar</p>
</div>
<div class="fj">
<img src="<%=basePath%>/webpage/letv_common/mobile/images/ico_bot_fj.png" width="35" height="35" alt=""/>
<p class="txt">通知2.rar</p>
</div>
<div class="fj">
<img src="<%=basePath%>/webpage/letv_common/mobile/images/ico_bot_fj.png" width="35" height="35" alt=""/>
<p class="txt">通知3.rar</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="turn_to_send_div" class="footer" style="display:none;">
<div class="f_fx">
<div class="inner">
<div class="ft_cont tab_two">
<div id="turn_to_send_submit_click">
<em class="img icon-ok"></em>
<span><!-- 提交 --><t:mutiLang langKey="common.submit"/></span>
</div>
<div class="cancel_click">
<em class="img icon-cancel"></em>
<span><!-- 取消 --><t:mutiLang langKey="common.cancel"/></span>
</div>
</div>
<ul class="ft_action">
<li class="hd">
<input type="hidden" id="next_processor_id" name="next_processor" value="10001" />
<!-- 下一处理人 --><t:mutiLang langKey="common.next_processor"/>:<span id="next_processor_name">王菲菲</span>
<a id="choose_person" class="xuanr" href="javascript:void(0)"></a>
</li>
<li class="hd bdr"><!-- 备注 --><t:mutiLang langKey="common.remark"/>:
<textarea class="ta"></textarea>
<a href="#" class="ico_paperclip"></a>
</li>
<li class="hd">
<div class="fj">
<img src="<%=basePath%>/webpage/letv_common/mobile/images/ico_bot_fj.png" width="35" height="35" alt=""/>
<p class="txt">通知1.rar</p>
</div>
<div class="fj">
<img src="<%=basePath%>/webpage/letv_common/mobile/images/ico_bot_fj.png" width="35" height="35" alt=""/>
<p class="txt">通知2.rar</p>
</div>
<div class="fj">
<img src="<%=basePath%>/webpage/letv_common/mobile/images/ico_bot_fj.png" width="35" height="35" alt=""/>
<p class="txt">通知3.rar</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="file_operation" class="bottom_action" style="display:none;">
<div class="hd">
<p class="gray">通知书.doc(61k)</p>
<p class="red">删除</p>
<p id="preview">预览</p>
</div>
<div id="file_cancel" class="hd">
<p>取消</p>
</div>
</div>
<!-- 底部签收 end -->
</form>
<!--加载 -->
<%@include file="/webpage/letv_common/mobile/letv_gcr_mobile_load.jsp"%>
</body>
</html>
二、父页面JavaScript
var choose_person_window = null; //审批人员选择窗口
/*
* tab页签变量
*/
var tab_title_index = 0; //"tab标题"顺序 - 0
var tab_content_index = 1; //"tab内容"顺序 - 1
var tab_ids = [["form_details_tab", "form_details_content", "表单详情"],
["historical_process_tab", "historical_process_content", "历史流程"]];
var form_details_index = 0; //"表单详情"顺序 - 0
var historical_process_index = 1; //"历史流程"顺序 - 1
/*
* 底部div变量
*/
var footer_div_ids = new Array("init_div", "approve_div", "turn_to_send_div");
var init_index = 0; //"初始div"顺序 - 0
var approve_index = 1; //"审批div"顺序 - 1
var turn_to_send_index = 2; //"转派div"顺序 - 2
$(function() {
/*
* 初始页面位置调整
*/
var winHeight = $(window).height(); //手机可视区域
var divH = winHeight - 100; //减去头部、导航栏
$(".swiper-wrapper").height(divH-20);
$("#wrapper").height(divH-20);
/*
* 默认显示"表单详情"tab
*/
tab_show_and_hide(form_details_index, tab_ids);
/*
* 默认显示"初始div"
*/
footer_div_show_and_hide(init_index, footer_div_ids);
/*
* 加载tab页签li的click事件
*/
$.each(tab_ids, function(i, n) {
$("#"+n[tab_title_index]).click(function() {
tab_show_and_hide(i, tab_ids);
return false;
});
});
/*
* 审批和转派模块
*/
$("#init_div").click(function() { // 审批处理入口
footer_div_show_and_hide(approve_index, footer_div_ids);
return false;
});
$("#approve_submit_click").click(function() { // 审批提交
alert("审批checkbox的value:"+$("#approve").attr("checked"));
var ids = "";
$("input:checkbox[id^='checkboxInput_']:checked").each(function(i){
//alert($(this).attr("checked"));
if(i==0) {
ids = $(this).val();
} else {
ids += (";" + $(this).val());
}
});
alert("作品列表的values:"+ids);
$.ajax({
type: 'post',
dataType : "json",
url: ROOF.Utils.projectName() + "/task_to_do_MobileController.do?query_my_to_do_task_list",
data: {"page":1, "rows":1, "ids":ids},
success: function(d) {
if(d.msg == "分页查询成功!") {
url = ROOF.Utils.projectName() + "/approve_MobileController.do?approve_success_page";
window.location.href = url;
}
},
error:function(d) {
alert(d.statusText);
}
});
// url = ROOF.Utils.projectName() + "/approve_MobileController.do?approve_success_page";
// $("#pageForm").attr("action", url);
// $("#pageForm").submit();
return false;
});
$("#turn_to_send_click").click(function() { // 转派
footer_div_show_and_hide(turn_to_send_index, footer_div_ids);
return false;
});
$("#choose_person").click(function() { // 弹出审批人员选择窗口
choose_person_window = ROOF.Utils.openwindow(ROOF.Utils.projectName() + "/approve_MobileController.do?choose_person_page", "选择人员");
return false;
});
$("#turn_to_send_submit_click").click(function() { // 转派提交
var next_processor = $("#next_processor_name").html();
var url = ROOF.Utils.projectName() + "/approve_MobileController.do?turn_to_send_success_page&next_processor=" + next_processor;
window.location.href = url;
return false;
});
$(".cancel_click").click(function() { // (审批+转派)取消
footer_div_show_and_hide(init_index, footer_div_ids);
return false;
});
/*
* 附件模块
*/
$(".fj").click(function() { // 点击附件
$("#file_operation").attr("style", "");
$("#file_operation").removeAttr("disabled");
return false;
});
$("#preview").click(function() { // 附件预览
var ref = ROOF.Utils.openwindow(ROOF.Utils.projectName() + "/upload/Customize.png", "附件预览");
return false;
});
$("#file_cancel").click(function() { // 附件取消
$("#file_operation").attr("style", "display:none;");
$("#file_operation").attr("disabled", "disabled");
return false;
});
});
function tab_show_and_hide(index, ids) { // 显示顺序为index的tab页签,其余的隐藏
$.each(ids, function(i, n) {
if(i == index) {
$("#"+n[tab_title_index]).addClass('cur');
$("#"+n[tab_content_index]).show();
// $("#"+n[tab_content_index]).attr("style", "");
// $("#"+n[tab_content_index]).removeAttr("disabled");
} else {
$("#"+n[tab_title_index]).removeClass('cur');
$("#"+n[tab_content_index]).hide();
// $("#"+n[tab_content_index]).attr("style", "display:none;");
// $("#"+n[tab_content_index]).attr("disabled", "disabled");
}
});
}
function footer_div_show_and_hide(index, ids) { // 显示顺序为index的div内容,其余的隐藏
$.each(ids, function(i, n) {
if(i == index) {
$("#"+n).attr("style", "");
$("#"+n).removeAttr("disabled");
} else {
$("#"+n).attr("style", "display:none;");
$("#"+n).attr("disabled", "disabled");
}
});
}
function setNextProcessor(id, name) { // 填充下一审核人信息
$("#next_processor_id").attr("value", id);
$("#next_processor_name").html(name);
}
function close() { // 关闭审批人员选择窗口
choose_person_window.close();
}
三、窗口页面JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>选择人员</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/webpage/letv_common/mobile/letv_gcr_mobile_head_boot.jsp"%>
<script type="text/javascript" src="<%=basePath%>/webpage/com/letv/gcr_mobile/approve/js/choosePersonPage.js"></script>
<script type="text/javascript">
var date_fmt = "yyyy-MM-dd hh:mm:ss";
Handlebars.registerHelper('dateFormat', function(date, format,options) {
return new Date().StringFormat(date,date_fmt);
});
</script>
<script id="choosePerson_template" type="text/x-handlebars-template">
{{#each this}}
<li>
<div class="c_b">
<div class="checkboxThree">
<input type="checkbox" id="checkboxInput_{{id}}" name="" value="{{name}}({{username}})" person_id="{{id}}" />
<label for="checkboxInput_{{id}}"></label>
</div>
</div>
<div class="tit">{{name}}({{username}})</div>
<div class="row">部门:{{org_name}}</div>
<div class="row">邮箱:{{email}}</div>
</li>
{{/each}}
</script>
</head>
<body>
<form id="pageForm" method="post" name="contract_search_form" action="">
<!-- 顶部导航 start-->
<div class="search_box2">
<input type="text" id="searchContent" name="search_content" value="${search_content }" class="tt search_02" placeholder="中文姓名 / 英文姓名 / 邮箱前缀" />
</div>
<!-- 顶部导航 end-->
<!-- 内容主体 -->
<div id="pageQueryList">
<div class="tit_wt">人员列表</div>
<c:set var="wrapper_top" value="90" />
<c:set var="wrapper_bottom" value="45" />
<%@include file="/webpage/letv_common/mobile/letv_mobile_pull_down.jsp"%>
<div class="info_zp">
<section>
<ul id="choose_person_list" class="list_cp">
</ul>
</section>
</div>
<%@include file="/webpage/letv_common/mobile/letv_mobile_pull_up.jsp"%>
<%@include file="/webpage/letv_common/mobile/letv_mobile_page_cond.jsp"%>
</div>
</form>
<div id="confirm" class="footer">
<div class="f_fx">
<div class="inner">
<div class="ft_cont">
<em class="img icon-eidt2"></em><span class="blue">确认</span>
</div>
</div>
</div>
</div>
<!--加载 -->
<%@include file="/webpage/letv_common/mobile/letv_gcr_mobile_load.jsp"%>
</body>
</html>
四、窗口页面JavaScript
$(function() {
// 加载第1页数据
getData(1);
// 条件搜索
$('#searchParam').bind('keypress',function(event) { // 键盘事件绑定
if(event.keyCode == "13") { // 回车
$("#choose_person_list").html("");
getData(1);
return false;
}
});
$("#confirm").click(function() { // 确认选择人员
var len = $("input:checkbox[id^='checkboxInput']:checked").length;
if (len == 0 || len > 1) {
alert("请选择一行记录!");
return false;
}
var next_processor_id = $("input:checkbox[id^='checkboxInput']:checked").eq(0).attr("person_id");
var next_processor_name = $("input:checkbox[id^='checkboxInput']:checked").eq(0).val();
opener.setNextProcessor(next_processor_id, next_processor_name);
opener.close();
//$("#next_processor", window.opener.document).html(next_processor);
//close();
});
});
// 分页查询数据标志
var selectBool = true;
// 分页加载数据
function pullUpAction(c) { // 上拉函数重写,letv_mobile_page_cond.jsp里面用
setTimeout(function() { // 上拉时间结束,执行
var c = parseInt($("#currentPage").val());
getData(c);
}, 1000);
}
// 异步加载第c页的数据
function getData(c) {
if(!selectBool) {
return;
}
$("#currentPage").val(c);
loadDiv();
$.ajax({
type: 'post',
dataType : "json",
url: ROOF.Utils.projectName() + "/approve_MobileController.do?query_choose_person_list",
data: $("#pageForm").serialize(),
success: function(d) {
if(d.obj.results.length == 0) {
selectBool = false;
if(d.obj.pageCount==0) { // 没有记录
var v_mobile_search_message = "暂无数据!";
var sb = "<div style='width:100%;height:100px; line-height:100px;text-align:center'>"+v_mobile_search_message+"</div>";
$("#pageQueryList").html(/*"暂无数据"*/sb);
} else {
var v_mobile_last_page = "已是最后一页!";
alert(/*"已是最后一页!"*/v_mobile_last_page);
}
} else {
// 加载新数据
var source = $("#choosePerson_template").html();
var template = Handlebars.compile(source);
$("#choose_person_list").append(template(d.obj.results));
$("#currentPage").val(c+1);
dynamic_reload_click();
}
loadDiv();
myScroll.refresh();
},
error:function(d) {
alert(d.statusText);
loadDiv();
}
});
}
// 动态重新加载点击事件(页面ajax刷新用)
function dynamic_reload_click() {
$("input:checkbox[id^='checkboxInput']").click(function() { // 一次只能选一个审批人员
$("input:checkbox[id^='checkboxInput']").attr("checked", false);
$(this).attr("checked", true);
});
}