11489 sujets

JavaScript, DOM et API Web HTML5

[résolu] Intégrer (charger) une page html dans un "bloc"(div

Bonsoir à tous,

Je me permet de créer ce topic après avoir chiner sur ce forum et ailleurs sans succès. Je précise que mes connaissances en "webmastering" sont celles d'un débutant ++, comme le langage Smiley smile !

J'ai voulu reprendre l'idée développé par Tim Van Damne sur son site http://timvandamme.com et expliqué sur http://jqueryfordesigners.com.

Jusqu'ici tout va bien !

Il s'agit en fait d'un bloc dans lequel les éléments de texte apparaissent via le principe du jQuery accordéon (cf. image 1).
upload/28398-accordeon1.png
Vous savez, on clique sur un "item" comme par exemple "à propos" et du texte apparaît comme par magie en dessous de l'item en question avec du texte qui nous dit par exemple qu'Alsacrétion c'est formidable.

Mais que se passe-t-il quand le texte à faire apparaître est vraiment, vraiment très long ?

J'ai pensé que ce serait pas mal de le mettre dans une page html à part (d'ailleurs il y en aura plusieurs, une douzaine... ce sont des articles de presse en fait)

Ma question est le suivante : Est-il possible d'intégrer une page html dans ce "bloc" accordéon de sorte que le texte soit appelé depuis "l'extérieur" ?

J'ai fait une tentative avec
a écrit :

<object type="text/html" data="txt_article_1.html">


Mais le résultat est pas très "beau"
upload/28398-accordeon2.png
Il semble que les fonctions LOAD ou GET de la librairie jQuery permettent de faire ce genre de chose.

Mais là je débute vraiment et ne sait pas trop comment m'en sortir. Quelqu'un aurait-il une idée, SVP ? Merci

Voici les le code html de l'accordéon :


<div id="wrapper">
  <div id="datacontent">
    <ul class="navigation">
      <li><a href="#networks">Networks</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="panels">
      <div id="networks" class="panel">
		<object type="text/html" data="txt_article_1.html">
        <h2>Networks</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div id="about" class="panel">
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div id="contact" class="panel">
        <h2>Contact</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>


et voici le code JS

<script type="text/javascript" charset="utf-8">
  $('.navigation').each(function () {
    var $links = $(this).find('a'),
      panelIds = $links.map(function() { return this.hash; }).get().join(","),
      $panels = $(panelIds),
      $panelwrapper = $panels.filter(':first').parent(),
      delay = 500,
      heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
      
    $panels.hide();
    
    $links.click(function () {
      var link = this, 
        $link = $(this);
      
      // ignore if already visible
      if ($link.is('.selected')) {
        return false;
      }
      
      $links.removeClass('selected');
      $link.addClass('selected');
                    
      if ($.support.opacity) {
        $panels.stop().animate({opacity: 0 }, delay);
      }
      
      $panelwrapper.stop().animate({
        height: 0
      }, delay, function () {
        var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
        
        $panelwrapper.animate({
          height: height
        }, delay);
      });
    });
    
    $links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
  });
</script>

Modifié par warda (07 Apr 2010 - 17:32)
Tu peux effectivement charger des page via $.get et définir ce que tu veux en faire dans le callback de la fonction.

$.get('uneAutrePage.html', function(data) {
  $('#emplacementAffichage').html(data);
  alert('Ca marche!');
});


Pour les effets visuels et le principe général, il te suffit d'examiner le js de Tim Van Damme.
Tu devras juste supprimer le contenu d'une 'page' avant de charger la suivante.
Merci pour ta réponse Paolo. Je l'ai testé et ça fonctionne. Smiley biggrin

Par contre, j'ai un peu de mal à saisir ce que tu entends par

a écrit :
Tu devras juste supprimer le contenu d'une 'page' avant de charger la suivante.


... et surtout comment le mettre en oeuvre en JS. Petit rappel, je suis vraiment débutant en JS.

Une fois le "get" mis en place, le code JS donne ça :


