Në këtë tutorial do ju tregoj se si të ndërtoni një jQuery Selection Box të cilin mund ta përdorni nëpër aplikacione të ndryshme tuajat. Përshembull mund ta përdorni tek një listë produktesh (ose kontaktesh) ku të tjerët të kenë mundësinë të zgjedhin më shumë se një. Pra le të nisim…

Ju mund të shikoni edhe një demo të kësaj: SHIKO DEMO

Importojme librarine jquery nga hostimi që ofron google, pasi është më i shpejtë në ngarkim dhe na jep më tepër performance. Libraria e jquery në këtë rast është e kompresuar, që do të thotë një zhvillues nuk mund të punoj dot në të, kompresimi është për të zvogëluar madhësinë edhe nëse e hapim ne nuk do kuptojmë gjë në të.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Tani që kemi të ngarkuar librarinë, mund ta shfrytëzojmë për qëllimet tona duke inicializuar objekte dhe duke punuar me metodat e tyre. Për të bërë scriptin që kemi nevoje na duhet që ta therrasim brenda funksionit $().ready(); shenja e dollarit është e njëjtë me JQuery().ready(); ose është e njëjtë si në php:

$variableTest = new ObjectClass;
$variableTest->metdoda_e_ObjectClass();

pra, $(document).ready(); na shërben për të “përgjuar DOM-in” nëse është i ngarkuar në memorje, dhe funksionet
që do bëjmë duhet të punojnë në një DOM i cili është komplet në memorje dhe është i gatshëm të shtoj ose të heqi
elemente html dhe ti manipulojë ato.

<script type="text/javascript">
$(document).ready(function(){

Brënda funksionit .ready na duhet që të inicializojmë funksionin .click pasi në këtë event na duhet që të shtojmë ose të heqim elemente html. Pra ne jemi duke ndërtuaj një kuti, ku në të do të vendosim ose do të heqim një pjesë informacioni dhe eventi që do e bëj këtë veprim është click (kur klikojmë mund të shtojmë ose të heqim informacion nga kutia). Meqë kutia jonë është një div me id #kontaktet, dhe brenda kutisë janë të listuara elementet li, atëherë funksioni jonë do të jetë $(‘#kontaktet li’).click(); që do të thotë nëse klikojmë në cdo elementet li të kutise me div id #kontaktet duhet të ndodhi dicka, dhe kjo dicka që do ndodhi ne e percaktojmë tek funksioni pasardhës që vendoset brenda eventit .click(“këtu është e gjithë procedura që do ekzekutohet nëse klikojmë”).

$("#kontaktet li").click(function(){

Jemi në momentin e ndërtimit të funksionit pasardhës që do bëj një veprim pasi ne të kemi klikuar mbi elementin e përcaktuar pak më lart. Mbajmë ne një variable me emrin IDaktuale id e elementit të klikuar dmth variabla IDaktuale, merr vleren me id e elementit të klikuar. Për këtë na ndihmon funksioni .attr i cili gjen cdo lloj atributi të përcaktuar te një elementi html, në rastin tonë atributi që na duhet është id e elementit li që kemi klikuar.

var IDaktuale = $(this).attr("id");

Vazhdojme më poshtë duke vënë kushtin, nëse elementi ku kemi klikuar e ka klasen css .zgjedhur ose jo.

Nëse elementi li nuk e ka klasen .zgjedhur (class=”zgjedhur”)

if (!$(this).is('.zgjedhur')){

Atëherë shtoja elementit li që kemi klikuar klasen .zgjedhur. Plus shtimit të klasës na duhet që të shtojmë edhe një input të fshehur që në rastin tonë është me name vlerën e variables IDaktuale, dhe me vlere po të njëjtë. Kjo na duhet për të populluar formën që do e postojmë me informacion dhe në rastin tonë ky informacion është opsional dhe përdoruesi ka mundesi të zgjedhi ta postojë ose jo informacionin.

$(this).addClass('zgjedhur').append('<input type="hidden" value="'+IDaktuale+'" name="'+IDaktuale+'" />');

 } else {

Në të kundërt hiqe klasen .zgjedhur bashkë me inputin e fshehur. Ky kusht na sherben për të klikuar sa herë të duam,
dmth të mund të bëjmë zgjedhje jo vetëm 1 herë në të njëjtim element.

$(this).removeClass('zgjedhur');
 $('input[value="'+IDaktuale+'"]').remove();
 }

Tani për ta përmbledhur të gjithën ju duhet ky kod për të ngarkuar e futur jQuery në funksionim

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

 $("#kontaktet li").click(function(){

 var IDaktuale = $(this).attr("id");

 if (!$(this).is('.zgjedhur')){

 $(this).addClass('zgjedhur').append('<input type="hidden" value="'+IDaktuale+'" name="'+IDaktuale+'" />');

 } else {
 $(this).removeClass('zgjedhur');
 $('input[value="'+IDaktuale+'"]').remove();
 }

 });

});
</script>

Meqë pjesën e jQueryt e mbaruam tani ka mbetur thjeshte punimi në HTML (CSS). Mund të përdorni një kod të ofruar nga unë ose të përdorni tuajin. Kodi CSS është i tillë:

#kontaktet{list-style-type:none; padding-left:18px; margin:0;}

#info_kontaktet{ border:1px solid #E0E0E0; padding:5px; margin-left:18px; width:270px; margin-top:18px; margin-bottom:7px; font-size:11px;
background-color:#F6F6F6;}

#kontaktet li {overflow:hidden; background-color:#fff;  border:solid 1px #D8DFEA; width:280px; margin-bottom:4px; }

#kontaktet li a:hover {background-color:#F6F6F6;}

#kontaktet .zgjidh{ background-image:url(zgjedhur.png);
background-repeat:no-repeat; background-position:255px 5px;}

#set a{
display:block;
height:51px;
padding:2px;
cursor:pointer;
outline-style:none;
text-decoration:none;
}

