AJAX tab content - Facile et efficace
Il a recueilli mode utiliser Ajax pour montrer contenu dans les péginas afin de devenir sa navigation plus prética et répida. Dans cet instructif je vais expliquer comment créer un système de navigation simple qui charge le contenu d'autre pégina à l'intérieur de DIV en faisant appel à un script AJAX.
Ils peuvent voir le contenu original ici
Est suffisamment simple l'utilisation de celui-ci script, dans cet article seulement vais enseigner comme l'utilisation, j'ai futurement enragé expliquer son code.
Fichiers Necessérios
- ajaxtabscontent.zip ils (compteront les suivants fichiers) :
- demo.htm
- ajaxtabs.css
- ajaxtabs.js
- loading.gif
- shade.gif
- shadeactive.gif
- external.htm, external2.htm, external3.htm, external4.htm
Entre tags < head> et < /head> ils doivent placer le suivant code :
<link rel= " stylesheet " type= " text/css " href= " ajaxtabs.css "/>
<script type= " text/javascript " src= " ajaxtabs.js ">
/***********************************************
* Ajax Tabs Content script- © ; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact sera légal utilise
* Visit Dynamic Drive at http://www.dynamicdrive.com/ sera full source code
***********************************************/
</script>
Ce code appelle le fichier CSS pour estilizar la pégina et appelle script pour contrôler le contenu.
De suivante dans le corps de la pégina seulement tê ; m de créer une liste avec quelques attributs pour faire la liaison avec script ajax.
<ul id= " maintab " class= " shadetabs ">
<j'ai lu class= " selected ">< la href= " #default " rel= " ajaxcontentarea "> Intro< /a>< /li>
<j'ai lu>< la href= " external.htm " rel= " ajaxcontentarea "> Bird< /a>< /li>
<j'ai lu>< la href= " external2.htm " rel= " ajaxcontentarea "> Dog< /a>< /li>
<j'ai lu>< la href= " external3.htm " rel= " ajaxcontentarea "> Cat< /a>< /li>
<j'ai lu>< la href= " external4.htm " rel= " ajaxcontentarea " rev= " content.css, content.js "> Sea Otter< /a>< /li>
</ul>
<div id= " ajaxcontentarea " class= " contentstyle ">
<p> Celui-ci é ; le contenu que iré apparaîtra dans première TAB. Ce contenu non é ; chargé en utilisant AJAX. </p>
</div>
<script type= " text/javascript ">
//IMPORTANTE dans UL doivent lui donner ID qui déclareront ici de manière que script fonctionne. J'ai essayé ce ils que suggèrent dans le site officiel mais ils au cas où veuillent utiliser script dans plus d'une liste devront la déclare encore startajaxtabs (« outralista »).
// D'autre note importante celui-ci script doit rester après le code de la liste et jamais avant autrement script ne fonctionne pas. Ils peuvent place le même avant tag < /body> l'important é ; qu'il reste après les codes de la liste.
startajaxtabs (« maintab »)
</script>
Et celui-ci tout.
Este script é uma maneira bastante util e eficaz de criar conteúdo estruturado e de resposta répida.
Qualquer dúvida deixem nos comentérios.
3 Comments
Comments RSS TrackBack Identifier URI
Leave a comment
Wow!
Muito bom, a um tempo tava atrás de algo bem simples assim, mas felizmente encontrei aqui.
Muito bom ter trazido esse conteúdo do Dinamic Drive para cá e para o português.
Até mais.
Naum funciona chamando um ASPX, sabe pq ?
Não sei responder o motivo ao certo mas antes também tentei chamar imagens apenas e não funcionou.
Talvez funcione apenas chamando ficheiros html…
Resta saber se funciona com .php