Hi,
ich möchte folgendes Script von der seite " http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx " verwenden. Leider tut sich da bei mir absolut gar nix. Ich muss dazu ehrlicherweise sagen, dass ich auch grade erst anfange mich in Javascript/Ajax - jQuery und den ganzen quatsch einzuarbeiten.
Wäre nett wenn mir jemand sagen kann was ich falsch mache, ich komm' nicht drauf.
Ursprünglich wollte ich nur ein DIV haben, dass beim navigieren auf der Website nicht neugeladen wird (wie es zum Beispiel auf http://www.esl.eu beim User-bar, der auch mittels Ajax realisiert ist, zu sehen ist. (sieht man nur wenn man registriert ist.)). Ich vermute aber, dass es einfacher ist, die komplette seite mittels Ajax zu realisieren. Liege ich da richtig?
Ich weiss dass das unvorteilhaft ist, allerdings brauche ich einen Content, der auf jeder Seite angezeigt- und nicht refreshed wird.
Mfg r0X
ich möchte folgendes Script von der seite " http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx " verwenden. Leider tut sich da bei mir absolut gar nix. Ich muss dazu ehrlicherweise sagen, dass ich auch grade erst anfange mich in Javascript/Ajax - jQuery und den ganzen quatsch einzuarbeiten.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Liste-Navi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("#documents a").click(function() {
addTab($(this));
});
function addTab(link) {
// hide other tabs
$("#tabs li").removeClass("current");
$("#content p").hide();
// add new tab and related content
$("#tabs").append("<li class='current'><a class='tab' id='" +
$(link).attr("rel") + "' href='#'>" + $(link).html() +
"</a><a href='#' class='remove'>x</a></li>");
$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
$(link).attr("title") + "</p>");
// set the newly added tab as curren
$("#" + $(link).attr("rel") + "_content").show();
}
$('#tabs a.tab').live('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
});
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// if there is no current tab and if there are still tabs left, show the first one
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// find the first tab
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// get its link name and show related content
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}
</script>
</head>
<body>
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li><a href="#" rel="Document1" title="This is the content of Document1">Document1</a></li>
<li><a href="#" rel="Document2" title="This is the content of Document2">Document2</a></li>
<li><a href="#" rel="Document3" title="This is the content of Document3">Document3</a></li>
<li><a href="#" rel="Document4" title="This is the content of Document4">Document4</a></li>
<li><a href="#" rel="Document5" title="This is the content of Document5">Document5</a></li>
</ul></div><div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</body>
</html>Wäre nett wenn mir jemand sagen kann was ich falsch mache, ich komm' nicht drauf.
Ursprünglich wollte ich nur ein DIV haben, dass beim navigieren auf der Website nicht neugeladen wird (wie es zum Beispiel auf http://www.esl.eu beim User-bar, der auch mittels Ajax realisiert ist, zu sehen ist. (sieht man nur wenn man registriert ist.)). Ich vermute aber, dass es einfacher ist, die komplette seite mittels Ajax zu realisieren. Liege ich da richtig?
Ich weiss dass das unvorteilhaft ist, allerdings brauche ich einen Content, der auf jeder Seite angezeigt- und nicht refreshed wird.
Mfg r0X
