2016-01-21 2 views
1

Я пытаюсь сделать пользовательские оболочки для гибридной формы, как это:simple_form пользовательской обертки с помощью кнопки обычного радио

enter image description here

Идея заключается в том, что есть радио-кнопка, которые позволяют либо выбору даты , события или неопределенные. В настоящее время я создал эти вручную, и я пытаюсь создать обычную обертку Simple Form, чтобы избежать всех проблем с добавлением тонны кода в простой ввод. Второй вход ввода - тот, который я не могу получить совершенно правильно. Вот HTML для показанной формы:

<div class="form-group radio_buttons required work_order_end_task"> 
    <label class="radio_buttons required col-sm-2 control-label"><i class="fa fa-check-circle text-danger"></i> End Date</label> 
    <div class="col-sm-2"> 
    <div class="input-group"> 
     <span class="input-group-addon border-none"> 
     <input class="radio_buttons required" type="radio" value="date" name="work_order[end_task]" id="work_order_end_task_date"> 
     </span> 
     <input disabled="" type="text" value="" name="work_order[end_date]" id="work_order_end_date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true" data-date-today-btn="linked" data-date-orientation="auto right" data-date-today-highlight="true" class="date required form-control left-border-rounded"> 
     <span class="input-group-addon"> 
     <i class="fa fa-calendar"></i> 
     </span> 
    </div> 
    <br> 
    <div class="input-group"> 
     <span class="input-group-addon border-none"> 
     <input class="radio_buttons required" type="radio" value="number" name="work_order[end_task]" id="work_order_end_task_number"> 
     </span> 
     <input class="numeric integer form-control" type="string" value="" name="work_order[count]" id="work_order_count"> 
     <span class="input-group-addon"> 
     Occurrence(s) 
     </span> 
    </div> 
    <br> 
    <div class="input-group integer optional work_order_count"> 
     <span class="input-group-addon border-none radio_buttons optional work_order_end_task"> 
     <span class="radio"> 
      <label for="work_order_end_task_none"> 
      <input class="radio_buttons optional radio_buttons" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none"> 
      </label> 
     </span> 
     </span> 
     <input class="string optional form-control" type="text" value="" name="work_order[count]" id="work_order_count"> 
     <span class="input-group-addon">Occurrence(s)</span> 
    </div>   
    <br> 
    <div class="form-group radio_buttons optional work_order_end_task"><div class="col-sm-10"><span class="radio"><label class="static-radio" for="work_order_end_task_none"><input class="radio_buttons optional" type="radio" value="none" checked="checked" name="work_order[end_task]" id="work_order_end_task_none">Indefinite</label></span></div></div> 
    </div> 
</div> 

Проблема заключается в добавлении дополнительных элементов и ярлыков. Вот мой код:

<%= f.input :count, wrapper: :input_group do %> 
    <%= f.input :end_task, as: :radio_buttons, wrapper: :radio_addon, collection: [['','none']], label: false %> 
    <%= f.input_field :count, as: :string, class: "form-control" %> 
    <span class="input-group-addon">Occurrence(s)</span> 
<% end %> 

и обертки:

config.wrappers :input_group, tag: 'div', class: 'input-group', error_class: 'has-error' do |b| 
    b.use :html5 
    b.use :input, class: 'form-control' 
    end 

    config.wrappers :radio_addon, tag: 'span', class: 'input-group-addon border-none' do |b| 
    b.use :html5 
    b.optional :readonly 
    b.use :input, class: 'radio_buttons' 
    end 

Так как же я могу избавиться от <span class="radio"> и <label for="work_order_end_task_none"> на радио-кнопке, а затем все дополнительные классы (integer optional work_order_count, например) является вставлены в обертки и входы?

ответ

1

Я думаю, что я понял это (вроде):

<span class="input-group-addon border-none"> 
    <%= f.radio_button :end_task, 'number', label: false %> 
    </span> 

работает как шарм. Я бы по-прежнему хотел добавить к этому пользовательскую оболочку, чтобы избежать необходимости вручную добавлять оболочку, но это, похоже, не работает.

 Смежные вопросы

  • Нет связанных вопросов^_^