.fytyra{background-position:center;
background-repeat:no-repeat;
border:1px solid #D8DFEA;
float:left;
height:49px;
width:54px;
margin-right:5px;
}

a:hover .fytyra{border:1px solid #2b2b2b; background-color:#FFFFFF;}
a:hover .ndryshimi{ background-color:#F7F7F7;}

.mail_stil{
display:block;
font-size:11px;
color:#5b5b5b;}

.zgjedhur{border:solid 1px #149525 !important; background-color:#D7F8AC !important;                                            background-image:url(zgjedhur.png); background-repeat:no-repeat;
background-position:258px 5px;}

.zgjedhur a:hover{background-color:#D7F8AC !important;                                                                                                                 background-image:url(zgjedhur.png); background-repeat:no-repeat;
background-position:258px 5px;}
.zgjedhur span{border:1px solid #149525 !important;                                                                                                                         background-color:#fff !important;}

.fytyra_zgjedh{background-position:center;
background-repeat:no-repeat;
border:1px solid #2b2b2b;
background-color:#fff;
float:left;
height:49px;
width:54px;
margin-right:5px;}

Tani ka mbetur vetëm gjenerimi i tabelës në HTML edhe mbushja e asaj me informacionet e nevojshme. Sërisht ju mund të merrni si nismë kodin e mëposhtëm edhe ta modifikoni sipas dëshirave tuaja.

<form id="tab_kontaktet" action="" method="post">

<div id="set">
<ul id="kontaktet">
<li id="emaili_yt1@hotmail.com">
<a href="#">
<span style="background-image: url(fytyra_vogel.png);"> </span>
<strong>Emer Mbiemer</strong>
<br/>
<div>emaili_yt1@hotmail.com</div>
</a>
<input type="hidden" name="emaili_yt1@hotmail.com" value="emaili_yt1@hotmail.com"/>
</li>
<li id="emaili_yt1-2@hotmail.com">
<a href="#">
<span style="background-image: url(fytyra_vogel.png);"> </span>
<strong>Emer Mbiemer</strong>
<br/>
<div>emaili_yt1-2@hotmail.com</div>
</a>
<input type="hidden" name="emaili_yt1-2@hotmail.com" value="emaili_yt1-2@hotmail.com"/>
</li>
<li id="emaili_yt1-3@hotmail.com">
<a href="#">
<span style="background-image: url(fytyra_vogel.png);"> </span>
<strong>Emer Mbiemer</strong>
<br/>
<div>emaili_yt1-3@hotmail.com</div>
</a>
<input type="hidden" name="emaili_yt1-3@hotmail.com" value="emaili_yt1-3@hotmail.com"/>
</li>
<li id="emaili_yt1-4@hotmail.com">
<a href="#">
<span style="background-image: url(fytyra_vogel.png);"> </span>
<strong>Emer Mbiemer</strong>
<br/>
<div>emaili_yt1-4@hotmail.com</div>
</a>
<input type="hidden" name="emaili_yt1-4@hotmail.com" value="emaili_yt1-4@hotmail.com"/>
</li>
<li id="emaili_yt1-5@hotmail.com">
<a href="#">
<span style="background-image: url(fytyra_vogel.png);"> </span>
<strong>Emer Mbiemer</strong>
<br/>
<div>emaili_yt1-5@hotmail.com</div>
</a>
<input type="hidden" name="emaili_yt1-5@hotmail.com" value="emaili_yt1-5@hotmail.com"/>
</li>
</ul>
</div>
</form>

Këtu mbaruam. Shpresoj që të keni kuptuar sadopak ndërtimin me jQuery.

Ju mund të shkarkoni edhe dokumentin e gatshëm nëse keni nevojë edhe doni të shkurtoni punën tuaj.

  Copyright protected by Digiprove