Tutorial jquery – show hide div – load content

În acest tutorial jquery vei învăţa cum să îţi maschezi anumite secţiuni din site, cum ar fi link-urile sau informaţiile ce nu vrei să fie vizibile oricând. În principiu pe internet totul este la o distanţă de un click, aşa că acest tutorial jquery te va învăţa cum să pui informaţia la această distanţă!

Acest tutorial jquery este pentru functia  „show hide div” adica cum sa arati si cum sa ascunzi continutul dintr-un div. Popularea zonei se face cu jquery deci nu se va incarca continutul o data cu pagina principala ci dupa ce se face click pe butonul „show hide div”.

Acest exemplu jquery pentru show hide div este bun și pentru SEO. Optimizarea SEO presupune să nu ai mai mult de 100 de link-uri pe o pagină, iar dacă ai un blogroll lung, merită să îl maschezi pentru binele poziției siteului tău.

Aşa că te voi încăţa cum să îţi maschezi categoriile sau blogroll-ul, dacă foloseşti o temă wordpress şi dacă nu te sperii de puţin cod!

Ce vom face in acest tutorial jquery

  • Vom crea un meniu, dacă ai deja unul îl foloseşti pe al tău.
  • Vom pune o acţiune pe un link din meniu care va deschide o fereastră în site unde vor fi încărcate link-urile sau conţinutul ce doreşti să fie afişat acolo.
  • Din motive sincere nu îţi voi explica cum am făcut şi ce înseamnă fiecare cod de mai jos, altfel ar fi un tutorial lung cât o broşură de la biserica pocăiţilor.
  • Dacă ai întrebări, lasă un comentariu pentru anumite particularităţi de rezolvat!

tutorial jquery show hide div load content

1. Primul pas in acest tutorial jquery este crearea unui meniu standard, simplu, tip listă:

<ul>
<li>
<a onclick="ShowHide(); loadcontent(); return false;" href="" title="Categorii blog.jorjette.ro">Categorii</a>
</li>
</ul>

2. În header.php vom pune cele 2 scripturi ale acestui tutorial jquery: unul pentru a arăta şi a ascunde „fereastra” şi unul pentru a încărca conţinut extern în acea fereastră:

*Plasează acest cod imediat după </head> în fisierul header.php al temei tale.
<script type="text/javascript">
//<![CDATA[
function ShowHide(){$("#categorii").animate({"height": "toggle"}, { duration: 1000 });
$("#categorii").click(function(){
$(".categorii").empty();
});}//]] ></script>

<script type="text/javascript">
function loadcontent(){
$('.categorii').empty().html('<img src="<?php bloginfo('template_url'); ?>/images/loading.gif" />');               $('.categorii').load('http://siteultau.com/nume-pagina/', '', function(response, status, xhr) {
if (status == 'error') {
var msg = "Îmi pare rău dar a apărut o eroare: ";
$(".categorii").html(msg + xhr.status + " " + xhr.statusText);
}
});
//Close property$("a.inchis").click(function(){
$(".categorii").empty();
});
};
</script>

3. Pregătim un div (pentru afisare continut prin jquery), în exemplul nostru, pentru a arăta categoriile.

Codul poate fi introdus oriunde în temă, fie în header.php fie în footer.php, poziţionarea lui va fi fixată din css aşa că nu prea contează unde e pus ci doar să fie prezent pe toate paginile:

<div class="continut inactiv" id="categorii"><div class="categorii"></div></div>

4. Completăm în fisierul CSS al temei (style.css) stilizarea pentru div-ul din acest tutorial jquery:

