模拟tab页签切换+窗口页面传值到当前页面

最新推荐文章于 2024-05-16 12:04:08 发布

凤凰冷羽

最新推荐文章于 2024-05-16 12:04:08 发布

阅读量9.5k

点赞数 1

分类专栏： JavaScript JQuery Html Handlebars JSP 文章标签： Html JSP jquery js

本文链接：https://blog.csdn.net/zhangmm122411/article/details/51563899

版权

JavaScript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

Html

8 篇文章 0 订阅

订阅专栏

JQuery

7 篇文章 0 订阅

订阅专栏

模拟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);
    });
}