решений best_in_place вход выглядеть бутстраповской вход

Question

В настоящее время и defaultly, best_in_place работает как

перед тем редактировать

один раз в режиме редактирования он выглядит

Я хотелось бы, чтобы перед редактированием понравился обычный (ванильный) загрузочный ввод

и в режиме редактирования это будет выглядеть editting регулярного поля ввода

несчастливы, все мои попытки объединения CSS и Javascript не удалось ..

Я не могу установить охвативший DIV как .form-control, так как он будет выглядеть как

Я не мог понять, какое событие прослушать при нажатии на поле (фокус/размытие не сработало .. cl ick работает, но тогда мне нужно событие типа click away (есть ли такое событие) прослушивание события изменения будет работать только тогда, когда поле будет изменено, но когда оно будет нажато, но оно не будет изменено, оно будет неверно работать

Это jsfiddle http://jsfiddle.net/E8W4X/5/ для имитации до редактирования (.FORM-контроля с текстом) и режим редактирования (форма автоматически вводятся в div.form-контроль)

скрипка имеет best_in_place Javascript

режим редактирования в скрипке происходит то, что происходит, когда вы нажимаете на Tim

То, что я хотел бы это выглядеть как поле ввода в «желаемом стиле», который в основном нормальное поле ввода

и здесь является HTML из jsfiddle

<div class="row"> 
    <div class="col-lg-2"> 
     <div class="panel"> 
      <fieldset> 
       <div class="form-group"> 
         <label>before edit mode</label> 
        <div class="form-control"> 
         Tim 
        </div> 


        <label>edit mode</label> 
        <div class="form-control"> 
         <form class="form_in_place" action="javascript:void(0);" style="display:inline"> 
          <input type="text" name="first_name"> 
         </form> 
        </div> 
       </div> 
      </fieldset> 
     </div> 
    </div> 
</div> 

Answer 1

Вам не нужно JavaScript или новые классы CSS, чтобы решить эту проблему. Драгоценный камень supports additional attributes to the options hash.Вы хотите добавить :inner_class, чтобы изменить класс поля формы. Bootstrap использует класс CSS .form-control для применения его пользовательского вида.

Мое решение будет в HAML, но вы также можете сделать то же самое в ERB или SLIM.

= best_in_place @user, :name, type: :input, inner_class: 'form-control' 

You can even apply attributes globally to all bip form fields.

Answer 2

Хорошо, так я, наконец, удался его ,

Так посмотрите, что я сделал, это искал, где он создал поле для ввода и добавил класс форм-контроль к нему @ линии № 317

output.parents('div.form-control').removeClass('form-control'); 

и добавить его обратно до размытия @ линии # 336

event.target.closest ('div'). AddClass ('form-control');

jQuery(event.target).closest('div').addClass('form-control'); 

Вот fiddle