Hopscotch website sihirbazı ( Aşama aşama ürününü tanıt )

0 4.312

Yeni konu paylaşıldığı takdirde anlık olarak bilgilendirileceksiniz.

Yaptığım bir proje için müşterilere sistemin nasıl kullanıldığını anlatmam gereken bir rehber yapmam gerekiyordu ve birazcık araştırma yaptıktan sonra herkesin bilmediği bir rehber yazılımı Hopstoch‘u buldum.

Hopscotch  Nedir ? 

Hopscotch geliştiriclerin sayfalarına ürünü tanıtabilmesi için JSON ile çalışan bir frameworktür.Bu yapı ile ürününüzü aşama aşama tanıtımını yapabilirsiniz.

 

Genel Kullanımı:

Hopscotch yapısını kullanabilmemiz için ilk önce basit bir şekilde hopscotch.csshopsotch.js ve ilkturum.js dosyalarını sayfanıza include etmeniz gerekmektedir.Dosyaları include ettikten sonra hopscotch nesneleri sayfanın kütüphanesine eklenmiş olacaktır.

    <html>
      <head>
        <title>My First Hopscotch Tour</title>
        <link rel="stylesheet" href="css/hopscotch.css"></link>
      </head>
      <body>
        <h1 id="header">My First Hopscotch Tour</h1>
        <div id="content">
          <p>Content goes here...</p>
        </div>
        <script src="js/hopscotch.js"></script>
        <script src="js/ilkturum.js"></script> <!-- define and start your tour in this file -->
      </body>
    </html>
        

 

Üstteki işlemleri yaptıktan sonra ilk rehber yazılımının javascript kodlarını hazırlamanız gerekmektedir.

ilkturum.js

   // Define the tour!
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "İlk turumuz",
          content: "Bu benim ürün tanıtımında ki ilk rehberim.",
          target: "header", 
          placement: "right"
        },
        {
          title: "Bu benim konumun içindeki yazı",
          content: "Burada benim ilk yazımın içeriği yazmaktadır.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

    // Start the tour!
    hopscotch.startTour(tour);

Detaylı Kulllanım : 

Steps lerin detaylı kullan 

target: Gösterilecek kutucuğun id değeri yazılacak örneğin Div'e bir
 id atadınızve  ilkkutum yaptınız. Bunun rehber tarafından gösterilmesini istiyorsanız target'in karşısına yazacaksınız.

Title :kutucuğun başlığını yazacaksınız.
Content : Kutucuk içeriğini yazacaksınız
placement: Belirlediğiniz idinin hangi tarafında çıksın top (Üst),right(sağ),left(sol) and bottom(alt).
showPrevButton: Geri butonunu göster
yOffset: kutucuğun y pozisyonunu ayarlar margin değeri görür.
xOffset: kutucuğun x pozisyonunu ayarlar margin değeri görür.


 

Altta size hopstoch demosunu indirmeniz için link ekledim. Indirdikten sonra demo/js klasörünün içinde demo.js göreceksiniz çalışacağınız dosya o dosyadır.

 

Hopscotch İndir

 

Konuda kendimi anlatabildiğimi düşünüyorum takıldığınız veya anlamadığınız bir yer olursa konu altına yorum atarak danışabilirsiniz.Sizin için hopscotch gibi başka sihirbazlarda araştırdım altta demolarını sizinle paylaşıyorum umarım sizlerin işlerine yarar.

 

https://introjs.com

http://bootstraptour.com

https://easelinc.github.io/tourist/

http://github.hubspot.com/shepherd/docs/welcome/

 

 

Yeni konu paylaşıldığı takdirde anlık olarak bilgilendirileceksiniz.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy