Jquery面向对象：自定义的页签控件

Jquery面向对象：自定义的页签控件

一、面向对象的页签控件js

var com;
if (!com) {
    com = new Object();
}
if (!com.letv) {
    com.letv = new Object();
}

/**
 * @Title: com.letv.ZmmTab
 * @Description: 自定义的页签控件
 * @author zhangmm
 * @date 2016-06-03
 * @version V1.0
 */
com.letv.ZmmTab = ROOF.Class({
    target : null, // 样例：var tab_ids = [["form_details_tab", "form_details_content", "表单详情"], ["historical_process_tab", "historical_process_content", "历史流程"]]
    tab_title_index : 0, // "tab页签标题"顺序
    tab_content_index : 1, // "tab页签内容"顺序
    default_show : 0, // 默认显示第0个tab页签
    initialize : function(args) {
        this.target = args.target;
        if (args.tab_title_index != null) {
            this.tab_title_index = args.tab_title_index;
        }
        if (args.tab_content_index != null) {
            this.tab_content_index = args.tab_content_index;
        }
        if (args.default_show != null) {
            this.default_show = args.default_show;
        }

        $.each(this.target, $.proxy(function(i, n) { // 加载tab页签标题的click事件
            $("#"+n[this.tab_title_index]).on("click", $.proxy(function() {
                this.showTab(i);
                return false;
            }, this));
        }, this));

        this.showTab(this.default_show); // 默认显示第一个页签
    },
    // public
    showTab : function(index) { // 显示顺序为index的tab页签，其余的隐藏
        $.each(this.target, $.proxy(function(i, n) {
            if(i == index) {
                $("#"+n[this.tab_title_index]).addClass('cur');
                $("#"+n[this.tab_content_index]).show();
                $("#"+n[this.tab_content_index]).attr("style", "");
                $("#"+n[this.tab_content_index]).removeAttr("disabled");
            } else {
                $("#"+n[this.tab_title_index]).removeClass('cur');
                $("#"+n[this.tab_content_index]).hide();
                $("#"+n[this.tab_content_index]).attr("style", "display:none;");
                $("#"+n[this.tab_content_index]).attr("disabled", "disabled");
            }
        }, this));
    }
});

二、JSP页面

<!-- 内容主体 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 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>
<!-- 内容主体 end -->

三、JavaScrip代码

/*
 * tab页签变量
 */
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

$(function() {
    /*
     * 自定义的页签控件
     */
    var zmmTab = new com.letv.ZmmTab({
        target : tab_ids,
        tab_title_index : 0, // "tab标题"顺序 - 0
        tab_content_index : 1, // "tab内容"顺序 - 1
        default_show : form_details_index // 默认显示哪个tab页签
    });
});