Najlepszy sposób, aby zapewnić " tooltip tour "[zamknięty]

Jaki jest najlepszy sposób, aby zapewnić szybkie zwiedzanie webapp za pomocą kontekstowych podpowiedzi?

Przypadek użycia:

  • użytkownik przechodzi do webapp
  • jakaś forma popup z pytaniem, czy użytkownik chce oprowadzać po interfejsie
  • użytkownik może kliknąć Dalej na każdym podpowiedzi, aby wyświetlić następny
  • użytkownik może anulować wycieczkę w dowolnym momencie, klikając jakiś przycisk exit X lub

Czy istnieje łatwa biblioteka, która to robi?

Dzięki!

Author: Garen Checkley, 2012-02-20

2 answers

Najprostszym sposobem na to jest Korzystanie z biblioteki guider-JS Guider-JS JavaScript tooltip walk-through library. Jest bardzo łatwy w użyciu (chociaż ma również kilka bardzo zaawansowanych funkcji) i robi dokładnie to, co opisałeś.

Możesz sprawdzić ten doskonały przykład z podpowiedzią wykonaną za pomocą Guider-JS.

Jeśli chcesz zobaczyć działający przykład na miejscu produkcji, jest on szeroko stosowany na optimizely.com w celu zapewnienia pomocy i przewodnik po interfejsie użytkownika.

Aktualizacja: Fundacja ZURB utrzymuje teraz doskonałą "Joyride" tooltip tour javascript library.

 25
Author: BenjaminRH,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-18 00:00:53

Możesz również napisać część trasy samodzielnie, używając połączonej listy z iteratorem, który zawsze wywołuje wywołanie zwrotne, aby skonfigurować podpowiedź, a jeden, aby ją zamknąć. Następnie możesz użyć dowolnego skryptu podpowiedzi. Oto szybki dowód koncepcji, który powinien pokazać, co mam na myśli:

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

 1
Author: TheShellfishMeme,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-19 21:03:59