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, width: 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, width: 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, width: 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, width: 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, width: 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, width: 360, multiSelect: false, loadWithSearch: true, selectFirstRow: true, refresh: false });
});

var selectOnChange = $(function () {
$("#<%=ddl_Currency.ClientID %>").change(function () {
var tmep = "¤cy=" + 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', width: 300, sortable: false, formatter: function (cellvalue, options, rowObject) { return FormatDialogFile("listFareList", options, cellvalue); } },
{ name: 'DateTime', index: 'DateTime', width: 120, sortable: false }
],
"../WebService/DataService.svc/FareInfoUploads",
{ keywordID: 'hdFareListNo', height: 100, width: 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">
      
<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">
      
<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>