Porta shqipe | Mësime për JQuery

Çka është gjuha JQuery

Shembull i thjeshtë

JQuery (Xhei-kueri) është softuer i cili është shpikur për të mundësuar efekte dinamike të elementeve në faqe të uebit, për shembull dritareve të vogla me përmbajtje, shfletimin me shpalosje ose tregimin dhe fshehjen e elementeve.

Përpos këtyre elementeve pamore JQuery mundëson edhe marrjen e lidhjes me bazën e të dhënave pa pasur nevojë të ringarkohet faqja në shfletues dhe gjithashtu mundëson ngarkimin e faqeve statike brenda një faqe tjetër.

Për të mësuar këtë gjuhë duhet natyrisht të keni dituri të gjuhës së përpunimit të faqeve të uebit dhe stileve CSS. Mos tentoni të mësoni këtë gjuhë pa i ditur elementet e thjeshta të faqes.

Në këtë mësim do të ju tregoj unë një mundësi të thjeshtë të përdorimit të kësaj gjuhe.

Tregimi dhe fshehja e shtresës

Këtu do të përdori JQuery-n për tregimin e shtresës nëse është e fshehur dhe fshehjen e saj nëse shihet. Kjo është e mundur me funksionin slideToggle.

Krijo një faqe dhe ruaje me prapashtesën .html (ose me një gjuhë tjetër të krijimit të faqes sikur .php ose .asp).
Shkarko skedarin JQuery më të ri (latest) këtu dhe ruaje skedarin në të njëjtin vend sikur faqen. Kjo nuk është e domosdoshme, por më lehtë mund ta mësoni këtë gjuhë nëse jeni fillestar. Për këtë shembull mjafton verzioni i zvogëluar (minified version). Në këtë mësim përdoret verzioni jquery-1.4.2.min.js
Brenda etiketave <head> ... </head> krijo lidhjen me skedarin e shkarkuar kështu: <script src="jquery-1.4.2.min.js"></script>
Krijo një hiperlidhje brenda etiketave <body> ... </body> dhe caktoja kësaj lidhje një identifikim, për shembull <p><a href="#" id="lidhja">kliko këtu</a></p>
Krijo një shtresë <div> ... </div> dhe caktoja edhe kësaj një identifikim, për shembull kështu: <div id="permbajtja">Kjo është përmbajtja</p>
Brenda etiketave <head> ... </head> krijo një stil për shtresën dhe vendin ku klikohet kështu:
<style>

</style>
Brenda etiketave <head> ... </head> krijo skriptin JQuery i cili do të kujdeset që elementi të tregohet ose fshihet kështu:
<script>
$(document).ready(function(){
$('#lidhja').click(function () {
$('#permbajtja').slideToggle('medium');
});
});
</script>

Ky është skripti i plotë. Mos harroni ta shkarkoni skedarin me JQuery dhe ta ruani atë në të njëjtin vend sikur faqen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Shembull me JQuery</title>
<script src="jquery-1.4.2.min.js"></script>
<style type="text/css">

</style>
<script>
$(document).ready(function(){
$('#lidhja').click(function () {
$('#permbajtja').slideToggle('medium');
});
});
</script>
</head>
<body>

<span id="lidhja">kliko këtu</span>
<div id="permbajtja">Kjo është përmbajtja</div>

</body>
</html>

Pamja në shfletues - demonstrimi

Kliko në tekstin e nënvizuar dhe tregohet shtresa e fshehur, kliko prapë dhe fshihet shtresa.

shembull_me_jquery.html

kliko këtu

Kjo është përmbajtja

Sqarim

$(document).ready(function() {
Funksion i cili niset pas arkimit të faqes në shfletues

$('#lidhja').click(function () {
Funksioni zbatohet kur klikohet me mi mbi objektin me identifikimin “lidhja”. Gardhi (#) përdoret për të shënuar identifikimin. Në vend të identifikimit mund të përdoret edhe emri kështu: $('.lidhja').click ( ose për hipërlidhjen me emrin lidhja $('a.lidhja').click.

$('#permbajtja').slideToggle('medium');
Me këtë funksion JQuery e ndryshon pamjen në mes të fshehjes dhe tregimit: Nëse shihet shtresa në faqe ajo fshihet dhe nëse është fshehur ajo tregohet. Nëse shikoni tek stilet do të shihni se shtresa në fillim është e fshehur me stilin display: none;. Pa këtë stil ajo do të shihej pas ngarkimit të faqes. Shpejtësia e shfaqjes dhe fshehjes tregohet në mes të kllapave: në këtë rast me shpejtësi të mesme 'medium'. Ju mund të ndërroni këtë në 'fast' ose 'slow'.