Site one-page si hash value folosind jQuery
Astazi ne vom ocupa de realizarea unui site web intr-o singura pagina folosind jQuery.
Vom incepe cu o metoda foarte simpla de a prelua valoarea hash a unui link.
Sa luam un exemplu foarte simplu:
http://learn.mozku.com/index.html#continut
In mod normal, avem nevoie doar de continut, fara restul link-ului. Cum facem?
In primul rand trebuie sa detectam valoarea cu tot cu semnul #. O vom stoca in variabila hashval.
var hashval = location.hash;
Variabila va avea valoarea: #continut. Acum va trebui sa eliminam semnul #.
hashval = hashval.substring(1);
Variabila va avea valoarea initiala, fara semnul #.
Foarte simplu… dar ce putem face cu aceasta valoare? In primul rand putem realiza pagini web in totalitate folosind functii jQuery. Probabil ati vazut pe internet site-uri realizate intr-o singura pagina care permiteau navigarea ca intr-un site clasic.
Sa luam un exemplu.
...
<body>
<ul id="nav">
<li><a href="#acasa">meniu 1</a></li>
<li><a href="#portofoliu">meniu 2</a></li>
<li><a href="#servicii">meniu 3</a></li>
<li><a href="#contact">meniu 4</a></li>
</ul>
<div id="continut"></div>
<div class="hide" id="acasa">[bla bla bla1]</div>
<div class="hide" id="portofoliu">[bla bla bla2]</div>
<div class="hide" id="servicii">[bla bla bla3]</div>
<div class="hide" id="contact">[bla bla bla4]</div>
</body>
...
Pe site vom afisa initial div-ul continut care este gol. Restul div-urilor vor avea atribuit urmatorul cod css:
.hide { display: none }
Acum ne vom ocupa de realizarea unei navigatii foarte simple si de afisarea paginii acasa la initializarea site-ului.
$('#acasa').clone(true).appendTo('#continut').fadeIn();
$('#nav li').click(function() {
$('#continut').empty();
var pagina = $('a', this).attr('href');
$(pagina).clone(true).appendTo('#continut').fadeIn();
return false;
});
Prima data preluam continutul din div-ul acasa si il clonam in div-ul continut dupa care il afisam pe cel din urma. Navigarea se face in acelasi stil, singura diferenta este ca acasa, numele paginii, va fi generalizat si va fi preluat din atributul href al elementului a din prima lista. Astfel vom avea o metoda de afisare pentru toate paginile.
Acesta ar fi exemplul pe care vom lucra. Este ceva foarte basic, dar ce facem cu valoarea din link? La ce ne ajuta? In cadrul unui astfel de site cum putem accesa direct o anumita pagina? Avand in vedere ca fizic exista un singur fisier, va trebui sa generam o cale catre o anumita sectiune (pagina) folosindu-ne de valoarea din url (#text).
if (location.hash=="") {
$('#acasa').clone(true).appendTo('#continut').fadeIn();
} else {
var pagina = location.hash;
$(pagina).clone(true).appendTo('#continut').fadeIn();
}
Vom verifica daca hash-ul este gol, caz in care vom afisa prima pagina. Daca hash-ul are o anumita valoare, vom aplica algoritmul de la navigare, singura diferenta fiind faptul ca numele paginii il preluam din hash (location.hash). Daca vom accesa pagina nume.extensie#contact, div-ul continut va afisa continutul div-ului contact.
Asta e tot, sper ca am fost foarte clar, daca nu ati inteles ceva nu ezitati sa ma intrebati. Sa vedem codul complet acum:
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').click(function() {
$('#continut').empty();
var pagina = $('a', this).attr('href');
$(pagina).clone(true).appendTo('#continut').fadeIn();
return false;
});
if(location.hash=="") {
$('#acasa').clone(true).appendTo('#continut').fadeIn();
} else {
var pagina = location.hash;
$(pagina).clone(true).appendTo('#continut').fadeIn();
}
});
</script>
Puteti descarca fisierul folosit in acest tutorial mai jos.
 | Nume: One-Page Web Site (661B) Descriere: Using jQuery Descarcari: 19 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii) |
C’ya next time!
Ti-a placut articolul Site one-page si hash value folosind jQuery?
TweetAi nevoie de rezolvarea unei probleme la informatica?
Iti recomandam si urmatoarele articole:
3 comentarii pentru Site one-page si hash value folosind jQuery
Discuta articolul Site one-page si hash value folosind jQuery
Contul tau
Categorii
- Atestat Info C/C++ (21)
- Atestat Info Pascal (21)
- Learn AJAX (3)
- Learn Android (5)
- Learn C++ (32)
- Learn CSS (11)
- Learn Database (9)
- Learn Flash (33)
- Learn HTML (14)
- Learn JAVA (9)
- Learn Javascript (14)
- Learn jQuery (17)
- Learn Pascal (28)
- Learn PHP (21)
- Learn SQL (5)
- Learn Visual FoxPro (4)
- Tips & Tricks (22)
Mozku Network
Ne gasesti si pe Facebook
Articole noi
- Cum sa detectati rezolutia telefonului intr-o aplicatie Android
- Cum se evita oprirea fortata a unei aplicatii
- Cum sa porniti o activitate noua in Android
- Cum sa adaugati un ImageView intr-o aplicatie Android
- Cum sa adaugati un Button intr-o aplicatie Android
- Cum sa utilizati un ArrayList in Java
- Bifeaza toate checkbox-urile folosind jQuery
- Validare formular folosind jQuery
Fisiere populare
- Proiect Atestat Informatica Visual FoxPro (439)
- Twitter Patterns (202)
- Flash Newsletter (126)
- Baza de date auto revizuita (99)
- hitTest Flash (99)
Salut. Eu incerc sa invat jQuery. De cateva zile citesc tutoriale despre jQuery si parca sunt tot la inceput, nu inteleg nimic. Stiu css si html. Intrebarea mea este daca poti sa inveti jQuery fara a sti JavaScript si cat timp iti ia sa pricepi JavaScript la un nivel mediu?
Care este urmatorul pasa dupa ce ai priceput html/css ?
Sunt mai multe intrebai pana la urma dar ti-as fi foarte recunascator daca m-ai ajuta.
Sau poate mai bine ai scrie un tutorial JavaScript/jQuery pentru incepatori :).
Multumesc mult.
Salut. jQuery este o librarie javascript, deci sunt necesare cunostinte cel putin medii de JS ca sa te descurci cum trebuie cu libraria. Am sa scriu zilele urmatoare un tutorial despre JS, sper sa te ajute.
Nu pot sa iti spun cat ar dura sa inveti JS la nivel mediu pentru ca asta tine de fiecare om in parte. Poate unul invata intr-o zi ce invata altul intr-o saptamana… si tot asa. Asta tine doar de tine si de timpul pe care il aloci invatarii.
Succes!
mersi. astept tutorialu :)