Question

今天我进入了我的Google日历，并且有一个小方框（泡泡小贴士）解释说他们已经为日历活动实施了新的调色板。盒子的右上角有一个小的关闭按钮。这些天在网络上非常正常的东西。

我希望在我的（Ruby on Rails）网站上有类似内容，以帮助新用户了解网站上的功能，一旦用户熟悉该功能，就不会在页面上显示气泡提示。

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

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

谢谢： - ）

Answer 1

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

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

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

我建议将条件存储在数据库中，因为在我使用的新计算机和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
    }

Answer 2

对于关闭它们后它们消失的功能，你可以提取这个公告轨道广播的概念 - 只是不要把它们放在一边并将它们设计成不同的wuth css：http://railscasts.com/episodes/103-site-wide-announcements

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

2 个答案: