Jquery Tab页面嵌套Tab

页面布局参考

关键代码参考

关键代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Popup.Master" AutoEventWireup="true"
    CodeBehind="FareInformationDetail.aspx.cs" Inherits="TravelExpert.T2.Web.QueryForSales.FareInformationDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        var condition = "";
        $(function () {
            $("#<%=hdFareListID.ClientID %>").val(getQueryString("id"));
            $("#<%=hdFareInfoID.ClientID %>").val(getQueryString("infoid"));
            $("#<%=hdFarePriceNo.ClientID %>").val(getQueryString("priceid"));

            if ($.trim($("#<%=hdFareInfoID.ClientID %>").val()) != "") {
                condition += '&fareinfoid=' + $("#<%=hdFareInfoID.ClientID %>").val();
            }
            if ($.trim($("#<%=hdFarePriceNo.ClientID %>").val()) != "") {
                condition += '&farepriceno=' + $("#<%=hdFarePriceNo.ClientID %>").val();
            }
            $("#<%=hdKeyword.ClientID %>").val(condition);


            $(".refundFareLists-tab-content").tabs({
                selected: 0,
                select: function (event, ui) {
                    var id = $(".refundFareLists-tab-content ul a").eq(ui.index).attr("href");
                    switch (id) {
                        case "#WebFareList":
                            //LoadFareList;
                            break;
                    }
                }
            });

            LoadListEnglish;
            LoadListChinese;
            LoadListRefundFareLists;
            LoadListFareLists;
            LoadFareLevelCities;
            LoadListFaresFare;
            selectOnChange;
        });       
    </script>
    <script type="text/javascript">
        var LoadListEnglish = $(function () {
            $("#listEnglish").bindGrid("pageEnglish",
                    ['Fare News No.', 'Heading'],
                    [
                        { name: 'FareNewsRefNo', index: 'FareNewsRefNo', align: 'center' },
                        { name: 'FareNewsHeading', index: 'FareNewsHeading' }
                    ],
                    "../WebService/DataService.svc/GetFareInfoNews",
                    { keywordID: "<%=hdKeyword.ClientID %>", height: 200,  920, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false });
        });
        var LoadListChinese = $(function () {
            $("#listChinese").bindGrid("pageChinese",
                    ['Fare News No.', 'Heading'],
                    [
                        { name: 'FareNewsRefNo', index: 'FareNewsRefNo', align: 'center' },
                        { name: 'FareNewsHeading', index: 'FareNewsHeading' }
                    ],
                    "../WebService/DataService.svc/GetFareInfoNews",
                    { keywordID: "<%=hdKeyword.ClientID %>", height: 200,  920, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false });
        });

        var fareListFiles = function (no) {
            $('#hdFareListNo').val(no);
            $('#listFareList').trigger("reloadGrid");
        }
