24. Zakładki w opisie chomika

Dla wielu, będzie to wydarzenie na które czekali z niecierpliwością. Dziś opiszę metodę, skrypt, który wykorzystamy do zrobienia specjalnych zakładek w chomikuj.pl na swojej stronie głównej. Przykład takiego zastosowania znajdziesz na profilach: adam-as, aisha80, Dobry.film. Zauważ tak jakby dodatkowe menu na górze opisu strony (przyciski). Pozwala to na zamieszczanie dodatkowych informacji, jakby na specjalnych podstronach, na które wchodzimy bez przeładowania strony. Jest to o wiele lepsze rozwiązanie niż przewijany z boku strony suwak, który pojawia się przy dużej ilości informacji na naszej stronie powitalnej.

Artykuł dedykuję osobom, które przynajmniej w podstawowy sposób, obyte są z podstawami html. Nie oznacza to, że początkujący nie znajdą tu nic dla siebie. Wręcz przeciwnie - spróbować nie zaszkodzi - przecież nic Ci się nie stanie ;-)

Zacznijmy od zrobienia sobie kopii zapasowej swojej strony, na wypadek, jak by coś poszło nie po naszej myśli. W tym celu, wejdź w edycję swojego profilu



kliknij w przycisk HTML



i skopiuj sobie DOKŁADNIE CAŁY kod jaki tam zobaczysz. Następnie wklej go do "Notatnika" i zapisz na swoim twardym dysku. Notatnik posiada każdy użytkownik Windowsa. Aby go uruchomić, wejdź w menu START / Wszystkie programy / Akcesoria / Notatnik. Tak zapisany plik, będzie naszą kopią zapasową. Jeżeli coś nam nie wyjdzie, wystarczy z powrotem wkleić kod zapisany w notatniku do edycji swojego profilu.

Będąc w edycji swojego profilu, wymazujemy cały kod jaki obecnie mieliśmy i wklejamy ten, który jest poniżej:

