22

コンテキスト ツールチップを使用して Web アプリケーションのクイック ツアーを提供する最良の方法は何ですか?

使用事例：

  • ユーザーは webapp に移動します
  • ユーザーがインターフェイスのガイド付きツアーを希望するかどうかを尋ねる何らかの形式のポップアップ
  • ユーザーは各ツールチップで [次へ] をクリックして、次のツールチップを表示できます
  • ユーザーは、何らかの出口 X またはボタンをクリックすることで、いつでもツアーをキャンセルできます。

これを行う簡単なライブラリはありますか？

ありがとう！

4

2 に答える 2

26

これを行う最も簡単な方法は、Jeff Pickhardt の Guider -JS JavaScript ツールチップ ウォークスルー ライブラリを使用することです。非常に使いやすく (ただし、いくつかの非常に高度な機能も備えています)、まさにあなたが説明したことを実行します。

Guider-JS で作成されたツールチップ ウォークスルーの優れた例を確認できます。

実稼働サイトでの実際の例を見たい場合は、optimizely.comで広く使用され ており、ユーザー インターフェイスのヘルプとウォークスルー ガイドが提供されています。

更新: ZURB Foundation は現在、優れた「Joyride」ツールチップ ツアーJavaScript ライブラリを維持しています。

于 2012-02-19T20:49:31.657 に答える
1

ツールチップを設定するためのコールバックとそれを閉じるためのコールバックを常に呼び出すイテレータを含むリンク リストを使用して、ツアー パーツを自分で作成することもできます。その後、任意のツールチップ スクリプトを使用できます。これは、私が何を意味するかを示す概念の簡単な証明です。

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);

JSFミドルリンク

于 2012-02-19T21:03:59.550 に答える