Как сделать HTML / CSS помощники форм / поповер - PullRequest
Новая
       5

Как сделать HTML / CSS помощники форм / поповер

0 голосов
/ 28 марта 2012

В настоящее время я пытаюсь выяснить, как сделать всплывающих окон / помощников формы. Если вы действительно не знаете, о чем я говорю, это то, что я имею в виду: http://www.ashrobbins.com/wp-content/uploads/2012/01/sliding-form-helpers.png

Я хотел бы сделать что-то вроде следующего:

# 1: пользовательская позиция - красный квадрат. И желтые квадраты связаны, так что я большой желтый квадрат отображает информацию о первых квадратах. Вот что я имею в виду: http://postimage.org/image/wgzedx2fv/

PS: обратите внимание, что поле в третьем столбце должно быть большим!

# 2 Для этого шага, когда пользователь переходит ко второму ряду (красный квадрат), я хочу, чтобы поле в третьем столбце изменилось в соответствии с информацией второго ряда. Надеюсь, это поможет: http://postimage.org/image/69y7hyk63/

Я не могу понять, как это сделать. В настоящее время я использую RoR и Bootstrap, но я не уверен, что это как-то связано, возможно, это просто связано с CSS / HTML.

Я пытался сделать что-то подобное для моего html, и это работало до некоторой степени, но это выглядит не так хорошо, как хотелось бы.

Всё поможет. Спасибо!

Обновление: В соответствии с просьбой у меня есть такой код:

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

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

Или мой RoR:

  • View

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

  • Частичный

%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"}

Просто для справки, я использую HAML. Я просто не могу стилизовать это должным образом здесь, в SO ...

1 Ответ

1 голос
/ 28 марта 2012

Для всего динамического, происходящего на стороне клиента (например, DOM Manipulation), вы захотите использовать Javascript. Я написал пример для вас, используя jQuery; но вы можете свободно использовать любую предпочитаемую вами библиотеку (или вообще ни одной). 

$("#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/

...