<script type="text/javascript"><!--
/*SKRYPT YETII - dostosowanie na potrzeby CHOMIKA, przygotował chomik adam-as. OPIS JAK ZAIMPLEMENTOWAĆ YETII NA CHOMIKA znajduje się na BLOGU http://poradnikchomika.blogspot.com - Yetii - Yet (E)Another Tab Interface Implementation,version 1.4,http://www.kminek.pl/lab/yetii/,Copyright (c) 2007-2008 Grzegorz Wojcik,Code licensed under the BSD License: http://www.kminek.pl/bsdlicense.txt*/function Yetii(){this.defaults={id:null,active:1,interval:null,wait:null,persist:null,tabclass:'tab',activeclass:'active',callback:null,leavecallback:null};this.activebackup=null;for(var n in arguments[0]){this.defaults[n]=arguments[0][n]};this.getTabs=function(){var a=[];var b=document.getElementById(this.defaults.id).getElementsByTagName('*');var c=new RegExp("(^|\\s)"+this.defaults.tabclass.replace(/\-/g,"\\-")+"(\\s|$)");for(var i=0;i<b.length;i++){if(c.test(b[i].className))a.push(b[i])}return a};this.links=document.getElementById(this.defaults.id+'-nav').getElementsByTagName('a');this.show=function(a){for(var i=0;i<this.tabs.length;i++){this.tabs[i].style.display=((i+1)==a)?'block':'none';this.links[i].className=((i+1)==a)?this.defaults.activeclass:''}if(this.defaults.leavecallback&&(a!=this.activebackup))this.defaults.leavecallback(this.defaults.active);this.activebackup=a;this.defaults.active=a;if(this.defaults.callback)this.defaults.callback(a)};this.rotate=function(a){this.show(this.defaults.active);this.defaults.active++;if(this.defaults.active>this.tabs.length)this.defaults.active=1;var b=this;if(this.defaults.wait)clearTimeout(this.timer2);this.timer1=setTimeout(function(){b.rotate(a)},a*1000)};this.next=function(){this.defaults.active++;if(this.defaults.active>this.tabs.length)this.defaults.active=1;this.show(this.defaults.active)};this.previous=function(){this.defaults.active ;if(!this.defaults.active)this.defaults.active=this.tabs.length;this.show(this.defaults.active)};this.gup=function(a){a=a.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var b="[\\?&]"+a+"=([^&#]*)";var c=new RegExp(b);var d=c.exec(window.location.href);if(d==null)return null;else return d[1]};this.parseurl=function(a){var b=this.gup(a);if(b==null)return null;if(parseInt(b))return parseInt(b);if(document.getElementById(b)){for(var i=0;i<this.tabs.length;i++){if(this.tabs[i].id==b)return(i+1)}}return null};this.createCookie=function(a,b,c){if(c){var d=new Date();d.setTime(d.getTime()+(c*24*60*60*1000));var e="; expires="+d.toGMTString()}else var e="";document.cookie=a+"="+b+e+"; path=/"};this.readCookie=function(a){var b=a+"=";var d=document.cookie.split(';');for(var i=0;i<d.length;i++){var c=d[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(b)==0)return c.substring(b.length,c.length)}return null};this.tabs=this.getTabs();this.defaults.active=(this.parseurl(this.defaults.id))?this.parseurl(this.defaults.id):this.defaults.active;if(this.defaults.persist&&this.readCookie(this.defaults.id))this.defaults.active=this.readCookie(this.defaults.id);this.activebackup=this.defaults.active;this.show(this.defaults.active);var f=this;for(var i=0;i<this.links.length;i++){this.links[i].customindex=i+1;this.links[i].onclick=function(){if(f.timer1)clearTimeout(f.timer1);if(f.timer2)clearTimeout(f.timer2);f.show(this.customindex);if(f.defaults.persist)f.createCookie(f.defaults.id,this.customindex,0);if(f.defaults.wait)f.timer2=setTimeout(function(){f.rotate(f.defaults.interval)},f.defaults.wait*1000);return false}}if(this.defaults.interval)this.rotate(this.defaults.interval)};
</script>
</p>
<!-- TUTAJ POCZATEK MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU -->
<div id="tab-container-1">
<ul id="tab-container-1-nav">
<a href="#tab1">Strona glówna</a> <a href="#tab2">Podstrona 2</a> <a href="#tab3">Podstrona 3</a> <a href="#tab4">Podstrona 4</a> <a href="#tab5">Podstrona 5</a> 
</ul>
<!-- TUTAJ KONIEC MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU MENU -->
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<div id="tab1" class="tab">
TRESC DLA STRONY 1
</div>
<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <!--222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222-->
<div id="tab2" class="tab">
TRESC DLA STRONY 2
</div>
<!--222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222--> <!--333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333-->
<div id="tab3" class="tab">
TRESC DLA STRONY 3
</div>
<!--333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333--> <!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444-->
<div id="tab4" class="tab">
TRESC DLA STRONY 4
</div>
<!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444--> <!--555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555-->
<div id="tab5" class="tab">
TRESC DLA STRONY 5
</div>
<!--555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555-->
</div>
<p>
<script type="text/javascript"><!--
      var tabber1 = new Yetii({         id: 'tab-container-1'       });
// --></script>
</p>

Po wklejeniu naciskamy "Aktualizuj"



i zapisujemy zmiany



Powinieneś zobaczyć taki oto efekt:



Jeżeli nie widzisz tego, powtórz wszystkie czynności od początku. Pamiętaj, że wklejany kod musi być w całości co do każdego znaku jaki tam jest.
Spójrz teraz jak działa efekt naszej pracy. Klikaj w niebieskie linki Strona główna, Podstrona 2, Podstrona 3, itd.. Po każdym kliknięciu, zmieni się zawartość naszej strony głównej. Dla przykładu, wpisałem tam tekst TREŚĆ DLA STRONY 1, TREŚĆ DLA STRONY 2 itd. Wszystkie linki w menu muszą działać!.

O co chodzi w kodzie?

Teraz zabierzmy się za edycję naszego kodu.
Ponownie wchodzimy do edycji naszego profilu jak opisałem to wyżej. Dla wygody, aby nasz wzrok nie zgłupiał, kod został specjalnie oznaczony tzw. komentarzami html. Komentarz, czyli opis danego miejsca oznaczony jest w następujący sposób:

Dla MENU (górne linki):
<!-- TUTAJ POCZATEK MENU MENU MENU MENU MENU MENU MENU -->
Tutaj znajdują się wszystkie linki do naszych podstron 1,2,3,4,5 czyli nasze MENU.
<!-- TUTAJ KONIEC MENU MENU MENU MENU MENU MENU MENU -->

