Отделение переключателя/переключателя (jQuery)
Вам нужно определить свою собственную оболочку или изменить стандартные.
Во-первых, убедитесь, что в вашем репозитории есть упаковщики по умолчанию.
Запустите rails g simple_form:install --bootstrap, если не можете найти app/initializers/simple_form_bootstrap.rb.
Во-вторых, найдите классы сетки Bootstrap в этом инициализаторе. Для горизонтальной формы они находятся в блоке, который выглядит следующим образом:
config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :minlength
b.optional :pattern
b.optional :min_max
b.optional :readonly
b.use :label, class: 'col-sm-3 control-label'
b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
ba.use :input, class: 'form-control'
ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
end
В-третьих, измените упаковщик!
В этом фрагменте измените col-sm-9 на col-sm-8. Также измените col-sm-3 на col-sm-4.
Завершение
Сохранить. Перезагрузите сервер Rails. Теперь все формы будут иметь метки шириной 33% и 66% ширины.
Если вы не хотите применять это глобально, передайте опцию wrapper: :my_wrapper любому input и создайте новую пользовательскую оболочку, которая делает то, что вы хотели бы.
Должен любить SimpleForm!
4 ответа
Поскольку один div изначально скрыт, вы можете просто вызвать toggle для обоих div:
<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>
<div id="recover-password" style="display:none;">recover password</div>
<script type="text/javascript">
$(function(){
$('#forgot-password').click(function(){
$('#login-form').toggle();
$('#recover-password').toggle();
});
});
</script>
Я думаю, вы хотите это:
$('#recover-password').show();
или
$('#recover-password').toggle();
Это стало возможным благодаря jQuery.
Используйте это:
<script type="text/javascript" language="javascript">
$("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>
Ваш HTML должен выглядеть так:
<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
Эй, все в порядке! Одна линия! Я <3 JQuery.
Вы можете написать простой плагин jQuery для этого. Плагин будет выглядеть следующим образом:
(function($) {
$.fn.expandcollapse = function() {
return this.each(function() {
obj = $(this);
switch (obj.css("display")) {
case "block":
displayValue = "none";
break;
case "none":
default:
displayValue = "block";
}
obj.css("display", displayValue);
});
};
} (jQuery));
Затем подключите плагин к событию click для тега привязки:
$(document).ready(function() {
$("#mylink").click(function() {
$("div").expandcollapse();
});
});
При условии, что вы установили начальные атрибуты «display» для каждого div как «block» и «none» соответственно, они должны переключаться на отображение / скрытие при нажатии на ссылку.