<script type="text/javascript" charset="utf-8">
$.get('txt_article_1.html', function(data) {
  $('#networks').html(data);
});

  $('.navigation').each(function () {
    var $links = $(this).find('a'),
      panelIds = $links.map(function() { return this.hash; }).get().join(","),
      $panels = $(panelIds),
      $panelwrapper = $panels.filter(':first').parent(),
      delay = 500,
      heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
      
    $panels.hide();
    
    $links.click(function () {
      var link = this, 
        $link = $(this);
      
      // ignore if already visible
      if ($link.is('.selected')) {
        return false;
      }	  
      
      $links.removeClass('selected');
      $link.addClass('selected');
                    
      if ($.support.opacity) {
        $panels.stop().animate({opacity: 0 }, delay);
      }
      
      $panelwrapper.stop().animate({
        height: 0
      }, delay, function () {
        var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;
        
      $panelwrapper.animate({
          height: height
      }, delay);
      });
    });
    
	$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
    
  });
</script>


... disons que l'autre hic, c'est que je risque d'aller contre le principe "write less, do more" de JS+jQuery car au final, j'aurais en début de script plusieurs :

$.get('txt_article_1.html', function(data) {
  $('#networks').html(data);
});
$.get('txt_article_2.html', function(data) {
  $('#networks').html(data);
});
$.get('txt_article_3.html', function(data) {
  $('#networks').html(data);
});
... jusqu'à txt_article_12

Mais bon, si ça marche comme ça Smiley murf
Ce que je veux dire, c'est que tu récupères du contenu par 'get' pour l'insérer dans une page.
Si tu n'effaces pas ce contenu au chargement de la page suivante, ta page html va augmenter de volume et tu vas rencontrer ce que tu cherches à éviter.(cf remove())

Pour ta seconde interrogation, tu as plusieurs possibilités.
Sache que tu peux facilement manipuler du texte pour obtenir ce que tu veux.
Par exemple tu peux extraire une classe 'maClasse' et le nombre d'un id 'monId_12' pour les concaténer et aller chercher une page 'maClasse12.html'

Prends toi une matinée pour regarder les exemples de la doc jQuery, tu découvriras plein d'astuces très utiles pour tes scripts.
Modifié par paolo (30 Mar 2010 - 17:24)
Merci pour tes conseils… mais je ne crois que je ne suis pas de taille pour "écrire" moi même du jQuery ! Smiley ohwell
C'est le problème des chargés de communication qui s'improvisent ingénieur-informaticien ! Smiley langue

J'ai plongé le nez dans la doc jQuery en anglais, ai fureté quelques heures sur
http://www.siteduzero.com/tutoriel-3-160891-jquery-ecrivez-moins-pour-faire-plus.html?all=1
et puis ici aussi
http://www.jquery.info

J'ai bien réussi à comprendre 2-3 trucs qui m'ont permis au final de faire ceci

$('#victor').load('txt_article_1.html');
$('#tsai').load('txt_article_2.html');
$('#samizdat').load('txt_article_3.html');


Ce qui ne change pas beaucoup une fois repris dans la totalité du script. Mais bon c'est un peu plus "clair" (pour moi en tout cas !)


				<script type="text/javascript" charset="utf-8">

				  $('.navigation').each(function () {
				    var $links = $(this).find('a'),
				      panelIds = $links.map(function() { return this.hash; }).get().join(","),
				      $panels = $(panelIds),
				      $panelwrapper = $panels.filter(':first').parent(),
				      delay = 500,
				      heightOffset = 40; // we could add margin-top + margin-bottom + padding-top + padding-bottom of $panelwrapper
				      $('#victor').load('txt_article_1.html');
					  $('#tsai').load('txt_article_2.html');
					  $('#samizdat').load('txt_article_3.html');

				    $panels.hide();

				    $links.click(function () {
				      var link = this, 
				        $link = $(this);

				      // ignore if already visible
				      if ($link.is('.selected')) {
				        return false;
				      }	  

				      $links.removeClass('selected');
				      $link.addClass('selected');

				      if ($.support.opacity) {
				        $panels.stop().animate({opacity: 0 }, delay);
				      }

				      $panelwrapper.stop().animate({
				        height: 0
				      }, delay, function () {
				        var height = $panels.hide().filter(link.hash).css('opacity', 1).show().height() + heightOffset;

				      $panelwrapper.animate({
				          height: height
				      }, delay);
				      });
				    });

					$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

				  });
				</script>


Bien entendu, je reste à l'écoute si tu as (ou quelqu'un d'autre) des conseils.
Sujet clos
Aller à