Merhabalar;
Oluşturduğumuz sayfaları tanıtmak için keşfettiğim harika bir kütüphaneden bahsedeceğim. Öncelikle https://introjs.com/ adresine girip dowload kısmından son sürümünü indiriyoruz.
İndirdiğimiz zip dosyasını masaüstüne çıkartıp içerisinden bize lazım olanları yeni tanımladığımız bir klasöre aktarıyoruz. (Temalar tercihe bağlıdır.)
Sonra Layout’a resimdeki sıralama ile yetleştriyoruz.
Sonrasında ister Content, ister Scripts klasörüne SayfaTanitimlari diye bir klasör açıyoruz. (istediğiniz yere istediğiniz isimle açabilirsiniz.) ve kodumuzu yazıyoruz. Kodları direk paylaşacağım ama yorum satırı olarak nerede neyi amaçladığımı belirtiyor olacağım.
Belirtmeden önce karşılaştığım birkaç problemden bahsedeyim;
- Bir kullanıcıya(Tarayıcıya) bir kere görüntületmem gerekiyordur.(Sövebilirlerdi:)
- Tanıtımın atlanmaması gerekiyordu. (Skip butonunu gizleyince Done butonu da gizlendi. ) JS’kısmında son adımda açmam gerekiyordu.
- Ve dinamik bir yapıda olması gerekiyordu. Çünkü birden çok sayfa için birden çok tanıtım gerekiyordu. Hepsi birbirinden farklı tarihlerde tanıtılmaya ihtiyaç duyuyordu. Herhangi bir sayfada bir güncelleme olduysa, sadece o sayfayı baştan görmeliydi. Yani tüm tanıtımlar resetlenmemeliydi.
function Tanitim(tanitimListesi, sayfaAdi ,sonGuncellenmeTarihi) {
var doneTour = localStorage.getItem(sayfaAdi) === sonGuncellenmeTarihi;
var intro = introJs();
intro.setOptions({
"nextLabel": " İleri >", //Türkçeleştirmek için kullandım.
"prevLabel": " < Geri ",
"doneLabel": " Tamam ",
steps: tanitimListesi //Json tipinde gelen tanıtılacak element listesi.
});
intro.onafterchange(function () { //Gizlenilen Done butonunu sonuncu tanıtımda açmak için.
if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1)
{
$('.introjs-skipbutton').show();
/*Skip etmelerini engellemek icin CSS'de ".introjs-skipbutton" class'ının altına disaple:none yaptım.
* Ama Done(Tamamlandı) görünmedi bu sefer. bunu açmak için bu js'i ekledin.*/
}
});
if (doneTour) {
//return;
}
else {
setTimeout(function () {
intro.start();
}, 1000); // bir saniye gecikmeli açılması için.
intro.oncomplete(function () {
localStorage.setItem(sayfaAdi, sonGuncellenmeTarihi);
});
//intro.onexit(function () {
// localStorage.setItem(sayfaAdi, sonGuncellenmeTarihi); //Eğer sayfanın herhangi bir yerine tıklayıp tamamlamadan çıktıysa tamamlandı sayılmasın istediğim için yorum satırı yaptım.
//})
}
}
Yukarıda tatımımızın temelini oluşturduk. Şimdi ise tanıtımlarımızın Object/JSON’ını hazırlayalım ve document.Ready ile kullanıma hazır hale getirelim. (istenirse farklı eventlar ile de tetiklenebilir document.Ready zorunlu değil.)
var tanitimDuyuruListe = [
{
element: '#btnEkle',
intro: "Yeni duyuru eklemek için bu butonu kullanabilirsiniz.",
position: 'left-center'
},
{
element: '#btnDuzenle',
intro: "Var olan bir duyuruyu düzenlemek için burayı kullanabilirsiniz.",
position: 'left-center'
},
{
element: '#btnSil',
intro: "Var olan bir duyuruyu silmek için burayı kullanabilirsiniz.",
position: 'left-center'
}
];
$(document).ready(function () {
Tanitim(tanitimDuyuruListe, 'DuyuruListe', '05092019');
});
Ben karmaşayı önelemek adına, her sayfaya ayrı bir tanıtım js’si oluşturdum. Yukarıda ki hazırlıklar bittiyse eğer. Olutrulduğumuz js’si, kullanmak istediğimiz sayfanın sonuna ekliyoruz. Eğer temayıda kullandıysanız ekran görüntüsü aşağıda ki gibi olmalıdır.
Top comments (0)