　　　　　<%-- 表格绑定格式 --%>
        var LoadListRefundFareLists = $(function () {
            $("#listRefundFareLists").bindGrid("pageRefundFareLists",
                    ['FareInfoID', '', 'Supplier', 'Fare List No.'],
                    [
                        { name: 'FareInfoID', index: 'FareInfoID', hidden: true, key: true },
                        { name: 'Refund', index: 'Refund', hidden: true },
                        { name: 'Supplier_Name', index: 'Supplier_Name', align: 'center' },
                        { name: 'FileNo', index: 'FileNo' }
                    ],
                    "../WebService/DataService.svc/GetRefundFareLists",   //此处调用WebService中的方法，可通过../**/**?id=*或keywordID两种方式传参，并由**（id）{}方式获取；目前来看应该是优先获取?id=*参数。
                    { keywordID: "<%=hdKeyword.ClientID %>", height: 200,  920, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false,
                        onSelectRow: function (rowid) {
                            var selectRow = $("#listRefundFareLists").jqGrid('getGridParam', 'selrow');
                            var dataRow = $("#listRefundFareLists").jqGrid('getRowData', selectRow);   //获取点击行信息

                            $("#<%=txtRefund.ClientID %>").val(dataRow.Refund);
                            fareListFiles(dataRow.FileNo);
                        }
                    });
        });

        var LoadListFareLists = $(function () {
            $("#listFareLists").bindGrid("pageFareLists",
                    ['FareInfoID', 'Supplier', 'Adult', 'Child', 'Senior', 'SupplierID'],
                    [
                        { name: 'FareInfoID', index: 'FareInfoID', hidden: true, key: true },
                        { name: 'Supplier_Name', index: 'Supplier_Name', align: 'center' },
                        { name: 'Supplier_Adult', index: 'Supplier_Adult' },
                        { name: 'Supplier_Child', index: 'Supplier_Child' },
                        { name: 'Supplier_Senior', index: 'Supplier_Senior' },
                        { name: 'SupplierID', index: 'SupplierID', hidden: true }
                    ],
                    "../WebService/DataService.svc/GetRefundFareListsFare",
                    { keywordID: "<%=hdKeyword.ClientID %>", height: 100,  360, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false,
                        onSelectRow: function () {
                            var selectRow = $("#listFareLists").jqGrid('getGridParam', 'selrow');
                            var dataRow = $("#listFareLists").jqGrid('getRowData', selectRow);

                            $("#<%=hdSupplierAdult.ClientID %>").val(dataRow.Supplier_Adult);
                            $("#<%=hdSupplierChild.ClientID %>").val(dataRow.Supplier_Child);
                            $("#<%=hdSupplierSenior.ClientID %>").val(dataRow.Supplier_Senior);
                            CalFee();
                        },
                        ondblClickRow: function (row) {
                            var rowData = $("#listFareLists").jqGrid('getRowData', row);
                            top.$.fn.popupDialogSecondary("Business Counterpart --- View --- " + rowData.Supplier_Name, "../Master/Business/BusinessCounterpartDetail.aspx?action=view&Id=" + rowData.SupplierID + "&open=dialog", 660, 1100);
                        }
                    });
        });

        function CalFee() {
            //todo 计算的方式等有数据时再测试
            var sAdult = $("#<%=hdSupplierAdult.ClientID %>").val();
            var sChild = $("#<%=hdSupplierChild.ClientID %>").val();
            var sSenior = $("#<%=hdSupplierSenior.ClientID %>").val();
            var adult = $("#<%=hdAdult.ClientID %>").val();
            var child = $("#<%=hdChild.ClientID %>").val();
            var senior = $("#<%=hdSenior.ClientID %>").val();

            $("#<%=lblAdult.ClientID %>").text(DataFloatToZero(DataIsNaN(adult)) - DataFloatToZero(DataIsNaN(sAdult)));
            $("#<%=lblChild.ClientID %>").text(DataFloatToZero(DataIsNaN(child)) - DataFloatToZero(DataIsNaN(sChild)));
            $("#<%=lblSenior.ClientID %>").text(DataFloatToZero(DataIsNaN(senior)) - DataFloatToZero(DataIsNaN(sSenior)));
        }
        function DataFloatToZero(data) {
            var toFloat;
            try {
                toFloat = parseFloat(data);
            }
            catch (e) {
                toFloat = 0;
            }
            return toFloat;
        }

        function DataIsNaN(data) {
            if (!isNaN(data)) {
                return data;
            }
            else {
                return 0;
            }
        }

        var LoadListFaresFare = $(function () {
            $("#listFaresFare").bindGrid("pageFaresFare",
                    ['Fare_ListID', 'Start Date', 'End Date', 'Class', 'Adult', 'Child', 'Senior', 'Ref.Price'],
                    [
                        { name: 'Fare_ListID', index: 'Fare_ListID', hidden: true, key: true },
                        { name: 'StartDate', index: 'StartDate', align: 'center' },
                        { name: 'EndDate', index: 'EndDate' },
                        { name: 'Class', index: 'Class' },
                        { name: 'adult', index: 'adult' },
                        { name: 'Child', index: 'Child' },
                        { name: 'Senior', index: 'Senior' },
                        { name: 'RefPrice', index: 'RefPrice' }
                    ],
                    "../WebService/DataService.svc/GetFareInfoPriceResults",
                    { keywordID: "<%=hdKeyword.ClientID %>", height: 200,  500, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false,
                        onSelectRow: function (rowid) {
                            var selectRow = $("#listFaresFare").jqGrid('getGridParam', 'selrow');
                            var dataRow = $("#listFaresFare").jqGrid('getRowData', selectRow);

                            $("#<%=hdAdult.ClientID %>").val(dataRow.adult);
                            $("#<%=hdChild.ClientID %>").val(dataRow.Child);
                            $("#<%=hdSenior.ClientID %>").val(dataRow.Senior);

                            CalFee();
                        }
                    });
        });

        var LoadFareLevelCities = $(function () {
            $("#listFareLevelCities").bindGrid("pageFareLevelCities",
                    ['City Code', 'Comm City'],
                    [
                        { name: 'CityCode', index: 'CityCode' },
                        { name: 'CommCity', index: 'CommCity' }
                    ],
                    "../WebService/DataService.svc/GetFareLevelCities",
                    { keywordID: "<%=hdKeyword.ClientID %>", height: 100,  360, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false });
        });

        var selectOnChange = $(function () {
            $("#<%=ddl_Currency.ClientID %>").change(function () {
                var tmep = "&currency=" + this.value;
                $("#<%=hdKeyword.ClientID %>").val(condition + tmep);
                FuzzyQuery("listFaresFare");
                FuzzyQuery("listFareLists");
                //LoadListFaresFare;
            });
        })

        var LoadFareList = $(function () {
            $("#listFareList").bindGrid("pagerFareList",
                ['Fare_ListID', 'Fare Name', 'Last Modified Date'],
                [
                    { name: 'Fare_ListID', index: 'Fare_ListID', hidden: true, key: true },
                    { name: 'FareInfoNo', index: 'FareInfoNo',  300, sortable: false, formatter: function (cellvalue, options, rowObject) { return FormatDialogFile("listFareList", options, cellvalue); } },
                    { name: 'DateTime', index: 'DateTime',  120, sortable: false }
                ],
                "../WebService/DataService.svc/FareInfoUploads",
                { keywordID: 'hdFareListNo', height: 100,  900, multiSelect: false, loadWithSearch: true, refresh: false });
        });

        function FormatDialogFile(gridId, options, cellvalue) {
            var fareinfono = $('#hdFareListNo').val();
            var html = '<a target="_blank" href="../Upload/FareList/' + fareinfono + '/' + cellvalue + '">' + cellvalue + '</a>';
            return html;
        }
        
    </script>
    <style type="text/css">
        .f-l-fare
        {
            float: left;
            width: 510px;
        }
        .f-r-fare
        {
            float: right;
            width: 400px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
    <asp:HiddenField ID="hdKeyword" runat="server" />
    <asp:HiddenField ID="hdFareListID" runat="server" />
    <asp:HiddenField ID="hdFareInfoID" runat="server" />
    <input type="hidden" id="hdFareListNo" />
    <asp:HiddenField ID="hdFarePriceNo" runat="server" />
    <asp:HiddenField ID="hdSupplierAdult" runat="server" />
    <asp:HiddenField ID="hdSupplierChild" runat="server" />
    <asp:HiddenField ID="hdSupplierSenior" runat="server" />
    <asp:HiddenField ID="hdAdult" runat="server" />
    <asp:HiddenField ID="hdChild" runat="server" />
    <asp:HiddenField ID="hdSenior" runat="server" />
    <div class="tab-content">
        <div class="common-tab-title">
            <ul>
                <li class="active"><a href="#EnglishConditions"><span>English Conditions</span></a></li>
                <li><a href="#ChineseConditions"><span>Chinese Conditions</span></a></li>
                <li><a href="#General"><span>General</span></a></li>
                <li><a href="#Fare"><span>Fare</span></a></li>
                <li><a href="#RefundFareLists"><span>Refund / Fare Lists</span></a></li>
                <li><a href="#Remark"><span>Remark</span></a></li>
            </ul>
        </div>
        <div id="EnglishConditions" class="hide">
            <table id="listEnglish">
            </table>
            <div id="pageEnglish">
            </div>
            <div class="grid-operation-bottom">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtEnglish"
                    CssClass="full-txtarea"></asp:TextBox>
            </div>
        </div>
        <div id="ChineseConditions" class="hide">
            <table id="listChinese">
            </table>
            <div id="pageChinese">
            </div>
            <div class="grid-operation-bottom">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtChinese"
                    CssClass="full-txtarea"></asp:TextBox>
            </div>
        </div>
        <div id="General" class="hide">
            <table class="edit-form">
                <tr>
                    <th>
                        Fare Type:
                    </th>
                    <td>
                        <asp:TextBox runat="server" ID="txtFareType1" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtFareType2" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtFareType3" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtFareType4" CssClass="textbox"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>
                    </th>
                    <td>
                        <asp:TextBox runat="server" ID="txtFareType5" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtFareType6" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtFareType7" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtFareType8" CssClass="textbox"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>
                        Validity--Min:
                    </th>
                    <td>
                        <asp:TextBox runat="server" ID="txtMin" CssClass="textbox"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>
                        Validity--Max:
                    </th>
                    <td>
                        <asp:TextBox runat="server" ID="txtMax" CssClass="textbox"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>
                        Airline:
                    </th>
                    <td>
                        <asp:TextBox runat="server" ID="txtAirline1" CssClass="textbox"></asp:TextBox>
                        <asp:TextBox runat="server" ID="txtAirline2" CssClass="textbox"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>
                        Connecting City:
                    </th>
                    <td>
                        <asp:TextBox runat="server" ID="txtConnectionCity" CssClass="textbox large"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </div>
        <div id="Fare" class="hide">
            <fieldset class="f-l-fare">
                <legend>Fare</legend>
                <table id="listFaresFare">
                </table>
                <div id="pageFaresFare">
                </div>
                <br />
                <table class="edit-form">
                    <tr>
                        <th>
                            Undercut Price:
                        </th>
                        <td>
                            Adult:(
                            <asp:Label ID="lblAdult" runat="server" ForeColor="Red"></asp:Label>
                            ) Child:(
                            <asp:Label ID="lblChild" runat="server" ForeColor="Red"></asp:Label>) Senior:(
                            <asp:Label ID="lblSenior" runat="server" ForeColor="Red"></asp:Label>)
                        </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset class="f-r-fare">
                <legend>Supplier Lists</legend>
                <table id="listFareLists">
                </table>
                <div id="pageFareLists">
                </div>
                <br />
                <legend>Same Fare Level Cities</legend>
                <table id="listFareLevelCities">
                </table>
                <div id="pageFareLevelCities">
                </div>
                <br />
                <table class="edit-form">
                    <tr>
                        <th>
                            <font color='red'>Currency:</font>
                        </th>
                        <td>
                            <%--<asp:TextBox runat="server" ID="txtCurrency" Text="HKD" CssClass="textbox"></asp:TextBox>--%>
                            <asp:DropDownList ID="ddl_Currency" runat="server">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Effective Date:
                        </th>
                        <td>
                            <asp:TextBox runat="server" ID="txtEffective" CssClass="textbox"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Expiry Date:
                        </th>
                        <td>
                            <asp:TextBox runat="server" ID="txtExpiry" CssClass="textbox"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div id="RefundFareLists" class="hide">
            <%--         important code--%>
            <table id="listRefundFareLists">
            </table>
            <div id="pageRefundFareLists">
            </div>
            <div class="refundFareLists-tab-content">
                <ul>
                    <li class="active"><a href="#WebFareList"><span>Web Fare List</span></a></li>
                    <li><a href="#Refund"><span>Refund</span></a></li>
                </ul>
                <div id="WebFareList">
                    <table id="listFareList">
                    </table>
                    <div id="pagerFareList" class="left">
                    </div>
                    </div>
                <div id="Refund">
                    <div class="grid-operation-bottom">
                        <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtRefund"
                            CssClass="full-txtarea"></asp:TextBox>
                    </div>
                </div>
        </div>
    </div>
    <div id="Remark" class="hide">
        <div class="grid-operation-bottom">
            <asp:TextBox TextMode="MultiLine" Columns="20" Width="94%" runat="server" ID="txtRemark"
                CssClass="full-txtarea"></asp:TextBox>
        </div>
    </div>
    </div>
    <div class="form-operation clear">
        <ul class="log-info two-columns">
            <li>Modified On:<asp:Label runat="server" ID="lblModifiedOn"></asp:Label></li>
            <li>Ref.No.:<asp:Label runat="server" ID="lblRefNo"></asp:Label>
            </li>
            <li>Fare Price No.:<asp:Label runat="server" ID="lblFarePriceNo"></asp:Label></li>
        </ul>
        <div class="buttons">
            <input type="button" class="btn-back btnIframeClose" value="Close" />
        </div>
    </div>
</asp:Content>