Google气泡提示和类似的“学习曲线”/“入门”气泡提示使用的是什么？

Question

今天我进入我的Google Calendar，有一个小方框(泡泡提示)解释说他们已经为日历事件实现了一个新的调色板。盒子的右上角有一个小的关闭按钮。这些天在网络上很常见的东西。

我希望在我的(Ruby on Rails)站点上有一些类似的东西，以帮助新用户了解站点周围的功能，而不是在用户熟悉功能后，页面上仍然有气泡提示。

有人知道这样的“入门”泡泡小贴士是怎么做的吗？它仅仅是存储在用户计算机上的一个简单的cookie，关于他是否已经看到(关闭)了这个提示？

有没有人知道有一个rails插件/gem可以让这些技巧变得简单？

谢谢:-)

Answer 1

这不是特定于平台的事情，而通常是在前端完成的。只有在向页面写入是否启动事件的条件时，服务器代码才会受到关注。

就前端而言，JS Guiders是一个优秀的javascript/jQuery插件，你可以用它在你的网页上创建一个类似于“导览”的功能。我已经在几个web应用程序中成功地使用了它们。(我没有关联，只是一个粉丝)

要开始本教程，您可以将条件存储在DB中，然后将其插入到javascript中，或者设置cookie并在javascript中读取它。

不过，我建议将条件存储在数据库中，因为在我使用的每台新计算机和应用程序上显示提示/浏览将是相当恼人的。

在包含jQuery和向导脚本之后，您可以使用如下代码创建教程：

$(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
    }

Answer 2

对于关闭后它们消失的功能，你可以提取这个公告的概念--只是不要让它们变得很宽，并用css：http://railscasts.com/episodes/103-site-wide-announcements来改变它们的样式。