Tudom, tudom, sok helyen találkozhattatok már hasonló megoldásokkal, de szerettem volna ha itt is megtalálható egy egyszerű és könnyen használható mégis elegáns megoldás. Azokon a weboldalakon ahol helyhiánnyal küzdenek a fejlesztők, sokszor látni hasonló füles dobozokat, bár használhatóságáról megoszlanak a vélemények, ezt viszont nem most fogjuk kitárgyalni.
Egy kis jQuery-t is beleviszünk a dologba, a tartalom váltásánál fogunk használni egy áttűnési (fade) effektet.
Cikkünk a hirdetés után folytatódik!
Azok számára, akik nem ismerik a jQuery-t, ajánlanék egy pár oldalt, ahol nagyon jó és hasznos leírások találhatók a témában. Ha meg szeretnétek közelebbről is ismerkedni a jQuery-vel, azt hiszem tökéletes kiindulási pontok lesznek.
- 55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection
- LearningjQuery
- jQuery Tutorials for Designers
- Opendir (hu)
- Weblabor
Demo és letöltés
Online demo megtekintése
1. Felépítés
Mint láthatjuk, a doboz füleit rendezetlen listába tettük, míg a tartalmat egy tab_container osztályú div-be. Ebben a div-ban kapnak helyet az oldalak, méghozzá olyan id-val amilyen a fülek linkjében szerepel. Ez fontos lesz majd a jQery alkalmazása közben.
Ha több fület szeretnétek hozzáadni a dobozhoz akkor is figyeljetek erre!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <ul class="tabs">
<li><a href="#tab1">Fül 1</a></li>
<li><a href="#tab2">Fül 2</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Tartalom-->
</div>
<div id="tab2" class="tab_content">
<!--Tartalom-->
</div>
</div> |
2. A CSS formázás
Először is formázzuk meg a füleket. Ehhez a következő beállításokra lesz szükség.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--A fülek magassága--*/ border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; /*--A fülekben lévő szöveg vízszintes rendezése--*/ border: 1px solid #ccc; border-left: none; margin-bottom: -1px; /*--Lista elem helyreigazítása--*/ overflow: hidden; position: relative; background: #f8f8f8; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--A border probléma orvoslása az 1 px fehér kerettel--*/ outline: none; } ul.tabs li a:hover { background: #fff; color: #666; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Az aktív fül nem reagál a hover beállításra--*/ background: #fff; border-bottom: 1px solid #fff; } |
A Fülek formázása közben egy dologra hívnám fel a figyelmet, méghozzá az aktív tab megmaradt alsó margójára. Ez egy elég gyakori probléma, de jelen esetben roppant egyszerűen kiküszöbölhető.
A border probléma
Az alábbi kép jól szemlélteti a border problémát. Megoldásként a fül linkek css beállításának adtunk egy 1px vastag fehér keretet. (már benne van a fenti kódban)
Border probléma megoldása
Megoldva
A tartalom css beállításai a következők.
1 2 3 4 5 6 7 8 9 10 11 12 | .tab_container { border: 1px solid #ccc; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } |
Készen is vagyunk a css beállításokkal. Lássuk hát a effektet amit jQuery-vel készítünk.
3. A jQuery effekt
Adjuk a következő kódot az oldalunk head részéhez vagy készítsünk egy .js fáljt és illesszük abba, utóbbi esetben ne feledjük meghívni azt.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Alap akciók
$(".tab_content").hide(); //Eltünteti az összes tartalmat
$("ul.tabs li:first").addClass("active").show(); //Aktiválja az első fület
$(".tab_content:first").show(); //Megmutatja az első fül tartalmát
//Navigálás
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Eltávolít más "active" osztályokat
$(this).addClass("active"); //Hozzáad eg "active" osztályt a kiválasztott fülhöz
$(".tab_content").hide(); //Elrejti az összes fül tartalmát
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn(); //Előtűnik az aktív tartalom
return false;
});
});
</script>Mint láthatjuk meghívtuk a jquery.min.js fájlt a google api-tól, ami végre fogja hajtani a fönti parancsokat.
Zárszó
Ezzel végére is értünk ennek a nagyszerű de mégis egyszerűen elkészíthető segédletnek. Remélem nektek is hasznotokra válik majd éppannyira, mint nekem. További kellemes időtöltést!
Szólj hozzá!