Bildiyiniz kimi saytımın təzə dizaynında bir çox dəyişikliklər etmişəm. Bunlardan biri də əsas səhifədə sidebarda (sol tərəfdəki paneldə) fotoqrafiyanın altında yerləşən “jquery möcüzəsi” sahəsidir. Əgər əsas səhifəyə daxil olmusunuzsa, həmin sahədə olan 4 şəkilə klik edəndə şəkillərə uyğun olaraq arxa fonun deyişməsini görəcəksiniz. İndi isə bunu necə etdiyimi, necə etmək lazım olduğunu izah edəcəm. Ki, bəlkə kimlərəsə maraqlı olar, lazım olar. Öz saytlarında istifadə edərlər və s. İndi isə keçək əsas məsələyə…

Birinci növbədə biz Jquery`ni aktivləşdirməliyik. Əks halda gördüklərimiz heç bir effekt verməyəcək. Bunun üçün aşağıdakı kodu </head> teqindən yuxarıda əlavə etmək lazımdır. Əgər sizin sayt (blog) wordpress cms`i üzərində qurulubsa, header.php faylında axtarın.

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

Burda gördüyünüz js/jquery-1.2.6.pack.js linki sizin jquery skriptinizin yolunu göstərir. Məs: mən bu dizayn qovluğunun içində ayrıca js adlı qovluq yaradıb, skripti onun içinə atmışam. Jquery skriptini öz saytından yükləyib ftp hesabınızla saytınızın hər hansı qovluğuna əlavə edə bilər və yaxud sizin ftp-yə girişiniz yoxdursa, wordpress admin panelinizə daxil olub, header.php faylında </head> teqindən yuxarıda mənim saytımdakı jquery linkini əlavə edə bilərsiniz.

<script type="text/javascript" src="http://eminov.info/wp-content/themes/epjurnal/js/jquery-1.6.4.min.js"></script>

Və yaxud mənim saytımdakı jquery.js linkə daxil olub ordakıları copy edin və sizin ftp ilə yaratdığınız eyni adlı faylın içinə paste edin. Seçim sizin yəni.

İndi isə keçək ikinci mərhələyə… İkinci mərhələdə biz saytımızda bu arxa fon dəyişkliyi üçün ayrıca əmrlə (class) link yaradırıq. Hansı ki, biz o linklərin üzərinə klik etməklə arxa fonun rənglərini dəyişmiş olacayıq. Məs: mən sidebar.php faylında “jquery möcüzəsi” başlığı altında yaratmışam bunları.

<ul id="ikonlar">
	<li class="mavi"><a href="#"></a></li>
        <li class="qirmizi"><a href="#"></a></li>
        <li class="yashil"><a href="#"></a></li>
        <li class="sari"><a href="#"></a></li>
</ul>

Məndə şəkillərin üzərinə klik etməklə dəyişilir. Çünki </a> teqindən əvvəl şəkilin (ikonun) kodunu əlavə etmişəm. Bu artıq sizin istəklərinizə, zövqünüzdən asılı bir şey. Həmçinin mən yuxarıda 4 link əlavə etdim. Saytımda da bu skript üçün 4 kod olduğu üçün sizlərə daha asan olsun deyə belə etdim. Əslində neçə arxa fonun olması sizin istəklərinizdən asılı olaraq dəyişir. Amma onu da qeyd edim ki, çox olması yaxşı deyil. Həm sayt ağır işləmiş olur, həm də kodların içində itib-bata bilərsiz. Gözdən qaçan sadə bir səhv bütünlüklə gördüyünüz işin üstündən xətt çəkmiş olar.

İndi isə keçək css faylında nəyi necə əlavə etmək lazım olduğuna. Mənim saytımda bu skript üçün təkcə rəng deyil, həmçinin şəkil də əlavə etmişəm. Ona görə də kodları şəkillərlə bir yerdə göstərəcəm.

