Skip to content

Instantly share code, notes, and snippets.

@kahlil
Created June 30, 2010 09:08
Show Gist options
  • Save kahlil/458429 to your computer and use it in GitHub Desktop.
Save kahlil/458429 to your computer and use it in GitHub Desktop.
Ajaxify a tab navigation
// Dann im Javascript sieht’s so aus:
// hier erst mal initialisiert und definiert:
var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
$(container_div).html('<br><br><br><center><p><img src="/img/loader_big_fl.gif" /></p></center>').animate({opacity:0.2}, //Turn the opacity to 0
function(){ // the callback, loads the content with ajax
$(container_div).load(url+" "+content_div, //only loads the selected portion
function(){
$(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
}
);
});
},
ajaxify_links: function(elements){
$(elements).click(function(){
AjaxContent.getContent(this.href);
//AjaxContent.css(this.selected);
return false; //prevents the link from beign followed
});
},
init: function(params){ //sets the initial parameters
container_div = params.containerDiv;
content_div = params.contentDiv;
return this; //returns the object in order to make it chainable
}
}
}();
// (details gibt’s hier: http://max.jsrhost.com/ajaxify/ )
// und hier wird das ganze aufgerufen:
$(function(){
AjaxContent.init({containerDiv:"#productdivcontainer",contentDiv:"#productdivcontainer"}).ajaxify_links("#TabNav a");
});
<div id=”TabNav”>
<ul class="shadetabs">
<li><a href=”seite1.html">link 1</a></li>
<li><a href=”seite2.html">link 2</a></li>
<li><a href=”seite3.html">link 3</a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment