07.08.2018, 17:10. Показов 2193. Ответов 2
Здравствуйте!
Решил сделать регистрацию в несколько шагов.
Суть какая:"
"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;
} |
|
(
Сообщение от mirotwor777