.bg1 { background: url(images/arxafon3.png) no-repeat center top; background-color: #d5d5d6; }
.bg2 { background: url(images/arxafon2.png) no-repeat center top; background-color: #0152c8; }
.bg3 { background: url(images/arxafon4.png) no-repeat center top; background-color: #e6c3ab; }
.bg4 { background: url(images/arxafon.png) no-repeat center top; background-color: #a38484; }

Həmçinin gördüyünüz bu kodlarda şəkil hissəsini çıxardaraq təkcə rəngləri saxlaya bilərsiniz. Bunun üçün əlavə etdiyimiz css əmrindən background: url(images/arxafon.png) no-repeat center top; hissəsini çıxarmalı olacayıq.
Ona kod belə görənəcək.

.bg1 { background-color: #d5d5d6; }
.bg2 { background-color: #0152c8; }
.bg3 { background-color: #e6c3ab; }
.bg4 { background-color: #a38484; }

Yuxarıda göstərilən kodları css-də body əmrinin altında yazmalısınız.
İndi isə yuxarıda sidebar.php faylında əlavə etdiyimiz 4 linkdəki class əmrləri üçün css kodu yazaq.

ul#ikonlar li { position: absolute; list-style: none; }
ul#ikonlar li.mavi { left: 40px; width: 49px; height: 44px; border: 1px solid #a2a2a2;  }
ul#ikonlar li.qirmizi { left: 90px; width: 49px; height: 44px; border: 1px solid #a2a2a2; }
ul#ikonlar li.yashil { left: 140px; width: 49px; height: 44px; border: 1px solid #a2a2a2;}
ul#ikonlar li.sari { left: 189px; width: 49px; height: 44px; border: 1px solid #a2a2a2;}

Kodda gördüyünüz left əmrindəki pixel fərqi kodun solda neçə pixel məsafədə olduğunu göstərir. Əgər mavi və qırmızıya verilən əmrlərin hər ikisi 40px və yaxud 90 px olsaydı, linklər bir-birinin üstünə düşmüş olardı. Hansı ki, iksindən biri görsənməyəcəkdi. Yəni bu o deməkdir ki, mavi 40px soldan başlayır, qırmızı isə 90 px. Aralarında 50px fərq var yəni. Koddakı width və height en və hündürlüyü göstərir. Yəqin ki, az da olsa ingilis dili bilikləriniz var. Əks halda bu kimi əmrlərin nəyi icra etdiyini bilməyəcəksiniz.

Css-lə də bitirdik. İndi isə keçək yenə də header.php faylına və orda bu əmrləri yerinə yetirəcək skript yaradaq. Yuxarıda qeyd etdiyim kimi ingilis dili bilikləri olan skriptdəkiləri asanca başa düşəcək.

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

$("li.mavi").click( function(){ $
	("body").removeClass('bg2 , bg3 , bg4').addClass("bg1");
});

$("li.qirmizi").click( function(){ $
	("body").removeClass("bg1 , bg3 , bg4").addClass("bg2");
});

$("li.yashil").click( function(){ $
	("body").removeClass("bg1 , bg2 , bg4").addClass("bg3");
}); 

$("li.sari").click( function(){ $
	("body").removeClass("bg1 , bg2 , bg3").addClass("bg4");
}); 

		});
</script>

İndi isə gəlin skripti oxuyaq ki, hər şeyi anlayaq. Yəni nəyə görə belə əmrlər verdiyimizi. Skriptə diqqət yetirsəniz 4 əmrin verildiyini, həmçinin əmrlərin adlarını də görərik. Bu əmrlərdən birini göstərib izah edim.

$("li.mavi").click( function(){ $
	("body").removeClass('bg2 , bg3 , bg4').addClass("bg1");
});

Gördüyünüz kimi li.mavi-yə (“li.mavi”) klik edəndə (click) bizə lazım olan arxa fonu, hansı ki, body-də (“body”) yerləşir, dəyişir. Yəni ki, css-dən bd2, bg3, bg4 removeClass(‘bg2 , bg3 , bg4′) silib əvəzinə bg1 addClass(“bg1″) əlavə edir. Gördüyünüz kimi hər şey çox sadədir. Sadəcə biraz kodların nəyi necə icra etdiyini anlamaq lazımdır.

p.s: Əgər biraz məntiqinizi işlətsəniz təkcə body yox, saytınızdakı bir çox yerləri dəyişə bilərsiniz. )) Css-də əlavələr etməklə, yaratdığımız skriptdəki body-nin yanına, sizin dəyişmək istədiyiniz sahənin adını da yazmaqla və s.

Burdakı yazılanların demo versiyasını görmək üçün əsas səhifəyə daxil olun və soldakı jquery möcüzəsi sahəsinə klik edin. )