Remodal jQuery plugin – necə istifadə edilir?

Günümüzdə veb səhifələr hazırlayarkən mütləq jQuery javascript kitabxanasından istifadə edirik. jQuery kitabaxanasını istifadə edən qoşmalardan birini bu yazımda tanıdaraq, istifadə qaydasını göstərəcəm.

Deməli istifadə edəcəyimiz jQuery qoşmasının adı Remodal`dır. Müxtəlif səhifələrdə yəqin ki, müvafiq bağlantıya kliklədikdə səhifənin qaralıb yeni bir mesajın vəya səhifənin çıxdığını müşahidə etmisiniz. Bu qoşma da elə həmin əməliyyatı yerinə yetirmək üçün istifadə edilir.

Remodal jquery plugin istifadə qaydası

Keçək istifadə qaydasına.

Əvvəla remodal adlı bir qovluq açıb içərisind index.html adlı fayl açıb aşağıdaki kodları addım addım əlavə edək:

1. Addım: HTML səhifəmizi hazırlayaq

 

 
Kodlar bölməsində qeyd etdiyim başlıq, gövdə, alt hissə bölmələri şərhdir. Bu tip kodlar istifadəçiyə göstərilmir. Sadəcə asanlıq olsun deyə qeyd etmişəm. Çünki əlavə edəcəyimiz kodlar bu şərhlərin altına əlavə edilməlidir.
 
2.addım: Səhifəmizə jQuery kitabxanasını əlavə edək. Jquery kitabxanasını səhifəmizin body təqləri arasında ən alta body təqini bağlamadan əvvəl “alt hissə” şərhinin altına əlavə etməliyik.
 

 
3.addım: Remodal qoşmasının rəsmi səhifəsinə gedərək lazımı paketi endirməliyik. Bunun üçün bu linkdən istifadə edə bilərsiniz. Açılan səhifədə Downloads bölməsində Source Code (zip) faylını endirə bilərsiniz.
 
4.addım: Endirdiyiniz zip faylı içərisində src qovluğundakı jquery.remodal.cssjquery.remodal.js fayllarını 1. addımda açdığımız remodal qovluğuna atmalıyıq.
 
5.addım: Qovluğa atdığımız bu iki faylı index.html səhifəmizdəki kodlara əlavə etməliyik. jquery.remodal.css faylını “başlıq” şərhindən sonra, jquery.remodal.js faylını isə “alt hissə” şərhindən sonra əlavə etdiyimiz jQuery kitabxanasından sonra əlavə etməliyik. Əlavə edəcəyimiz kodlar belədir:

jquery.remodal.css üçün:

jquery.remodal.js üçün:

 

Və son olaraq aşağıdaki kofları “gövdə” şərhindən sonra səhifəmizə əlavə etməliyik:

Deməli bütün kodları bir araya yığsaq index.html faylı aşağıdaki kimi olmalıdır:

Yazdığımız kodları aşağıda RESULT bölməsində hazır formada incələyə bilərsiniz:

CSS ilə laylı kağız texnikası

Veb səhifələr hazırlayarkən CSS mütləq istifadə edirik. Səhifələrimizdə bəzi bölmələri istifadəçiyə gözəl göstərmək üçün grafikalardan istifadə etmək də gözəl bir yol ola bilər. Ancaq artıq CSS ilə o qədər çox şeylər etmək mümkündür ki, düşünürəm grafikadan istifadə etmək yerinə elə CSS texnikasını istifadə etmək daha gözəl olardı.
 
Bu yazımda CSS ilə laylı kağız texnikasını necə edə biləcəyimizi göstərməyə çalışacam.
 
Bunun üçün HTML və CSS dillərindən istifadə edəcəm.
 
Əvvəla HTML səhifəmizdə aşağıdaki kodları yazmağımız lazım gələcək:

Ardından CSS kodlarımzı yazmalıyıq. İstəsəniz CSS kodlarını əlavə css faylında yaza bilərsiniz. Mən burada HTML səhifəmizin daxilində yazmağa çalışacam:

Bu qədər :) Hər hansı grafika vəya əlavə koda ehtiyac qalmadan sadə bir şəkildə səhifələrinizdə bu kodları istifadə edə bilərsiniz.

Tətbiqin hazır versiyasına baxmaq üçün bu keçiddən istifadə edin.
 


 
p.s : bəzi tətbiqlər türk dilində hazırladığım dərslərin tərcümələri olduğu üçün hazır versiyaları türk dilində göstərilməkdədir.
 
Qaynaq: Layered paper effect using CSS3 box shadows