Dla podstron:
<!--11111111111111111111111111111111111111111111111-->
Całość dotycząca strony głównej, czyli podstrona 1. To tutaj wpisujemy to, co chcemy mieć na swojej stronie głównej. Dokładne miejsce w którym możesz wstawiać swoje rzeczy, oznaczyłem tekstem "TRESC DLA STRONY 1". Na miejsce tego tekstu, możesz sobie wstawić np. cały wcześniejszy kod, który masz zapisany w notatniku!
<!--11111111111111111111111111111111111111111111111-->


<!--22222222222222222222222222222222222222222222222-->
Tutaj dodajesz swoje teksty, obrazki lub cokolwiek chcesz dla podstrony 2 w miejsce tekstu "TRESC DLA STRONY 2"
<!--22222222222222222222222222222222222222222222222-->


<!--33333333333333333333333333333333333333333333333-->
Tutaj dodajesz swoje teksty, obrazki lub cokolwiek chcesz dla podstrony 2 w miejsce tekstu "TRESC DLA STRONY 3"
<!--33333333333333333333333333333333333333333333333-->

... i analogicznie dla podstron 4 i 5.

Menu:
Linki w menu możesz dostosować według własnych potrzeb - pogrubić, pochylić, podkreślić, a nawet zastąpić tekst obrazkiem, który wcześniej sobie przygotujesz. Sposoby formatowania tekstu, oraz wstawiania obrazków, opisałem w lutym 2010r. Zapoznaj się dokładnie z podstawami tam zawartymi, jeżeli masz trudności z językiem html.

Uwaga! Wielkość stron!
Na pewno ciekawi Cię, jak ustalić wielkość (długość) każdej z podstron. Nie musisz tego robić, bowiem wielkość ta jest ustalana na podstawie pierwszej strony (strony głównej). To właśnie wysokość tej strony zdefiniowana wypełnioną przez Ciebie zawartością, będzie wykorzystana do całej reszty podstron. Nie można ustalić odrębnej wysokości dla każdej z nich, ponieważ niemożliwym było by wtedy zastosowanie mechanizmu wczytywania bez przeładowania strony. Staraj się zatem wypełnić swoje strony tak, aby nie zostawiać pustych miejsc na stronach 2,3,4,5.

Chcę zlikwidować resztę podstron...
Jeżeli nie masz na razie pomysłu na to co umieścić na pozostałych podstronach, możesz je w prosty sposób usunąć. Zacznijmy od linków w górnym menu. Znajdują się one pomiędzy komentarzem "MENU" o czym pisałem wyżej. Spróbujmy zatem usunąć linki do podstron 3,4,5

Usuwamy zatem te linijki:

<a href="#tab3">Podstrona 3</a> - dla podstrony numer 3
<a href="#tab4">Podstrona 4</a> - dla podstrony numer 4
<a href="#tab5">Podstrona 5</a> - dla podstrony numer 5

oraz same podstrony które znajdują się pomiędzy komentarzem oznaczony cięgiem 3 (trójek), 4 (czwórek) i 5 (piątek). Nie usuwaj jednak samych znaczników komentarzy, czyli tych ciągów liczb! Usuń tylko to, co jest pomiędzy nimi. Być może kiedyś będziesz chciał(a) dodać sobie kolejne podstrony i mając pozostawione znaczniki komentarzy, będziesz wiedział(a) w którym miejscu zaczyna się dana podstrona.


Dla podstrony nr 3, usuwamy wszystko to, co jest oznaczone kolorem:
<!--33333333333333333333333333333333333333333333333-->
<div id="tab3" class="tab">
TRESC DLA STRONY 3
</div>
<!--33333333333333333333333333333333333333333333333-->


Dla podstrony nr 4, usuwamy wszystko to, co jest oznaczone kolorem:
<!--44444444444444444444444444444444444444444444444-->
<div id="tab4" class="tab">
TRESC DLA STRONY 4
</div>
<!--44444444444444444444444444444444444444444444444-->


Dla podstrony nr 5, usuwamy wszystko to, co jest oznaczone kolorem:
<!--55555555555555555555555555555555555555555555555-->
<div id="tab5" class="tab">
TRESC DLA STRONY 5
</div>
<!--55555555555555555555555555555555555555555555555-->


Po usunięciu linków i odpowiadających im podstron, pozostaną nam tylko Strona 1 i 2. Aby z powrotem przywrócić usunięte podstrony, wystarczy wkleić usunięte kody. Możesz je sobie skopiować z powyższych przykładów.

UWAGA bardzo ważne!

Jeżeli już dostosujesz sobie stronę i uzupełnisz swoimi informacjami pamiętaj, aby skopiować cały kod i wkleić go w edycję podfolderów swojego chomika!



