rails 3，是实现表单字段“弹出帮助”的最简单方法

如何解决rails 3，是实现表单字段“弹出帮助”的最简单方法

|| 对于使用haml（但不包括指南针或类似工具）托管在heroku上的rails 3应用程序： 当我们的用户填写表格时，我们希望为每个字段找到一个易于实现的“弹出”框，以说明其中的内容。不必花哨，但应允许包含20至100个字的任意大的多行弹出框 \'popup \'也可能表示该字段下方有某种类型的\“ unfolding \”或\“ expanding \” div标签，但是真正的页面弹出菜单是理想的。 谁能建议一种简单的方法来实现这一目标？     

解决方法

我能想到的最简单的方法是在输入字段标签的内部或之后使用一个facebox链接，该链接指向带有所需帮助信息的隐藏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>

您可以在输入之后或文档末尾放置帮助div。他们不会有任何不同。     ,我一直使用JQuery叠加层。它相当容易设置并且非常容易实现：

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

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

然后在您的Javascript中（假设您正在使用jQuery

$(\'.overlayLink\').overlay()

    ,我在表单上使用JQuery-ui对话框-与一系列不同的叠加操作（http://jqueryui.com/demos/dialog/）配合使用效果很好。布局类似于上面的egarica所提到的显示：没有div包含帮助信息（我的信息仅位于表单其余部分的上方），并且form元素旁边的可单击范围打开特定的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>

    ,在Rails 5.0中：

<%= submit_tag \"Help\",:type => \'button\',:onclick => \'alert(\"If Zipcode is missing in list at left,do: \\n\\n\\
      1. Enter any zipcode and click Create Client. \\n\\
      2. Goto Zipcodes and create new zip code. \\n\\
      3. Edit this new client from the client list.\\n\\
      4. Select the new zipcode \")\' %>

这将发布一个js对话框，而无需提交为表单发布。