Taburi cu jQuery UI (I)


Dacă până în 2008 am scris negativ pe CNet.ro despre jQuery UI, lucrurile s-au schimbat şi am devenit dependent de această bibliotecă, precum – evident – şi de jQuery, în multe, multe proiecte. Abia aştept versiunea 1.9, care va veni cu nişte noutăţi frumoase şi utile. Până atunci însă, aşa ca reclamă, haideţi să vedem cât de uşor putem face una şi alta (mă adresez începătorilor!). Şi vă propun, conştient că poate mai repet unele idei din articole anterioare, să vedem cum folosim cele două biblioteci.

imagine

Eu de regulă pornesc de la Theme Roller, alegând tema care se potriveşte cel mai bine cu proiectul meu. Apoi desigur mai “buchisesc” la culori, dimensiuni, gradienţi şi altele. La final apăsăm pe Download theme pentru a descărca tema. Ea vine la pachet nu doar cu jQuery (biblioteca de bază), dar şi cu toate proiectele mici incluse în proiectul mare numit jQuery UI. Dacă ştiţi exact ce aveţi nevoie (ex: doar taburi) puteţi dezactiva ce nu vă trebuie. Rezultatul va fi un fişier mai mic, dar acum pentru teste şi tot pachetul e foarte bun. Că aţi făcut, că nu aţi făcut modificări, veţi dori – de la o vreme cel puţin – să spuneţi temei cumva specific. Click pe Advanced Theme Settings şi aveţi acolo posibilitatea să botezaţi folderul cu tema (partea CSS).

imagine

Descărcăm arhiva şi de acolo ne interesează două foldere să le copiem într-un alt folder unde vom lucra: e vorba de folderul css în care avem un alt folder care conţine un fişier CSS şi un folder cu imagini; respectiv folderul js unde avem biblioteca jQuery şi biblioteca jQuery UI. Dacă le-am copiat într-un folder nou, curat, acum putem face acolo un fişier HTML şi să ne apucăm de lucru.

imagine

Pagina HTML va trebui deci evident să aibă în antet trei includeri: unul de la jQuery şi două de la jQuery UI. Am rezolvat în paginile 5, 6 şi 7. Definiţia CSS pentru body (liniile 9-11, a 10-a mai exact) va asigura că elementele via jQuery UI nu arată mai maaari faţă de restul textului (nu intrăm în explicaţii, dar mulţi se blochează aici). Apoi putem începe codul efectiv. Adică… a, da, despre taburi doream să vorbim.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" href="css/tema-mea/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script>
    <style>
        body {
            font: 14px Arial;                        
        }
    </style>
	<title>Teste cu jQueryUI</title>
</head>
<body>
<script type="text/javascript">
    $(function(){
        $( "#taburi").tabs();
    });
</script>
<h2>Un test cu taburi!</h2>
<div id="taburi">
	<ul>
		<li><a href="#tabul1">Nunc tincidunt</a></li>
		<li><a href="#tabul2">Proin dolor</a></li>
		<li><a href="#tabul3">Aenean lacinia</a></li>
	</ul>
	<div id="tabul1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabul2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabul3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
</body>
</html>

Pentru taburi lucrurile stau simplu: o listă ul urmată de o serie de div-uri – şi observaţi corespondenţa între linkurile de la taburi şi id-urile div-urilor. Şi totul încadrăm într-un div (liniile 21-38), al cărui id îl folosim pentru a spune bibliotecii jQuery UI: „aceasta e o structură de taburi – fă-o să arate aşa!” Cum? Cu o singură linie, linia 18, desigur încadrată în „structura de bază” jQuery (spus vag) care rulează doar când toată pagina a fost încărcată.

Ce am obţinut vedeţi mai jos sau deschizând acest link. Desigur, ar mai fi de spus despre taburi, dar am ocupat mult spaţiu cu introducerea cu tema, aşa că lăsăm pe altă dată.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *