Ich habe eine Webseite, die das jquery Tabs-Steuerelement verwendet. Auf dieser Seite werden die Registerkarten basierend auf dem, was der Benutzer auswählt, dynamisch generiert. Diese Registerkarten zeigen den Inhalt von Seiten in meiner Web-App. Zum Beispiel wählt der Benutzer die Kategorie "Inventar" und wählt dann die Option "Objekte" und lädt die Webseite "Inventar -> Objekte" in einem neuen Tab. Auf der "Items" -Seite gibt es Links, auf die der Nutzer klicken kann, um auf der Registerkarte zu einer anderen Webseite in meiner Web-App zu navigieren (zB: Artikel bearbeiten). Klickt der Benutzer auf eine andere Registerkarte (z. B. die Registerkarte "Aufträge") und kehrt dann zu seiner Registerkarte "Elemente" zurück, aktualisiert er die Registerkarte auf der Seite, die die Registerkarte lädt, wenn sie neu erstellt wird, anstelle der letzten Stelle des Benutzers Er verließ die Registerkarte.jquery tabs - Speichern Registerkarte Inhalt bei der Navigation innerhalb der Registerkarte
Wie kann ich den Ort beibehalten, an dem der Benutzer war, als er den Tab verlassen hat?
Ich benutze MVC 4 Razor und jquery.
Für mehr Klarheit bitte meine komplette html unten:
<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>
Sie können Cookies oder localStorage verwenden, um einen Status zu erhalten. Also jedes Mal, wenn ein Besucher auf verschiedene Registerkarten klickt, speichern Sie die Aktion in localStorage, dann laden Sie auf einer neuen Seite chceck, wenn Sie einen Zustand gespeichert haben - wenn ja, laden Sie diesen Zustand – Matus
Auch kam mir in den Sinn können Sie # verwenden, um aktuelle zu speichern Zustand! Das funktioniert besser mit Browser-Verlauf und Zurück-Taste – Matus
Können Sie ein Beispiel geben? Ich weiß, wie man die Tabliste beim Laden der Seite speichert, aber ich spreche von den Inhalten in den Tabs. Ich hoffe, dass das, was ich frage, Sinn macht. – jforward5