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
Do arkuszu stylów strony dodajemy:
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.
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.
