Guten Tag,
ich habe mit Hilfe von einem Tutorial eine Tabfunktion in mein Script eingebaut.
Das alles funktioniert zwar aber ich möchte verhindern das die page.php "gecachet" werden sondern sie sollen bei jeden Click neu geholt werden.
Das hier lädt die Daten der jeweiligen page.php und soll erst bei click geladen werden.
Der modifizierte funktionierende ganze Code (ohne CSS)
Ich denke nicht das es ein schweres Problem ist leider bin ich noch immer nicht firm genug mit Javascript.
Würde mich freuen wenn mir jemand helfen kann.
Gruss Joe.
ich habe mit Hilfe von einem Tutorial eine Tabfunktion in mein Script eingebaut.
Das alles funktioniert zwar aber ich möchte verhindern das die page.php "gecachet" werden sondern sie sollen bei jeden Click neu geholt werden.
Das hier lädt die Daten der jeweiligen page.php und soll erst bei click geladen werden.
HTML:
/* Setting the page data for each hyperlink: */
tmp.find('a').data('page',j);Der modifizierte funktionierende ganze Code (ohne CSS)
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Defining an array with the tab text and AJAX pages: */
var Tabs = {
'Ress' : 'pages/page1.php',
'Lager' : 'pages/page2.php',
'Gepäck' : 'pages/page3.php',
'Lager2' : 'pages/page4.php'
}
/* The available colors for the tabs: */
var colors = ['blue','green','red','orange'];
/* The colors of the line above the tab when it is active: */
var topLineColor = {
blue:'lightblue',
green:'lightgreen',
red:'red',
orange:'orange'
}
/* Looping through the Tabs object: */
var z=0;
$.each(Tabs,function(i,j){
/* Sequentially creating the tabs and assigning a color from the array: */
var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
/* Setting the page data for each hyperlink: */
tmp.find('a').data('page',j);
/* Adding the tab to the UL container: */
$('ul.tabContainer').append(tmp);
})
/* Caching the tabs into a variable for better performance: */
var the_tabs = $('.tab');
the_tabs.click(function(){
/* "this" points to the clicked tab hyperlink: */
var element = $(this);
/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
var bg = element.attr('class').replace('tab ','');
/* Removing the line: */
$('#overLine').remove();
/* Creating a new line with jQuery 1.4 by passing a second parameter: */
$('<div>',{
id:'overLine',
css:{
display:'none',
width:element.outerWidth()-2,
background:topLineColor[bg] || 'white'
}}).appendTo(element).fadeIn('slow');
/* show the gif preloader and run an AJAX request: */
$('#contentHolder').html('<img src="img/img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
$.get(element.data('page'),function(msg){
$('#contentHolder').html(msg);
});
})
/* Emulating a click on the first tab so that the content area is not empty: */
the_tabs.eq(0).click();
});</script>
<div id="main">
<ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul>
<div class="clear"></div>
<div id="tabContent">
<div id="contentHolder">
<!-- The AJAX fetched content goes here -->
</div>
</div>
</div>Ich denke nicht das es ein schweres Problem ist leider bin ich noch immer nicht firm genug mit Javascript.
Würde mich freuen wenn mir jemand helfen kann.
Gruss Joe.
