什么是用于谷歌的气泡提示和类似的“学习曲线”;/“开始”;气泡提示

What is used for Googles bubble tips and similar "learning curve" / "getting started" bubble tips?

本文关键字：提示 学习曲线 气泡 开始 用于 谷歌 什么      更新时间：2023-09-26

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

我希望在我的(Ruby on Rails)网站上有类似的东西来帮助新用户了解网站周围的功能，而不会在用户熟悉功能后在页面上留下气泡提示。

有谁知道这些"入门"泡泡提示是如何制作的吗?它只是一个简单的cookie存储在用户的计算机上关于他是否看到(关闭)提示?

有人知道rails插件/gem可以很容易地制作这些提示吗?

谢谢:-)

这不是平台特定的事情，但通常是在前端完成的。服务器代码只关心向页面写入是否启动事件的条件。

就前端而言，JS指南是一个优秀的javascript/jQuery插件，你可以使用它在你的网页上创建一个"导游"功能。我已经在几个web应用程序中成功地使用了它们。(我不隶属，只是一个粉丝)

首先，您可以在DB中存储条件，然后将其插入javascript中，或者设置cookie并在javascript中读取。

我建议将条件存储在DB中，因为在我使用的每台新计算机和应用程序上都显示提示/游览会很烦人。

在包含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
    }

对于关闭后消失的功能，您可以提取此公告railscast的概念-只是不要将它们放在侧面，并使用css: http://railscasts.com/episodes/103-site-wide-announcements

为它们设置不同的样式。
相关文章：