#11943 przez Sru
Wt, 23 lut 2010, 22:50

W tym temacie pokaże wam jak stworzyć proste zakładki oprate o technologie ajax, takiej jak np. turniej.php .
Na początek nasz kod
Kod: Zaznacz cały<div id="tab-container-1">

    <ul id="tab-container-1-nav">
    <li><a href="#tab1">Zakładka 1</a></li>
    <li><a href="#tab2">Zakładka 2</a></li>
    </ul>

    <div class="tab" id="tab1">
    <h2>Nagłówek, zakładka 1</h2>

    <p>1// Przykładowy tekst 1</p>
    </div>

    <div class="tab" id="tab2">
    <h2>Nagłówek, zakładka 2</h2>
    <p>2// Przykładowy tekst. 2</p>
    </div>
</div>

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'
});
</script>

Do arkuszu stylów strony dodajemy:
Kod: Zaznacz cały*{ margin: 0;  padding: 0; }
body{ font: 13px Arial, Verdana; color: #fff; padding: 20px; }
ul#tab-container-1-nav li{ display: inline; }
ul#tab-container-1-nav li a{ padding: 5px 10px; background: #eee; border: 1px solid #ddd; color: #25252E; text-decoration: none; }

.tab{ margin-top: 8px; padding: 10px; background: #eee; border: 1px solid #ddd; }
#tab1{ background: #545461; }
#tab2{ background: #9F8672; }

Możemy to dowolnie edytować. Dodatkowo w sekcję head dodajmy <script type="text/javascript" src="http://itporady.pl/pliki/tab.js"></script> aby zakładki poprawanie działały.
Voila, mamy ładne ajaxowe zakładki.

Podobne wątki Statistics Ostatni post
Tworzenie własnego motd cs - okno startowe
przez Sru So, 7 lis 2009, 14:14 w Developer/Webmastering
0 Odpowiedzi
6405 Wyświetlone

Avatar użytkownika

przez Sru
So, 7 lis 2009, 14:14
Tworzenie własnego MasterServer HL1, HL2 linux/windows
przez Sru Pn, 8 mar 2010, 23:08 w Kosz
0 Odpowiedzi
2400 Wyświetlone

Avatar użytkownika

przez Sru
Pn, 8 mar 2010, 23:08
Tworzenie oraz przywracanie kopii zapasowej gier STEAM
przez eMe Wt, 26 kwi 2011, 12:05 w Poradniki
2 Odpowiedzi
15249 Wyświetlone

Avatar użytkownika

przez mariocs
Śr, 17 maja 2017, 10:07
petrus-design.pl || profesjonale tworzenie stron oraz grafik
przez PetruS So, 19 lis 2011, 14:25 w Serwery CS
0 Odpowiedzi
709 Wyświetlone

Avatar użytkownika

przez PetruS
So, 19 lis 2011, 14:25
petrus-design.pl || profesjonale tworzenie stron oraz grafik
przez PetruS Wt, 22 lis 2011, 17:56 w Wasza twórczość
0 Odpowiedzi
1015 Wyświetlone

Avatar użytkownika

przez PetruS
Wt, 22 lis 2011, 17:56

Kto przegląda forum

Zidentyfikowani użytkownicy: Google[BOT], Tbot