Я реализовал дизайн Photoshop в HTML, используя Bootstrap (мой первый раз с бутстрапом). Это веб-сайт с одной страницей и имеет 4 раздела (на самом деле страницы). Каждый раздел имеет несколько страниц, которые я показал в панели вкладок, используя класс tabstable Bootstrap. Он работает отлично, я хочу скользящий эффект для каждой вкладки, чтобы отобразить ее содержимое. Значит, если раздел содержит 3 вкладки, и я нажимаю на вторую вкладку, содержимое следующей вкладки отображается как скользящий эффект. Есть ли только имя класса для добавления? Спасибо.Панель загрузочной вкладки для перемещения влево?
1
A
ответ
1
Я думаю, что это о нем
<div class="container">
<div class="row">
<div id="tab-container" class="span6 offset1">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#options" data-toggle="tab">Options</a></li>
<li class="disabled"><a href="#information" data-toggle="tab">Information</a></li>
<li class="disabled"><a href="#payment" data-toggle="tab">Payment</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="options">
<div class="well">
<form id="frmtype1" action="" name="frmtype1" method="post">
<fieldset>
<legend>Registration Options</legend>
<label for="Reg_type1" class="radio">
<input type="radio" name="Reg_type" id="Reg_type1" value="1"/>
Registering myself with credit card or bank account
</label>
<br>
<label for="Reg_type2" class="radio">
<input type="radio" name="Reg_type" id="Reg_type2" value="2"/>
Registering multiple people using credit card or bank account
</label>
<br>
<label for="Reg_type3" class="radio">
<input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
Registering using a purchase order
</label>
</fieldset>
<button class="btn-demo btn" data-activate="#information">Continue</button>
<span class="help-inline" style="display:none;">Please choose an option</span>
</form>
</div><!--/.well -->
</div>
<div class="tab-pane" id="information">
<div class="well">
<form name="everything" id="frmtype2" action="" method="post"><p>Some content to give this pane a little bit of bulk</p>
<button class="btn-demo btn" data-activate="#payment" type="submit">Continue</button>
</form>
</div><!--/.well -->
</div>
<div class="tab-pane" id="payment">
<div class="well">
<p>Some content for the 3rd pane.</p>
</div><!-- .well -->
</div>
</div>
</div><!-- /.row -->
</div><!-- /#tab-container --> </div><!-- /.container -->
JAVASCRIPT
var selector;
var selectorID;
activateTab('#myTab a:first');
function activateTab(selectorID)
{
$(selectorID).tab('show')
.closest('.disabled').removeClass('disabled');
}
function deactivateTab(selector)
{
$(selector).off('click.twbstab')
.closest('li').addClass('disabled');
}
$('.btn-demo').on('click',function() {
selector = '#myTab a[href="'+$(this).data('activate')+'"]';
selectorID = $(selector).attr('href');
});
var val1 = $('#frmtype1').validate(
{
errorPlacement: function(error, element) {},
// prevent the standard error message from showing, rather you use the inline-text
rules: {
'Reg_type': {
required: true
}
}
});
// validate 1st form
$('#frmtype1').submit(function(e)
{
// validate the first page
if(val1.form()) {
$('.help-inline').hide();
activateTab(selector);
} else {
$('.help-inline').show();
}
return false;
});
// validate 2nd form
$('#frmtype2').submit(function(e)
{
// validate the second page
activateTab(selector);
return false;
});
// if 2nd or 3rd tab is clicked, validate as if the form was submitted
$('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e)
{
selectorID = $(this).attr('href');
// validate the first page
if(val1.form()) {
$('.help-inline').hide();
activateTab(this);
$(selectorID).tab('show');
} else {
$('.help-inline').show();
}
return false;
});
// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect
$(".tab-pane").css("position", "relative");
$(".tab-pane").not(".active").animate({
left: "1000px"
});
// perform slide effect
$('a[data-toggle="tab"]').on('show', function (e) {
lastPane = $(e.relatedTarget).attr('href');
$(lastPane).animate({left: "1000px"}, 300)
currPane = $(e.target).attr('href');
$(currPane).animate({left: "0px"}, 300);
});
+0
Упрощенный - чистый. Единственное редактирование, которое я сделал бы, это CSS, поскольку скрытое переполнение не работает с этим селектором. Использовать '.tab-content { overflow: hidden; } – Illdapt
Смежные вопросы
- 1. Изменить заголовок загрузочной вкладки
- 2. Отправить различные формы загрузочной вкладки
- 3. выпадающее меню перемещения влево
- 4. CSS: кнопка перемещения влево
- 5. Содержимое в пределах Аккордеона для перемещения влево
- 6. jQuery анимация для перемещения влево и назад
- 7. toggle div для перемещения вправо/влево
- 8. Закрыть вкладки влево, исключая закрепленные вкладки
- 9. Отображение загрузочной вкладки 3 при завершении проверки
- 10. select2 не работает внутри загрузочной вкладки
- 11. Ссылка на ID внутри загрузочной вкладки Bootstrap
- 12. Добавить кнопку «закрыть» на вкладке загрузочной вкладки
- 13. поднавигация по сложной загрузочной загрузке 3 вкладки
- 14. Как плавать современные вкладки влево?
- 15. Android TabLayout - вкладки сбрасываются влево
- 16. SmartGWT, TabSet, Переместить вкладки влево
- 17. панель обнуления загрузочной нагрузки с ajax
- 18. Элемент перемещения JQuery из центра влево и влево в центр
- 19. Как создать кнопки перемещения влево/вправо?
- 20. DirectX9 перемещения камеры влево и вправо
- 21. Вкладки вкладки, включенные в панель прокрутки
- 22. JQuery вкладки Панель
- 23. Активная панель вкладки Bootstrap
- 24. jQuery вместо перемещения влево. он исчезает. Slider
- 25. Таблица (название) перемещения влево после выбора ячейки
- 26. ListView перемещения влево и вправо при прокрутке
- 27. Почему я все еще получаю панель перемещения?
- 28. Bootstrap Отзывчивый дизайн - панель перемещения
- 29. Сохранять css float при использовании jQuery для перемещения влево
- 30. Действия Javascript для перемещения слайдера влево или вправо
Не забудьте отметить ответ как правильный, если это то, что вы, что искал. :) – equisde