рельсы 3, самый простой способ реализовать «всплывающую справку» для полей формы

Question

для нашего приложения rails 3, размещенного на heroku с использованием хамла (но не компаса или чего-то в этом роде):

когда наши пользователи заполняют формы, мы хотели бы найти простое для реализации всплывающее окно для каждого поля, которое объясняет, что происходит в нем. не должен быть необычным, но должен позволять произвольно большие многострочные всплывающие окна, содержащие от 20 до 100 слов

«всплывающее окно» также может означать «раскрывающийся» или «расширяющийся» тег div под полем, но идеальное всплывающее окно поверх страницы будет идеальным.

Кто-нибудь может предложить простой способ реализовать это?

Answer 1

Самый простой способ, о котором я могу подумать, - это использовать 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>

Вы можете поместить разделы помощи сразу после ввода или в конце документа;они не будут иметь никакого значения.

Answer 2

Я всегда использовал JQuery Overlay . Он довольно прост в настройке и очень прост в реализации:

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

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

Затем в вашем Javascript (если вы используете jQuery

$('.overlayLink').overlay()

Answer 3

Я использую в моей форме диалоговые окна JQuery-ui - довольно хорошо работает с рядом различных оверлейных действий (http://jqueryui.com/demos/dialog/).) Макет похож на то, что egarica упоминает выше с дисплеем: нет 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>

Answer 4

In 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 без отправки в виде сообщения.