Jest to czynność, którą bezwzględnie musisz wykonać! Inaczej, jeżeli ktoś trafi u Ciebie bezpośrednio do jakiegoś folderu poza stroną główną, zobaczy pustą stronę. Dopiero jak wejdzie do folderu głównego (z Twoją nazwą), zobaczy Twoje podstrony. Aby tego uniknąć pamiętaj, żeby kod w opisie na stronach podfolderów, był zawsze identyczny jak w opisie Twojego profilu!. Jeżeli wprowadzisz jakieś nawet najdrobniejsze zmiany w swoich tekstach na stronie głównej, za każdym, razem kopiuj cały kod i wklejaj go w edycję podfolderów.

Zmieniamy MENU

Teraz, skoro już masz na swoim profilu zakładki, zechcesz pewnie ulepszyć swoje menu. Jestem w trakcie przygotowywania paru szablonów (gotowców). Poniżej będę sukcesywnie dodawał kolejne menu. Aby zmienić wygląd naszego menu, należy usunąć wszystko co mamy pomiędzy komentarzami i zastąpić kodem dla menu, które chcemy wykorzystać.

<!-- TUTAJ POCZATEK MENU MENU MENU MENU MENU MENU MENU -->
Usuwamy bardzo dokładnie WSZYSTKO co jest pomiędzy znacznikami MENU i wklejamy tu wybrany dla naszego menu nowy kod.
<!-- TUTAJ KONIEC MENU MENU MENU MENU MENU MENU MENU -->

Gotowe szablony do wklejenia pomiędzy komentarz MENU:

1.

<div id="tab-container-1" style="text-align: left;">
<ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="6" width="680" background="http://img694.imageshack.us/img694/6401/banqt.jpg">
<tr>
<td width="120" align="center"><span style="font-size:16px;font-weight:bold;color:#ffffff;"> </span></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

2.

<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img405.imageshack.us/img405/8576/banrk.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

3.

<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img687.imageshack.us/img687/7289/ban3f.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

4.

<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img38.imageshack.us/img38/4392/ban4k.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

5.

<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img211.imageshack.us/img211/8765/ban5i.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

6.

<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img245.imageshack.us/img245/2006/ban6.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

7.

<div id="tab-container-1" style="text-align: left;"><ul id="tab-container-1-nav">
<table style="height: 40px;" border="0" cellspacing="0" cellpadding="0" width="680" background="http://img709.imageshack.us/img709/3944/ban7.jpg">
<tr><td width="120" align="left"> </td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab1">Strona główna</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab2">Podstrona 2</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab3">Podstrona 3</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab4">Podstrona 4</a></td>
<td width="100" align="center"><a style="color:#ffffff;font-size:12px;" 
href="#tab5">Podstrona 5</a></td>
</tr>
</table>
</ul>

Następne "menu" już wkrótce...

Oto wybrane przeze mnie osoby, którym udało się wykorzystać omawiany skrypt i style MENU. Jeżeli nie radzisz sobie z poprawnym wstawieniem skryptu, spróbuj poprosić o pomoc:

bogussztyc
renatahal

Link nie działa? Poinformuj mnie o tym!

Pamiętaj!

Jeżeli tylko zmienisz wygląd swojego menu skopiuj CAŁY KOD i wklej go również w edycję podfolderów swojego chomika!



Jest to czynność, którą bezwzględnie musisz wykonać! Inaczej, jeżeli ktoś trafi do Ciebie przez link kierujący do wybranego folderu, a nie strony głównej, nie zobaczy wówczas Twojego MENU, lecz tylko zwykły opis PODFOLDERÓW!.

--
Aby z powodzeniem wykorzystywać ten skrypt, naucz się przynajmniej podstawowych elementów formatowania tekstu za pomocą języka html. Jak już wspomniałem, podstawy opisałem w lutym 2010r. Są to nie zmieniające się, zawsze aktualne informacje. Jeżeli mimo to, z czymś sobie nie radzisz odnośnie wyżej opisanego skryptu, pozostaw swoje uwagi w komentarzach niniejszego wpisu.

Skrypt, którego implementację tu opisałem, daje Ci ogromne możliwości zwiększenia atrakcyjności Twojego profilu. Nie bój się eksperymentować, próbuj, ćwicz, i pamiętaj o robieniu kopii zapasowych Twojego kodu, na wypadek jak by coś poszło nie tak, jak byśmy sobie tego życzyli :-)