[英]Set Jquery ui active tab on page load/reload
我正在使用Jquery UI选项卡的基本实现,它们工作正常,但我想根据用户操作动态设置(或重置)活动选项卡。
如何根据查询字符串值设置活动选项卡? 使用我之前的选项卡解决方案,我能够传递查询字符串值并在页面加载时设置活动选项卡。 (由于其他技术挑战,我不得不放弃这个旧解决方案。)
当用户在浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时,如何在按下保存之前将焦点保持在他们所处的选项卡上?
当用户返回浏览器应用程序的“任务”页面时,如何设置活动选项卡? 例如,在我的Web应用程序中,如果用户浏览到“项目”页面然后返回“任务”页面,我该如何重置之前的选项卡?
使用Javascript:
$(function() {
$("#tabs").tabs();
});
HTML示例代码:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Action</a></li>
<li><a href="#tabs-3">Resources</a></li>
<li><a href="#tabs-4">Settings</a></li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
经过额外的研究和反复试验后,我解决了自己的jQuery选项卡问题。 这是一个有效的例子。 我不知道这是否是最优雅的解决方案,但它有效。 我希望这有帮助。
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.10.1.custom.min.css">
<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({active: document.tabTest.currentTab.value});
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
</script>
</head>
<body>
<form name="tabTest" method="post" action="tab">
<!-- default tab value 2 for Tab 3 -->
<input type="hidden" name="currentTab" value="2"/>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">Tab 1 Content</div>
<div id="tabs-2">Tab 2 Content</div>
<div id="tabs-3">Tab 3 Content</div>
</div>
</form>
</body>
以下是我回答以前每个问题的方法。
1.如何根据查询字符串值设置活动选项卡? 我最终不需要使用查询字符串。 我将#tabs-x添加到我的网址末尾。 例如,如果我想直接链接到Tab 3,我将链接编码为:
localhost:8080/pm/detail?prjID=2077#tabs-3
2.当用户在浏览器应用程序中选择“保存”按钮并重新加载浏览器页面时,如何在按下保存之前将焦点保持在他们所处的选项卡上?
我通过捕获click事件,获取当前选项卡索引,然后设置隐藏的表单元素“currentTab”来存储当前选项卡值来解决这个问题。 然后回到Java Servlet中,我检索了隐藏的表单元素,并在页面重新加载时重置它。
$(document).ready(function() {
// Set active tab on page load
$("#tabs").tabs({active: document.tabTest.currentTab.value});
// Capture current tab index. Remember tab index starts at 0 for tab 1.
$('#tabs a').click(function(e) {
var curTab = $('.ui-tabs-active');
curTabIndex = curTab.index();
document.tabTest.currentTab.value = curTabIndex;
});
});
3.当用户返回浏览器应用程序的“项目”页面时,如何设置活动选项卡? 例如,在我的Web应用程序中,如果用户浏览“任务”页面然后返回“项目”页面,我该如何重置之前使用的选项卡?
这可以通过在我的Java Servlet中设置一个会话变量来存储隐藏的表单元素“currentTab”来解决。 这样,当我返回Project页面时,我可以重置“currentTab”值,就像我在Save forms action中设置它一样。
我希望这个例子可以帮助其他人解决他们的jQuery选项卡问题!
var currentTab = $('.ui-state-active a').index();
currentTab = $('#divMainContent').find('#sel_tab')[0].value;
注意:Sel_tab是隐藏字段的位置。 onclick on tabs achor link为隐藏的feild分配值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.