Ruby on rails rails 3，实现'的最简单方法；弹出帮助'；对于表单字段

对于我们在heroku托管的rails 3应用程序，使用haml（但不是compass或类似的东西）：

当我们的用户填写表单时，我们希望为每个字段找到一个易于实现的“弹出”框，解释其中的内容。不必太花哨，但应该允许任意大的多行弹出框包含20到100个单词

“popup”也可能意味着字段下方的某种类型的“展开”或“展开”div标记，但页面上真正的弹出窗口将是理想的

---

有人能提出一个简单的方法来实现这一点吗

我能想到的最简单的方法是在输入字段标签内部或后面使用一个链接，该链接指向一个隐藏的div，其中包含您想要的帮助信息：

<label for="name">Name: <a href="#name-help" rel="facebox">?</a></label>
<input type="text" name="name" ... />
<div id="name-help" style="display: none;">
  <p>This is the help text for <strong>name</strong></p>
  <p>You can put any html here</p>.
</div>

名称：
这是名称的帮助文本

您可以在此处放置任何html
。

您可以将help div放在输入之后，或者放在文档的末尾；它们不会有什么区别。

我一直使用。它的设置和实施相当容易：

<a href="#overlay" rel="#overlay" class="overlayLink">

<div id="overlay">
  content of your help
</div>

---

我在表单上使用jQueryUI对话框，可以很好地处理一系列不同的覆盖操作（）。该布局类似于egarica在上面提到的显示：没有包含帮助信息的div（我的位于表单其余部分的上方），并且表单元素旁边有一个可单击的范围来打开特定的帮助div

<script>
 document.observe('dom:loaded',function(){         
    $j(function() {
                  $j("#dialog_postcode").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
           });

           $j("#opener_postcode").click(function() {
                $j("#dialog_postcode").dialog("open");
                return false;
           });
       });

});
 </script>

<div id="dialog_postcode" title="Postcode information">
    <fieldset>
        <legend>Postcodes</legend>
        <p>Postcodes are looked up on a static database table.</p>          
    </fieldset>
</div>

//dialog opener placed by relevant element
<span id="opener_postcode" class="help" title="Postcode information">?</span>

document.observe（'dom:loaded'，function（）{
$j（函数（）{
$j（“#dialog_postcode”）。dialog({
自动打开：错误，
表演：“盲人”，
隐藏：“爆炸”
});
$j（“#开始者#u邮政编码”）。单击（函数（）{
$j（“#dialog_postcode”）.dialog（“open”）；
返回false；
});
});
});
邮政编码
在静态数据库表中查找邮政编码。

//由相关元素放置的对话框开启器
?

在Rails 5.0中：

'button'，：onclick=>'警报（“如果左侧列表中缺少Zipcode，请执行：\n\n\
1.输入任意zipcode并单击“创建客户端”。\n\
2.转到Zipcodes并创建新的邮政编码。\n\
3.从客户端列表编辑此新客户端。\n\
4.选择新的zipcode“%”%>

---

这将发布一个js对话框，而不作为表单帖子提交。

使用这种方法，我们是否需要为我添加帮助的每个新字段编辑javascript？在我的表单中，我有-可能是清理代码的某种方式（可能通过将特定的div id作为变量传递，并使用“opener”或“dialog”类遍历所有div）也谢谢这个。。。我喜欢这个解决方案，但决定使用facebox，因为它更容易安装和工作。

<script>
 document.observe('dom:loaded',function(){         
    $j(function() {
                  $j("#dialog_postcode").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
           });

           $j("#opener_postcode").click(function() {
                $j("#dialog_postcode").dialog("open");
                return false;
           });
       });

});
 </script>

<div id="dialog_postcode" title="Postcode information">
    <fieldset>
        <legend>Postcodes</legend>
        <p>Postcodes are looked up on a static database table.</p>          
    </fieldset>
</div>

//dialog opener placed by relevant element
<span id="opener_postcode" class="help" title="Postcode information">?</span>