2010-09-20 4 views
0



Utilisation de la charge() Le site pour voir l'erreur (cliquez sur la maison, modèles, etc liens): http://bit.ly/9AE2RIJQuery: commande



Je suis en train d'obtenir le #content-container de autres pages à charger dans les pages en cours #content-container. Je peux le faire, mais ce que le .load en JQuery semble faire est de faire comme si:

<div id=content-container style="display:block"> 
    <div id=content-container> 
     OTHER PAGE CONTENT HERE 
    </div> 
</div> 

Par conséquent, lorsque je suis en utilisant un fond transparent comme je suis sur #-conteneur de contenu, il crée 2 fonds, ainsi gâcher la transparence. Il semble également hériter du padding ou de la marge du # content-container en lui donnant un offset.

N'existe-t-il pas un moyen de prendre juste l'intérieur de # content-container et de le charger dans le # content-container actuel; Tels que:

<div id=content-container> 
     OTHER PAGE CONTENT HERE 
</div> 

Code JQUERY ici: (extrait de l'exemple à http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/)

$(document).ready(function() { 

    var hash = window.location.hash.substr(1); 
    var href = $('#sub-navigation li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #content-container'; 
      $('#content-container').load(toLoad) 
     }           
    }); 

    $('#sub-navigation li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #content-container'; 
     $('#content-container').hide('fast',loadContent); 


     //$('#load').remove(); 
     //$('#wrapper').append('<span id="load">LOADING...</span>'); 
     //$('#load').fadeIn('normal'); 
     //window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('#content-container').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('#content-container').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
      //$('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

}); 

S'il vous plaît noter les commentaires vont être de fonctionnalités à venir.

Répondre

2

Lorsque vous définissez votre variable toLoad, ajoutez la tous les enfants sélecteur afin que vous n'obteniez pas l'élément parent.

par exemple. -

var toLoad = $(this).attr('href')+' #content-container > *'; 

De cette façon, le var toLoad aura seulement les enfants de # contenu contenant

Ou si cela ne fonctionne pas pour vous, vous pouvez appeler la charge sur un élément non ajouté au dom Cependant, comme ceci:

var $div = $("<div/>"); 
$div.load(toLoad); 
$("#content-container").html($div.contents()); 
+0

Parfait. Merci. – ParoX

0

Chargez votre contenu dans une variable/objet

comme ceci:

var contentContainerContent = $.load(toLoad,'','') 

et l'ajouter à conteneur du contenu comme si

$("#content-container").html(contentContainerContent); 
+0

La fonction 'load' définira le' html() 'du sélecteur spécifié pour tout ce qui est retourné. Donc '$ (" # content-container "). Load (toLoad, '', '');' est la même chose – Robert