div.continut.inactiv {display: none;}
.categorii {position: fixed;width: 630px;height: 400px;padding: 12px;top: 100px;left: 100px;display: inline-block;overflow: auto;z-index: 9999999;background: #E3EABE;border: 2px dashed #467F10;color: #467F10;}
span.close {float:right;margin-left:10px;width: 620px;display: inline-block;background-color: #467F10;height: 18px;padding: 5px;text-align: right;margin-top: 10px;}

5. Conţinutul de încărcat în div va fi o pagină – în codul javascript de mai sus am numit adresa URL către această pagină: 

Pentru acest tutorial jquery, pagina respectivă are nevoie de un template unic, care să nu includă nici un element grafic al temei tale normale. Pentru asta, crează un fisier, să spunem fereastra.php şi pune asta în el:

<?php
/*Template Name: Jquery DIV*/
?>
<h2>Categorii</h2>
<div class="main">
<ol><?php $categories = get_categories('order=DESC&hierarchical=0');  foreach ($categories as $cat) {if (category_description($cat->cat_ID) == '') {} else {$descu = strip_tags(category_description($cat->cat_ID));echo '<li><a rel="nofollow" style="font-size: 14px;" title="'. $descu .'" href="'.get_category_link( $cat->cat_ID ).'">'.$cat->cat_name.'</a></li>'; }}?></ol>
</div>
<span class="close"><a class="inchis" style="font-size: 14px;color: #fff;" onclick="ShowHide(); return false;" href="#">Închide [x]</a>
</span>

6. Pune acest fişier în directorul temei tale (prin FTP desigur, în wp-content/themes/tema-ta).

Acum uplodează acest fisier in directorul temei tale folosind un client FTP sau din CPanel – FileManager.

Acum crează o pagină nouă şi ai grijă să selectezi la template pentru pagină, cel tocmai creat de tine (va apărea Jquery DIV dacă nu modifici codul de la mine)! Link-ul paginii publicate să îl copii şi să îl înlocuieşti în codul javascript ce l-ai pus în header.php (cel cu siteultau.com)!

7. Acum mai ai de adăugat câteva elemente noi în CSS, ce aparţin noului template creat:

.main ol {display: inline-block;margin: 0;padding: 0;width: 588px;margin-left: 35px;list-style: none;}
.main ol li {float: left;width: 13em;padding: 2px 5px;}
.main ol li:hover {border-left: 2px solid #467F10}
.main a:link, .main a:visited, .main a:active {color: #805427;}

UPDATE: Tutorial jquery show hide div pentru sectiuni multiple

Pentru mai multe secţiuni, mai multe „butoane” jquery show hide div active trebuie să foloseşti (le poţi distribui şi altfel pe site, ideea e să aplici funcţiile „onclick”) în completare cu ce am scris mai sus în tutorial:
<ul>
<li>
<a onclick="ShowHide(); loadcontent(); return false;" href="" title="Categorii blog.jorjette.ro">Categorii</a>
<a onclick="ShowHide(); loadcontentB(); return false;" href="" title="Blogroll blog.jorjette.ro">Blogroll</a>
</li>
</ul>

Iar în header.php să adaugi încă un script pentru conţinutul secund, în exemplu de mai sus pentru funcţia loadcontentB() :

<script type="text/javascript">
function loadcontentB(){
$('.categorii').empty().html('<img src="<?php bloginfo('template_url'); ?>/images/loading.gif" />');                $('.categorii').load('http://siteultau.com/nume-pagina-secundara/', '', function(response, status, xhr) {
if (status == 'error') {
var msg = "Îmi pare rău dar a apărut o eroare: ";
$(".categorii").html(msg + xhr.status + " " + xhr.statusText);
}
});
//Close property$("a.inchis").click(function(){
$(".categorii").empty();
});
};
</script>

Respectiv ai nevoie de un template nou pentru pagina secundară (cum am facut in exemplul din acest tutorial jquery). Unul care să îţi furnizeze informaţia de care ai nevoie!

Download acest tutorial jquery show hide div

Articol etichetat cu:, , , ,

Ganduri si impresii pentru "Tutorial jquery – show hide div – load content":

  1. Bogdan Cristescu Lucian
  2. Bogdan Cristescu Lucian
  3. Bogdan Cristescu Lucian
  4. Bogdan Cristescu GiacomO
  5. Bogdan Cristescu Lucian
  6. Bogdan Cristescu Lucian
  7. Bogdan Cristescu Lucian
  8. Bogdan Cristescu Laurentiu

Care este gandul tau?