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