-
data publikacji: 05.08.2008
Zakładki do sidebara
kategoria: Skrypty client-side, XHTML/CSS autor: palmiak
Jako szczęśliwi posiadacze blogów, po pewnym czasie natrafiamy na problem rozrostu sidebara do ogromnych rozmiarów. Jednym ze sposobów jest skorzystać z dobrodziejstw javascript i porobić
zakładki.
xhtml i css
Nasze zakładki zamkniemy w
<div>o jakimś id (w naszym przypadku będzie to zakladki). W środku zaś umieścimy<h2><a href="#">tytuł</a></h2>, które będą nam służyć do przełączania między treściami oraz<div>w które będą te treści zawarte. W skrócie będzie to wyglądać tak<div id="sidebar">
<div id="zakladki">
<h2><a href="#about">O mnie</a></h2>
<h2><a href="#archiwum">Archiwum</a></h2>
<h2><a href="#links">Przyjaciele</a></h2>
<div id="about">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique
</div>
<div id="archiwum">
<ul>
<li><a href="#">Lipiec 2008</a></li>
<li><a href="#">Czerwiec 2008</a></li>
<li><a href="#">Maj 2008</a></li>
<li><a href="#">Kwiecień 2008</a></li>
</ul>
</div>
<div id="links">
<ul>
<li><a href="#">vivee.info</a></li>
<li><a href="#">tutoriale.vivee.info</a></li>
<li><a href="#">3d.vivee.info</a></li>
</ul>
</div>
</div>
</div>#sidebarumieściłem bardziej, żeby ułatwić sobie stylowania oraz do późniejszej demonstracji.Id divów oraz kotwice są tylko na wypadek, gdyby użytkownik wyłączył js.
Czas to jeszcze ostylować:
* {
margin:0;
padding:0;
}body {
background:#2B2B2B;
}#sidebar {
width:250px;
padding:20px 0;
margin:0 auto;
font:.75em Verdana, Arial, Helvetica, sans-serif;
line-height:1.5em;
color:white;
}#sidebar div div {
list-style:none;
background:#4E4E4E;
padding:8px;
}h2 {
display:inline;
font-size:1em;
margin:0 4px 0 0;
}h2 a {
background:#4E4E4E;
padding:5px;
text-decoration:none;
color:white;
}h2 a:hover, a.active {
background:#C20000;
}#sidebar ul {
list-style:none;
}#sidebar ul a {
color:#FFFFFF;
text-decoration:none;
}#sidebar ul a:hover {
color:#E7E7E7;
}Oczywiście styl możecie dowolnie modyfikować - nie ma on żadnego wpływu na działanie skryptu.
jQuery
Działanie skryptu, który to wszystko obsługuje jest bardzo proste. Najpierw nadajemy pierwszemu
<h2>klasęactiveoraz ukrywamy wszystkie poza pierwszym<div>.Kiedy ktoś kliknie w jakieś
<a>, które znajduje się w<h2>następuje seria czynności:- liczymy, który to jest w naszym divie
<h2>i przypisujemy to zmiennej licznik - usuwamy klasę active z
<h2> <h2>w którym znajduje się wybrany przez nas link dodaje klasę active- ukrywa wszystkie widoczne
<div>w naszym divie - pokazuje odpowiedniego diva - do tego potrzebna nam była zmienna licznik, bo div będzie ten sam w kolejności co
<h2>
Wyglądać to będzie tak:
function tabs(id) {
$("#"+id+" h2:first a").addClass("active");
$("#"+id+" div").not(":first").hide();
$("#"+id+" h2 a").click(function() {
var licznik = $("#"+id+" h2 *").index(this);
$("#"+id+" h2 a").removeClass("active");
$(this).addClass("active");
$("#"+id+" div:visible").hide();
$("#"+id+" div").eq(licznik).show();
return false;
});
}Jest to wersja, która pozwala na zastosowanie kilku serii zakładek na jednej stronie, trzeba je tylko ubrać w diva o innym id.
Pozostaje nam kwestia wywołania skryptu:
$(document).ready(function(){
tabs("zakladki");
});W sumie wygląda to tak.
Więcej zakładek
Jak już wspominałem, żeby umieścić kilka serii zakładek wystarczy każdą z nich "ubrać" w diva o innym id.
Jeszcze nasze zakładki znajdują się w divie #tab1 i #tab2 to wywołujemy to poprzez:
$(document).ready(function(){
tabs("tab1");
tabs("tab2");
});Tutaj możecie zobaczyć jak to działa.
Wersja finalna
Ostatecznie powinno wyglądać to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sidebar tabs</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tab.js"></script>
</head><div id="zakladki">
<h2><a href="#about">O mnie</a></h2>
<h2><a href="#archiwum">Archiwum</a></h2>
<h2><a href="#links">Przyjaciele</a></h2>
<div id="about">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius viverra mi. Maecenas mattis metus sit amet nibh. Aliquam aliquet, diam at semper tristique
</div>
<div id="archiwum">
<ul>
<li><a href="#">Lipiec 2008</a></li>
<li><a href="#">Czerwiec 2008</a></li>
<li><a href="#">Maj 2008</a></li>
<li><a href="#">Kwiecień 2008</a></li>
</ul>
</div>
<div id="links">
<ul>
<li><a href="#">vivee.info</a></li>
<li><a href="#">tutoriale.vivee.info</a></li>
<li><a href="#">3d.vivee.info</a></li>
</ul>
</div>
</div>
</div>jquery.js pobieramy oczywiście z serwisu jQuery.com.
tabs.js powinno wyglądać tak:
$(document).ready(function(){
tabs("zakladki");
});function tabs(id) {
$("#"+id+" h2:first a").addClass("active");
$("#"+id+" div").not(":first").hide();
$("#"+id+" h2 a").click(function() {
var licznik = $("#"+id+" h2 *").index(this);
$("#"+id+" h2 a").removeClass("active");
$(this).addClass("active");
$("#"+id+" div:visible").hide();
$("#"+id+" div").eq(licznik).show();
return false;
});
}
Podsumowanie
Dzięki temu tutorialowi zakładki nie powinny stanowić dla Was problemu. Pozostaje teraz podpiąć to pod jakiegoś CMS'a.
Warto przeszperać też starsze tutoriale na vivee i spróbować podpiąć jakieś dodatkowe efekty przenikania (może fade?) czy spróbować dodać jeszcze obsługę cookies.
- liczymy, który to jest w naszym divie
-
Zobacz podobne wpisy:
-
18 Responses to “Zakładki do sidebara”
Leave a Reply
Komentarze
Kategorie
Top 10
Wski: Cross Processing
Kallie Akinyooye: Krótko o… Wordpress 2.7
Agressiva: Jak za pomocą js poprawić wygląd formularzy
S.Wojnowski: Jak za pomocą js poprawić wygląd formularzy
Arek: Menu “wychodzące” zza strony
Giuseppe Heitner: Wstęp do programowania zorientowanego obiektowo w PHP5…
Kamil: 960 Grid System
Piotrek: Rozwijany panel z odrobiną słodyczy
Kuba: Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- WordPress Theme from Scratch – Day 1: PSD
- 20 Tutorials For Creating HDR Images
- Ask the Expert – Using Wordpress to Build Large Scale Websites with Derek Herman
- Making an Interactive Picture with jQuery
- Create a Horizontal Scrolling Website
- 800 Most Wanted Free RSS Icons for Bloggers
- 45 Most Wanted Beautiful Free Hand Drawn Fonts
- Caffe-Break Themed Blog Layout Photoshop Tutorial
- Create a nature inspired layout in photoshop
- Coding a Web Design for Speed and Quality
- Beautiful Hand Drawn Websites | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
- 40 Fresh Creative and Inspiring Photographs
- Wordpress portfolio layout | Grafpedia
- Simple Facial Photo Retouching | Grafpedia
- Create a beauty layout in 10 steps | Grafpedia
wielkie dzięki Palmiak bo zawsze mnie to zastanawiało jak to zrobić
Szkoda, że do tego potrzebny jest javascript.
Nie da się czasem samym css’em?
KamilGeneral – teoretycznie się da, ale jeżeli nie jesteśmy webmasterami, którzy leją na niektóre przeglądarki i chcemy żeby działalo to wszędzie to JS jest bardzo wskazane.
A co złego w odrobinie js? Skrypt jest tak skonstruowany, że nawet osoby z wyłączonym js nie ucierpią (wszystko zostanie rozwinięte).
Tut przydatny, bo konkretny ;] Nie mniej jednak jeśli już się używa frameworków w stylu jQuery to można by to chociażby zaanimować jakoś. W przeciwnym razie po co je wykorzystywać skoro można oprzeć się stricte na JSie? :>
m1chu, póki co mamy pierwszą część tutoriala rzeki. Wiadomo, że mozna to zanimować, obsługę ciastek dodać, zademonstrować podpięcie pod różne CMSy etc etc (czekam na pozostałem propozycje).
Palmiak a mógłbyś pokazać jak podczepić do WordPress’a
Arek – będzie taki tutek – już Maciek przy nim pracuje
Agressive dziękuje za odpowiedź bo sam próbowałem ale popełniam jakiś byk :/
Niech zgadnę – problem z template tagami?
Czy bardziej z działaniem samych zakładek?
PS. Jak pamiętam, miałam otrzymac od Ciebie maila…
Agressive pierwsze to że coś nie tak z stylami i działanm :/ a druga sprawa wolałbym porozmawiać
na gg lub innym komunikatorze
Arek – wieczorem jestem tak padnięta, że nie mam pary na gg
Agressive szkoda bo chętnie bym pogadał bo tak na Vivee to tylko zapycham system
nie potrzebnymi komentarzami 
To napisz do mnie na maila
Jutro mnie nie będzie – najwyżej wieczorem, ale odpowiem na pewno 
Zresztą niedługo na vivee będzie nowy ficzer
Witam,
Niektórzy mogą mieć problem z współdziałaniem kilku frameworków (np. jQuery + MooTools). Dzieję się tak np. w przypadku instalacji jakiejś wtyczki korzystającej z drugiej podanej przeze mnie biblioteki i użycia zakładek z tego kursu. Jedno z dwóch może wtedy nie działać prawidłowo (w przypadku zakładek nie zostaną one ukryte, ani nie będzie można pomiędzy nimi przechodzić). Problem nie dotyczy tylko i wyłącznie WordPress, ale także innych skryptów w których używa się kilku bibliotek JavaScript.
Jeśli ktoś będzie miał takowy problem, zapraszam tutaj: http://m1chu.eu/wordpress/kolizje-wspoldzialania-bibliotek-javascript-na-podstawie-wtyczek-wordpress
Pozdrawiam,
m1chu
Dzięki, przydało się
Nie wiem czemu, ale mi te zakładki nie chcą działać. Próbowałem nawet tego co napisał m1chu. I też nic :/ Ma ktoś jeszcze inny pomysł?
Witam, także posiadam bloga w wordpressie i zabawa zakładkami razem z cssem nie należy do najmilszych sposobów edycji motywu, jednak do tej pory nie działa mi jedna funkcja, posiadam zakładki wstawione na stronę, jednak nie w sidebarze i po kliknięciu w jedną z nich, zamiast przybierać wygląd zaznaczonej zakładki, ona wraca z powrotem do punktu wyjścia. Czym to może być spowodowane?
Pozdrawiam