Wie HTML/CSS-Formular Helper/Popover

Question

Ich bin gerade dabei, herauszufinden, wie man Popovers/Form Helpers tun. Wenn Sie nicht wirklich wissen, was ich rede, das ist, was ich beziehe mich auf: http://www.ashrobbins.com/wp-content/uploads/2012/01/sliding-form-helpers.png

ich so etwas wie die folgenden tun mögen:

# 1: Benutzerposition ist das rote Quadrat . Und die gelben Quadrate sind verwandt, so dass das große gelbe Quadrat Informationen über die ersten Quadrate anzeigt. Hier ist, was ich meine: http://postimage.org/image/wgzedx2fv/

PS: Beachten Sie, dass die Box in der dritten Spalte groß sein muss!

# 2 Für diesen Schritt, wenn der Benutzer in die zweite Zeile (rotes Quadrat) geht, möchte ich das Feld in der dritten Spalte ändern, um der Information der zweiten Zeile zu entsprechen. Hoffentlich hilft das: http://postimage.org/image/69y7hyk63/

Ich kann nicht herausfinden, wie man das macht. Ich benutze derzeit RoR und Bootstrap, aber ich bin unsicher, ob es etwas zu tun hat, es kann einfach mit CSS/HTML zu tun haben.

Ich habe versucht, so etwas für meine html und es funktioniert zu einem gewissen Grad, aber es sieht nicht so gut aus, wie ich es wollen würde.

Alles wird helfen. Danke!

Update: Wie gewünscht, habe ich einige Code wie folgt aus:

<div class="span4" style="margin-left: 0px; ">

<div class="span3" style="margin-left: 0px; ">here where the explanation will go</div>

Oder meine RoR:

• Ansicht

= render :partial => 'shared/unitrow', :locals => {:f => f, :main_input => :offwarfare, :input_label => "Offensive", :power => OFFWARFARE_POWER}

• Partial

%div{:id => "wrapper"}

=f.input main_input, :label => input_label, :input_html => { :class => 'unitinputstyle'}, :wrapper_html => { :class => "unitinputdiv" }

%=div{:class => "unitpricediv"}

=power 

%div{:class => "clear"}

Nur als Referenz verwende ich HAML. Ich kann es einfach nicht richtig hier in SO ...

Answer 1

Für alles dynamische Geschehen auf der Clientseite (wie DOM Manipulation) werden Sie Javascript verwenden möchten. Ich habe ein Beispiel für Sie mit einem jQuery geschrieben; aber Sie können frei wählen, welche Bibliothek Sie bevorzugen (oder gar keine).

$("#interactiveForm input").focus(function() { 
    var target = $(this).attr("id"); // Gets the ID of the focused input 

    $("#infoBox p:visible").hide(); // Hides visible content (if any) 
    $("#infoBox").find("p#"+target).show(); // Shows the paragraph with the corresponding ID 
}); 

http://jsfiddle.net/LQNS8/