jquery 选项卡 - 在选项卡内的导航中保存选项卡内容
jquery tabs - save tab content on navigation within tab
我有一个使用 jquery 选项卡控件的网页。在此页面中,选项卡是根据用户的选择动态生成的。这些选项卡显示我的网络应用程序中页面的内容。例如,用户选择类别 "Inventory",然后选择选项 "Items" 并在新选项卡中加载 "Inventory -> Items" 网页。在 "Items" 页面中,用户可以单击这些链接,将选项卡导航到我的网络应用程序中的不同网页(例如:编辑项目)。如果用户单击不同的选项卡(比如 "Orders" 选项卡)然后返回他的 "Items" 选项卡,它会将选项卡刷新到新创建时选项卡加载的页面,而不是最后一个位置用户在他离开标签时。
如何保留用户离开标签时所在的位置,比如编辑项目?
我正在使用 MVC 4 Razor 和 jquery。
为了更清楚,请参阅下面我的完整 html:
<script>
debugger;
$(document).ready(function () {
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $("#tabs").tabs();
$("#open_module").button().on("click", function () {
$("#dialog").dialog("open");
});
// Modal dialog init: custom buttons and a "close" callback resetting the form inside
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[0].reset();
}
});
// AddTab form: calls addTab function on submit and closes the dialog
var form = $("#dialog").find("form").on("submit", function (event) {
addTab();
$("#dialog").dialog("close");
event.preventDefault();
});
// Actual addTab function: adds new tab using the input from the form above
function addTab() {
var e = document.getElementById("page-links");
var link = e[e.selectedIndex].value;
var tabTitle = e[e.selectedIndex].text;
var tabContent = "<object type='text/html' data='" + link + "' width='800px' height='600px' style='overflow:hidden;'/>";
var label = tabTitle || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), tabContentHtml = tabContent || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
tabs.tabs("refresh");
tabCounter++;
}
// Close icon: removing the tab on click
tabs.on("click", "span.ui-icon-close", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.on("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
function LoadLinks(category) {
var url = "/Home/LoadLinks/";
var e = document.getElementById("categories");
var _custid = e[e.selectedIndex].value;
$("#page-links").empty();
$.ajax({
url: url,
data: { cat: category },
cache: false,
type: "POST",
success: function (data) {
$.each(data, function (i, data) {
$("#page-links").append('<option value="' + data.Value + '">' + data.Text + '</option>');
});
},
error: function (reponse) {
alert("error : " + reponse);
}
});
return false;
}
</script>
@{
ViewBag.Title = "my title";
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
</p>
</div>
</section>
}
<button id="open_module">Open Module</button>
<div id="dialog" title="Open Module">
<form>
<fieldset class="ui-helper-reset">
<legend>PageSelector</legend>
<label id="category-label">Category</label>
<select id="categories" onchange="javascript:LoadLinks(this.value);">
<option value="0">Select one...</option>
<option value="Inventory">Inventory</option>
<option value="CustomerManagement">Customer Management</option>
<option value="VendorManagement">Vendor Management</option>
<option value="Invoicing">Invoicing</option>
<option value="Receiving">Receiving</option>
<option value="Purchasing">Purchasing</option>
<option value="Human Resources">Human Resources</option>
<option value="OrderEntry">Order Entry</option>
</select>
<select id="page-links">
<option value="value">Select a category...</option>
</select>
</fieldset>
</form>
</div>
<div id="tabs">
<ul>
<li class="current"><a href="#tabs-1">About</a></li>
</ul>
<div id="tabs-1">
<object type="text/html" data="/Home/About" width="800px" height="600px" style="overflow:hidden;"/>
</div>
</div>
所以答案是,Chrome就是问题所在。当从 IE 和 FireFox 打开时,该站点按预期工作,只是 Chrome 不能很好地播放。很遗憾,chrome 是我的最爱:(
出于某种原因 Chrome 在您单击选项卡时重新加载它,从而导致打开默认页面。当您使用 IE 或 FireFox 时,它不会在单击时重新加载选项卡。所以现在我知道为什么有些网站是特定于浏览器的了:)
我有一个使用 jquery 选项卡控件的网页。在此页面中,选项卡是根据用户的选择动态生成的。这些选项卡显示我的网络应用程序中页面的内容。例如,用户选择类别 "Inventory",然后选择选项 "Items" 并在新选项卡中加载 "Inventory -> Items" 网页。在 "Items" 页面中,用户可以单击这些链接,将选项卡导航到我的网络应用程序中的不同网页(例如:编辑项目)。如果用户单击不同的选项卡(比如 "Orders" 选项卡)然后返回他的 "Items" 选项卡,它会将选项卡刷新到新创建时选项卡加载的页面,而不是最后一个位置用户在他离开标签时。
如何保留用户离开标签时所在的位置,比如编辑项目?
我正在使用 MVC 4 Razor 和 jquery。
为了更清楚,请参阅下面我的完整 html:
<script>
debugger;
$(document).ready(function () {
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $("#tabs").tabs();
$("#open_module").button().on("click", function () {
$("#dialog").dialog("open");
});
// Modal dialog init: custom buttons and a "close" callback resetting the form inside
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[0].reset();
}
});
// AddTab form: calls addTab function on submit and closes the dialog
var form = $("#dialog").find("form").on("submit", function (event) {
addTab();
$("#dialog").dialog("close");
event.preventDefault();
});
// Actual addTab function: adds new tab using the input from the form above
function addTab() {
var e = document.getElementById("page-links");
var link = e[e.selectedIndex].value;
var tabTitle = e[e.selectedIndex].text;
var tabContent = "<object type='text/html' data='" + link + "' width='800px' height='600px' style='overflow:hidden;'/>";
var label = tabTitle || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), tabContentHtml = tabContent || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
tabs.tabs("refresh");
tabCounter++;
}
// Close icon: removing the tab on click
tabs.on("click", "span.ui-icon-close", function () {
var panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
});
tabs.on("keyup", function (event) {
if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
$("#" + panelId).remove();
tabs.tabs("refresh");
}
});
});
function LoadLinks(category) {
var url = "/Home/LoadLinks/";
var e = document.getElementById("categories");
var _custid = e[e.selectedIndex].value;
$("#page-links").empty();
$.ajax({
url: url,
data: { cat: category },
cache: false,
type: "POST",
success: function (data) {
$.each(data, function (i, data) {
$("#page-links").append('<option value="' + data.Value + '">' + data.Text + '</option>');
});
},
error: function (reponse) {
alert("error : " + reponse);
}
});
return false;
}
</script>
@{
ViewBag.Title = "my title";
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
</p>
</div>
</section>
}
<button id="open_module">Open Module</button>
<div id="dialog" title="Open Module">
<form>
<fieldset class="ui-helper-reset">
<legend>PageSelector</legend>
<label id="category-label">Category</label>
<select id="categories" onchange="javascript:LoadLinks(this.value);">
<option value="0">Select one...</option>
<option value="Inventory">Inventory</option>
<option value="CustomerManagement">Customer Management</option>
<option value="VendorManagement">Vendor Management</option>
<option value="Invoicing">Invoicing</option>
<option value="Receiving">Receiving</option>
<option value="Purchasing">Purchasing</option>
<option value="Human Resources">Human Resources</option>
<option value="OrderEntry">Order Entry</option>
</select>
<select id="page-links">
<option value="value">Select a category...</option>
</select>
</fieldset>
</form>
</div>
<div id="tabs">
<ul>
<li class="current"><a href="#tabs-1">About</a></li>
</ul>
<div id="tabs-1">
<object type="text/html" data="/Home/About" width="800px" height="600px" style="overflow:hidden;"/>
</div>
</div>
所以答案是,Chrome就是问题所在。当从 IE 和 FireFox 打开时,该站点按预期工作,只是 Chrome 不能很好地播放。很遗憾,chrome 是我的最爱:(
出于某种原因 Chrome 在您单击选项卡时重新加载它,从而导致打开默认页面。当您使用 IE 或 FireFox 时,它不会在单击时重新加载选项卡。所以现在我知道为什么有些网站是特定于浏览器的了:)