javascript – 什么用于谷歌泡泡提示和类似的“学习曲线”/“入门”泡泡提示？

今天我进入了Google日历,有一个小盒子(泡泡小贴士)解释说他们已经为日历活动实现了新的调色板.盒子的右上角有一个小的关闭按钮.这些天网络上非常正常的东西.

我想在我的(Ruby on Rails)网站上有类似的东西,以帮助新用户了解网站周围的功能,一旦用户熟悉该功能,就不会在页面上显示气泡提示.

有谁知道如何制作这种“入门”泡泡小贴士？它只是一个简单的cookie存储在用户计算机上,关于他是否已经看到(关闭)提示？

是否有人知道rails插件/ gem可以轻松制作这些提示？

谢谢 ：-)

解决方法

这不是特定于平台的东西,但通常在前端完成.在向页面写入是否启动事件的条件时,服务器代码才会受到关注.

就前端而言,JS Guiders是一个出色的javascript / jQuery插件,您可以使用它来创建网页上的“导游”功能.我已经在几个Web应用程序中成功使用它们. (我不是附属的,只是一个粉丝)

要开始游览,您可以将条件存储在数据库中,然后将其插入到javascript中,或者设置cookie并在javascript中读取它.

我建议将条件存储在DB中,因为在我使用的新计算机和App上显示提示/游览会非常烦人.

在包含jQuery和Guider脚本之后,您可以使用这样的代码来创建游览：

$(document).ready(function () {

        guiders.createGuider({
            buttons: [{ name: "Next"}],description: "This is the first guider",id: "first",next: "second",// when the button is pressed,jump to this guider
            overlay: true,title: "Guten Tag!"
        });

        guiders.createGuider({
            attachTo: "#logo",// dom element to attach to
            buttons: [{ name: "Close"}],description: "This is the second...",id: "second",overlay: true,// grey out the background to 1/2 opacity
            position: 3,// Clock position (3 o'clock
            title: "Find your way home"
        });

    });

    if(condition){
        guiders.show('first'); // jump into the tour at guider id first
    }

原文地址：https://www.jb51.cc/js/157002.html