- 首页
- 前端开发
- 在页面加载/重新加载时设置 Jquery ui 活动选项卡
在页面加载/重新加载时设置 Jquery ui 活动选项卡
[英] Set Jquery ui active tab on page load/reload
本文介绍了在页面加载/重新加载时设置 Jquery ui 活动选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用工作正常的 Jquery UI 选项卡的基本实现，但我想根据用户操作动态设置(或重置)活动选项卡.
如何根据查询字符串值设置活动选项卡?使用我之前的选项卡解决方案，我能够传递一个查询字符串值并在页面加载时设置活动选项卡.(由于其他技术挑战，我不得不放弃这个旧的解决方案.)
当用户在我的浏览器应用程序中选择保存"按钮并重新加载浏览器页面时，我如何才能将焦点保持在他们按下保存之前所在的选项卡上?
当用户返回浏览器应用程序的任务"页面时，如何设置活动选项卡?例如，在我的所有 Web 应用程序中，如果用户浏览到项目"页面然后返回到任务"页面，我该如何重置他们之前所在的选项卡?
Javascript:
$(function() {$("#tabs").tabs();});
HTML 示例代码:
<ul><li><a href="#tabs-1">描述</a></li><li><a href="#tabs-2">动作</a></li><li><a href="#tabs-3">资源</a></li><li><a href="#tabs-4">设置</a></li><div id="tabs-1"><p>说明内容</p>
<div id="tabs-2"><p>动作内容</p>
<div id="tabs-3"><p>资源内容</p>
<div id="tabs-4"><p>设置</p>
解决方案
经过额外的研究和反复试验，我解决了我自己的 jQuery 选项卡问题.这是一个工作示例.我不知道这是否是最优雅的解决方案，但它有效.我希望这会有所帮助.
<头><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;});});<身体><form name="tabTest" method="post" action="tab"><!-- 选项卡 3 的默认选项卡值 2 --><input type="hidden" name="currentTab" value="2"/><div id="标签"><ul><li><a href="#tabs-1">标签 1</a></li><li><a href="#tabs-2">标签 2</a></li><li><a href="#tabs-3">Tab 3</a></li><div id="tabs-1">Tab 1 内容</div><div id="tabs-2">Tab 2 内容</div><div id="tabs-3">Tab 3 内容</div>
</表单>
以下是我对之前每个问题的回答.
1.如何根据查询字符串值设置活动选项卡?我最终不需要使用查询字符串.我在我的 url 末尾添加了 #tabs-x.例如，如果我想要一个直接指向 Tab 3 的链接，我将链接编码为:
localhost:8080/pm/detail?prjID=2077#tabs-3
2.当用户在我的浏览器应用程序中选择保存"按钮并重新加载浏览器页面时，我如何才能将注意力集中在他们按下保存"之前所在的选项卡上?
我通过捕获点击事件，获取当前标签索引，然后设置一个隐藏的表单元素currentTab"来存储当前标签值来解决这个问题.然后回到 Java Servlet 中，我检索隐藏的表单元素并在页面重新加载时重置它.
$(document).ready(function() {//在页面加载时设置活动标签$("#tabs").tabs({active: document.tabTest.currentTab.value});//捕获当前标签索引.请记住，选项卡 1 的选项卡索引从 0 开始.$('#tabs a').click(function(e) {var curTab = $('.ui-tabs-active');curTabIndex = curTab.index();document.tabTest.currentTab.value = curTabIndex;});});
3.当用户返回到我的浏览器应用程序的项目页面时，如何设置活动选项卡?例如，在我的所有 Web 应用程序中，如果用户浏览到任务页面然后返回到项目页面，我该如何重置他们之前所在的选项卡?
这是通过在我的 Java Servlet 中设置会话变量来存储隐藏的表单元素currentTab"来解决的.这样，当我返回 Project 页面时，我可以像在 Save forms 操作中设置它一样重置currentTab"值.
我希望这个例子可以帮助其他人解决他们的 jQuery 选项卡问题！
I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.
How can I set the active tab based on a querystring value? With my previous tab solution I was able to pass a querystring value and set the active tab when the page loaded. (I had to abandon this older solution due to other technical challenges.)
When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
How can I set the active tab when a user returns to the Tasks page of my browser application? For example, all within my web application, if the user browses to the Projects page and then returns to the Task page, how can I reset the tab they were previously on?
Javascript:
$(function() {
$("#tabs").tabs();
});
HTML Example code:
<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>
解决方案
I solved my own jQuery tab issues after additional research and trial and error. Here's a working example. I don't know if this is the most elegant solution but it works. I hope this helps.
<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>
Here's how I answered each of my previous questions.
1. How can I set the active tab based on a querystring value?
I ended up not needing to use a querystring. I added the #tabs-x to the end of my url. For example, if I wanted a link directly to Tab 3 I coded a link as:
localhost:8080/pm/detail?prjID=2077#tabs-3
2. When the user selects the Save button in my browser application, and the browser page reloads, how can I maintain focus on the tab they were on before they pressed save?
I solved this by capturing the click event, getting the current tab index and then setting a hidden forms element "currentTab" to store the current tab value. Then back in the Java Servlet I retrieved the hidden forms elements and reset it when the page reloads.
$(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. How can I set the active tab when a user returns to the Project page of my browser application? For example, all within my web application, if the user browses to the Task page and then returns to the Project page, how can I reset the tab they were previously on?
This is solved by setting a session variable in my Java Servlet to store the hidden forms element "currentTab". That way when I return the Project page, I can reset the "currentTab" value the same way I set it in the Save forms action.
I hope this example can help someone else with their jQuery tab issues!
这篇关于在页面加载/重新加载时设置 Jquery ui 活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
