Bir "araç turu" sağlamanın en iyi yolu

Question

İçeriğe dayalı araç ipuçlarını kullanarak hızlı bir web turu turu yapmanın en iyi yolu nedir?

Kullanım örneği:

• kullanıcı webapp gider
• kullanıcı
• kullanıcının her ipucu sonraki tıklayabilirsiniz arabiriminin bir rehberli tur istiyorsa soran açılır çeşit gösterilmesini bir sonraki
• kullanıcı çıkışı X veya düğme

çeşit tıklayarak istediğiniz zaman tura iptal edebilirsiniz mı orada Bu kolay kütüphane var mı?

Teşekkürler!

Answer 1

Bunu yapmanın en kolay yolu, Jeff Pickhardt'ın Guider-JS javascript araç ipucu gezinme kitaplığıdır. Kullanımı çok kolaydır (aynı zamanda birçok çok gelişmiş özelliğe sahip olmasına rağmen) ve tam olarak tanımladığınız şeyi yapar.

Guider-JS ile yapılan bir araç ipucu geçişinin this excellent example adresini kontrol edebilirsiniz.

Bir üretim sitesinde çalışan bir örnek görmek istiyorsanız, kullanıcı arabirimi için yardım ve geçiş kılavuzları sağlamak amacıyla optimizely.com numaralı belgede kapsamlı olarak kullanılır.

UPDATE: ZURB Foundation artık mükemmel "Joyride" tooltip tour javascript kitaplığını korumaktadır.

Answer 2

Ayrıca tur parçasını, araç ipucunu ayarlamak için her zaman bir geri arama çağıran ve diğeri kapatmak için olan bir yineleyici ile bağlantılı bir liste kullanarak kendiniz yazabilirsiniz. Daha sonra istediğiniz herhangi bir araç ipucu kullanabilirsiniz. Burada ne demek istediğimi göstermek gerekir kavramının hızlı bir kanıtı: Ben kısa [inceleme] yazdım

var toolTipList = { 
    tooltips: [], 
    currentTooltip: {}, 
    addTooltip: function(tooltip){ 
     var currentTail = this.tooltips.length > 0 ? this.tooltips[this.tooltips.length - 1] : {}; 
     var newTail = { 
      tooltip: tooltip, 
      prev: currentTail 
     }; 
     currentTail.next = newTail; 
     this.tooltips.push(newTail); 
    }, 

    initialize: function(){ 
     this.currentTooltip = this.tooltips[0]; 
     this.currentTooltip.tooltip.callback(); 
    }, 

    next: function(){ 
     if(this.currentTooltip.next){ 
      this.currentTooltip.tooltip.close(); 
      this.currentTooltip = this.currentTooltip.next; 
      this.currentTooltip.tooltip.callback();   
     } 
    }   
}; 


for(var i = 0; i < 10; i++){ 
    toolTipList.addTooltip({ 
     callback: function(){ 
      // called every time next is called 
      // open your tooltip here and 
      // attach the event that calls 
      // toolTipList.next when the next button is clicked 
      console.log('called'); 
     }, 
     close: function(){ 
      // called when next is called again 
      // and this tooltip needs to be closed 
      console.log('close'); 
     } 
    }); 
} 

toolTipList.initialize(); 

setInterval(function(){toolTipList.next();}, 500); 

​JSFiddle link