Мастер основных шагов jquery

Пытался сделать это некоторое время, но кажется, что все плагины jquery steps/wizard очень ограничены, и надеялся, что вы, ребята, сможете мне немного помочь.

То, что я пытаюсь сделать, это очень простой мастер из трех шагов через jQuery. Итак, сначала он показывает только .step-active и .content-active, а затем 2, а затем 3, где я отправляю форму.

Вот мой HTML:

<div class="steps-wizard">
<div class="step1 step-active">1</div>
<div class="step2">2</div>
<div class="step3">3</div>
</div>

<form id="steps-form">
<div class="steps-content">
<!-- STEP 1 -->
<div class="step1-content content-active">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 2 -->
<div class="step2-content">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 3 -->
<div class="step3-content">
    -- CONTENT --
    <input type="submit">Submit</a>
</div>

Любая помощь в этом будет очень признательна, так как кажется, что я не могу заставить это работать правильно...

Спасибо ребята!


javascript html jquery css jquery-steps
person Jack Johnson    schedule 10.07.2013    source источник
comment
По сути, это просто контент с вкладками, в котором есть множество онлайн-руководств или множество плагинов, доступных из быстрого поиска Google.   -  person seemly    schedule 10.07.2013
comment
Да, но я не нашел ни одной, которая переключала бы вкладки одним нажатием кнопки и могла бы вернуться...   -  person Jack Johnson    schedule 10.07.2013
comment
@Mazzon, сначала вы должны правильно отформатировать свой HTML, чтобы избежать возможных проблем ... вы хотите, чтобы навигация работала на верхних кнопках (1,2,3), а также на «следующих» ссылках? Вы упомянули, что хотите «вернуться назад» — так что, я думаю, вам нужна функциональность «предыдущий/следующий»?   -  person sinisake    schedule 10.07.2013
comment
Мастер простых шагов CSS: github.com/shahzadthathal/css-steps-wizard   -  person Muhammad Shahzad    schedule 10.03.2020

Ответы (4)


arrow_upward
3
arrow_downward

Да, это применимо ко многим подключаемым модулям мастера, но не к шагам jQuery. jQuery Steps — очень мощный и многофункциональный подключаемый модуль мастера. Существует множество классов CSS, которые вы можете использовать для настройки элемента управления по своему усмотрению. Каждый шаг состоит из одной кнопки шага, заголовка шага (который по умолчанию скрыт) и панели шага для содержимого. В вашем случае вам нужно переопределить только два класса CSS (см. следующий фрагмент CSS).

/* First hide all steps from the begining on */
.wizard > .steps li
{
    display: none;
}

/* Then just re-show only the current step */
.wizard > .steps li.current
{
    display: block;
}

Действующую демонстрацию вы найдете здесь.

Для получения дополнительной информации и примеров перейдите здесь.

Для более сложной реализации мастера форм перейдите здесь . Там вы узнаете, как соединить вместе шаги jQuery и проверку jQuery.

person Rafael Staib    schedule 23.09.2013

arrow_upward
1
arrow_downward

Я использовал ваш HTML-код. Я добавил числа к --CONTENT--, чтобы увидеть, что происходит, и добавил 2 строки CSS, чтобы скрыть неактивные <div>, но я не думаю, что вам действительно нужны такие классы, как step3-content.

$(document).ready(function() {
    $('a').click(function(e) {
        // this prevents page reload after clicking <a> 
        e.preventDefault();
        // parent: exact <div> with <a> you just clicked, grandpa: all content <div>s, index: next <div> index
        var parent = $(this).parent('div'), grandpa = $('.steps-content>div'), index = grandpa.index(parent)+1;
        // remove active class from current <div>
        parent.removeClass('content-active');
        // set it to next div
        grandpa.eq(index).addClass('content-active');
        // another way to do the same, but using 1 line and children() instead of '>'
        $('.steps-wizard').children('div').removeClass('step-active').eq(index).addClass('step-active');
    });
    // that's it
});
person vladkras    schedule 10.07.2013

arrow_upward
0
arrow_downward

Я думаю, вы хотите что-то вроде этого:

http://jsbin.com/egidod/1/

Я надеюсь, что это поможет вам.

Я сделал только простой плагин для вкладок. Он использует интерфейс Jquery.

person NETCreator Hosting    schedule 10.07.2013

arrow_upward
0
arrow_downward

Я использую плагин JQuery Smart Wizard, и он отлично работает. Реализация очень проста. Перейдите по ссылке на пример и документацию:

https://github.com/mstratman/jQuery-Smart-Wizard

person Renato Vianna    schedule 24.09.2013