Пошаговая регистрация с прогрессбаром

@mirotwor777 · Регистрация: 30.10.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Решил сделать регистрацию в несколько шагов.
Суть какая:"
"1 Окно" = Три кнопки: "Кнопка 1", "Кнопка 2", "кнопка 3",, при нажатии на "Кнопку Х, открывается "окно 2.Х", те
Нажал на "Кнопка 1" вышло "Окно 2.1" (id="cnt_1"), на нем нажал кнопку "Далее" Вышло "окно 3.1 (id="cnt_4")",
аналогично с другими кнопками:
Нажал на "Кнопка 2" вышло "Окно 2.2" (id="cnt_2"), на нем нажал кнопку "Далее" Вышло "окно 3.2" (id="cnt_5"),
Нажал на "Кнопка 3" вышло "Окно 2.3" (id="cnt_3"), на нем нажал кнопку "Далее" Вышло "окно 3.3" (id="cnt_6"),
НА данный момент сделал, обычный переход, как сделать разветления на другие окна?
Кратко: https://codepen.io/anon/pen/VBGgKZ

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Пошаговая форма регистрации jQuery и CSS3</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
 
  <body> 
    <!-- multistep form -->
<form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Выбор билета</li>
        <li>Контактные данные</li>
        <li>Оплата билета</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">Выбор билета</h2>
        <h3 class="fs-subtitle">На сколько человек хотите оформить билет?</h3> 
    <p align="left">В зависимости от выбранного количества участников, программа Вам предложит все актуальные акции.<br /><br />Чем больше друзей пригласишь - тем больше скидку получишь!</p>
    <input type="button" name="next_11" class="next action-button" value="1 участник" /><br />
    <input type="button" name="next_12" class="next action-button" value="2 участника" /><br />
    <input type="button" name="next_13" class="next action-button" value="3 участника" /><br /> 
        <!---<input type="button" name="next" class="next action-button" value="Далее" /> --->
    </fieldset>
    <fieldset id="cnt_1">
        <h2 class="fs-title">Контактные данные. Окно 2.1</h2>
        <h3 class="fs-subtitle">Нам нужно Вас индифицировать</h3>
        <input type="text" name="myname" placeholder="Ваше ФИО" /> 
        <input type="button" name="previous" class="previous action-button" value="Назад" />
        <input type="button" name="next" class="next action-button" value="Далее" />
    </fieldset>
  <fieldset id="cnt_2">
        <h2 class="fs-title">Контактные данные. Окно 2.2</h2>
        <h3 class="fs-subtitle">Нам нужно индефицировать Вас  и вашего друга </h3>
        <input type="text" name="myname" placeholder="Ваше ФИО" /><input type="text" name="myname" placeholder="Ваше Имя Фамилия" /> 
 
        <input type="button" name="previous" class="previous action-button" value="Назад" />
        <input type="button" name="next" class="next action-button" value="Далее" />
    </fieldset>
  <fieldset id="cnt_3">
        <h2 class="fs-title">Контактные данные. Окно 3.1</h2>
        <h3 class="fs-subtitle">Нам нужно индифицировать Вас  и вашего друга </h3>
        <input type="text" name="myname" placeholder="Ваше Имя Фамилия" /><input type="text" name="myname" placeholder="Ваше Имя Фамилия" /> 
 
        <input type="button" name="previous" class="previous action-button" value="Назад" />
        <input type="button" name="next" class="next action-button" value="Далее" />
    </fieldset>
    <fieldset  id="cnt_4">
        <h2 class="fs-title">Оплата билета</h2>
        <h3 class="fs-subtitle">После оплаты ждите звонка координатора</h3> 
    <p align="left">
     1/ В назначении перевода укажите номер Вашего телефона, имя и желаемую дату участия<br /><br />
     2/ В поле «Сумма» напишите стоимость билета (стоимость может варьироваться в зависимости от возрастной группы, дня недели, а также различных акций). Подробности у наших операторов по телефону.<br /><br />
       3/ Выберите удобный способ: банковская карта или Яндекс деньги<br /><br />
       4/ Нажмите кнопку «Оплатить» 
      <br /><br />
    </p>
                                            
        <input type="button" name="previous" class="previous action-button" value="Назад" /> 
    </fieldset>
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
 
$(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});
 
$(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});
 
$(".submit").click(function(){
    return false;
})

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
 
/*basic reset*/
* {margin: 0; padding: 0;}
 
html {
    height: 880px;
    /*Image only BG fallback*/
    
    /*background = gradient + image pattern combo*/
    background: 
        linear-gradient(rgba(235, 235, 235, 0.6), rgba(125, 89, 182, 0.6));
}
 
body {
    font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
    width: 460px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 460px;
    
    /*stacking fieldsets above each other*/
    position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#msform .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #27AE60;
    color: white;
}

@Mr_Sergo · 08.08.2018, 09:39

Сообщение от mirotwor777

как сделать разветления на другие окна?

Что за "разветления" имеете ввиду?

@mirotwor777 · 08.08.2018, 10:06 **[ТС]**

Чтоб не линейно открывались окна, а паралельно
Пример:
Линейное открытие (см пример)
1.1 окно (кнопка) -> 2.1окно -> 3.1 окно
Параллельное открытие (на 1 окне 3 кнопки и взависимости от нажатии выплывает соответствующее окно)
1.1 окно ( три кнопки)
Нажал на кнопку 1-> вышло окно 2.1
Нажал на кнопку 2 -> вышло окно 2.2
И так далее

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@mirotwor777 0 / 0 / 0 Регистрация: 30.10.2016 Сообщений: 56
	08.08.2018, 10:06 [ТС]
	Чтоб не линейно открывались окна, а паралельно Пример: Линейное открытие (см пример) 1.1 окно (кнопка) -> 2.1окно -> 3.1 окно Параллельное открытие (на 1 окне 3 кнопки и взависимости от нажатии выплывает соответствующее окно) 1.1 окно ( три кнопки) Нажал на кнопку 1-> вышло окно 2.1 Нажал на кнопку 2 -> вышло окно 2.2 И так далее 0