Kendo选项卡不能正确加载第一个选项卡
Kendo选项卡不能正确加载第一个选项卡
提问于 2013-11-26 04:24:56
我目前使用的是新的Q3版本的Kendo，在使用Kendo tabstrip控件时遇到了一些问题。我有一个包含11个选项卡的选项卡条，第三个选项卡会从页面导航到不同的视图。在此视图中，当我向后导航(使用breadcrumbs或通过浏览器上的back按钮)时，我选择第三个选项卡并刷新其内容。然而，在这个反向页面导航之后，当我单击第一个选项卡时不会显示它的内容；我所看到的只是选项卡中的灰色背景。当我检查控件时，我可以看到所有的控件都有正确绑定的信息。如果我选择第一个选项卡，当我导航回页面时，一切都会正确加载。
我不知道哪里出了问题，也不知道如何解决这个问题。任何帮助都将不胜感激，谢谢！
--EDIT--下面是标签条的设置方式。
<div class="" id="tabstrip">
<ul>
<li class="k-state-active">
<i class="green icon-info-sign bigger-110"></i>
@ResxStrings.PersonStrings.tab_juryMaster_lbl_CandidateInfo
</li>
<li>
<i class="green icon-info-sign bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_juryMaster
</li>
<li>
<i class="green icon-question-sign bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_eQuestion
</li>
<li>
<i class="green icon-bell bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_Events
</li>
<li>
<i class="green icon-flag bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_Flags
</li>
<li>
<i class="green icon-file bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_DM
</li>
<li>
<i class="green icon-calendar bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_Scheduling
</li>
<li>
<i class="green icon-money bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_Financials
</li>
<li>
<i class="green icon-exchange bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_Merge
</li>
<li>
<i class="green icon-suitcase bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_NameHistory
</li>
<li>
<i class="green icon-list-ul bigger-110"></i>
@ResxStrings.PersonStrings.tab_heading_JudgesNotes
</li>
</ul>
<div><div id="candidateInfo"></div></div>
<!--BEGIN juryMaster CONTENT-->
<div id="juryMaster">
@Html.Partial("~/Views/Person/Partial_JuryMaster.cshtml")
</div>
<!-- /juryMaster -->
<!--BEGIN eQuestion CONTENT-->
<div id="eQuestion">
@Html.Partial("~/Views/Person/Partial_eQuestion.cshtml")
</div>
<!-- /eQuestion -->
<!-- BEGIN Events CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_Events.cshtml")
</div>
<!--/Events-->
<!-- BEGIN Flags CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_Flags.cshtml")
</div>
<!--/Flags-->
<!-- BEGIN DM CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_DM.cshtml")
</div>
<!--/DM-->
<!-- BEGIN Scheduling CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_Scheduling.cshtml")
</div>
<!--/Scheduling-->
<!-- BEGIN Financials CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_Financials.cshtml")
</div>
<!--/Financials-->
<!-- BEGIN MergeUnMerge CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_MergeUnMerge.cshtml")
</div>
<!--/MergeUnMerge-->
<!-- BEGIN NameHistory CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_NameHistory.cshtml")
</div>
<!--/NameHistory-->
<!-- BEGIN JudgesNotes CONTENT-->
<div>
@Html.Partial("~/Views/Person/Partial_JudgesNotes.cshtml")
</div>
<!--/JudgesNotes-->
在脚本中：
$("#tabstrip").kendoTabStrip({
select: onSelect,
effects: "expand:vertical",
activate: onActivate,
animation: false
});select方法获取第一个选项卡并选择/刷新它，而activate方法只涉及单独选项卡上的网格格式。下面是选择第一个选项卡时调用的方法
function loadJurorSummary(jurorID) {
$.ajax({
url: '@Url.Content("~/Person/getPersonSummary")',
type: "GET",
data: { id: jurorID },
success: function (data) {
$("#candidateInfo").html(data);
}
});
}在同一页面上第一次加载和导航时，一切工作正常。
回答 1
Stack Overflow用户
发布于 2013-11-26 23:44:52
从demo for ajax loaded content可以看出，您需要将内容urls作为数组传递到选项卡条声明中：
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn"} },
contentUrls: [
'../../content/web/tabstrip/ajax/ajaxContent1.html',
'../../content/web/tabstrip/ajax/ajaxContent2.html',
'../../content/web/tabstrip/ajax/ajaxContent3.html'
]
});
});
当你进入开发工具时(假设你使用的是Chrome或IE)，你是否在控制台中看到任何脚本错误？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20202577
复制相关文章
相似问题
腾讯云开发者
