Nenhuma descrição
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

form-wizard-numbered.js 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. /**
  2. * Form Wizard
  3. */
  4. 'use strict';
  5. $(function () {
  6. const select2 = $('.select2'),
  7. selectPicker = $('.selectpicker');
  8. // Bootstrap select
  9. if (selectPicker.length) {
  10. selectPicker.selectpicker();
  11. }
  12. // select2
  13. if (select2.length) {
  14. select2.each(function () {
  15. var $this = $(this);
  16. $this.wrap('<div class="position-relative"></div>');
  17. $this.select2({
  18. placeholder: 'Select value',
  19. dropdownParent: $this.parent()
  20. });
  21. });
  22. }
  23. });
  24. (function () {
  25. // Numbered Wizard
  26. // --------------------------------------------------------------------
  27. const wizardNumbered = document.querySelector('.wizard-numbered'),
  28. wizardNumberedBtnNextList = [].slice.call(wizardNumbered.querySelectorAll('.btn-next')),
  29. wizardNumberedBtnPrevList = [].slice.call(wizardNumbered.querySelectorAll('.btn-prev')),
  30. wizardNumberedBtnSubmit = wizardNumbered.querySelector('.btn-submit');
  31. if (typeof wizardNumbered !== undefined && wizardNumbered !== null) {
  32. const numberedStepper = new Stepper(wizardNumbered, {
  33. linear: false
  34. });
  35. if (wizardNumberedBtnNextList) {
  36. wizardNumberedBtnNextList.forEach(wizardNumberedBtnNext => {
  37. wizardNumberedBtnNext.addEventListener('click', event => {
  38. numberedStepper.next();
  39. });
  40. });
  41. }
  42. if (wizardNumberedBtnPrevList) {
  43. wizardNumberedBtnPrevList.forEach(wizardNumberedBtnPrev => {
  44. wizardNumberedBtnPrev.addEventListener('click', event => {
  45. numberedStepper.previous();
  46. });
  47. });
  48. }
  49. if (wizardNumberedBtnSubmit) {
  50. wizardNumberedBtnSubmit.addEventListener('click', event => {
  51. alert('Submitted..!!');
  52. });
  53. }
  54. }
  55. // Vertical Wizard
  56. // --------------------------------------------------------------------
  57. const wizardVertical = document.querySelector('.wizard-vertical'),
  58. wizardVerticalBtnNextList = [].slice.call(wizardVertical.querySelectorAll('.btn-next')),
  59. wizardVerticalBtnPrevList = [].slice.call(wizardVertical.querySelectorAll('.btn-prev')),
  60. wizardVerticalBtnSubmit = wizardVertical.querySelector('.btn-submit');
  61. if (typeof wizardVertical !== undefined && wizardVertical !== null) {
  62. const verticalStepper = new Stepper(wizardVertical, {
  63. linear: false
  64. });
  65. if (wizardVerticalBtnNextList) {
  66. wizardVerticalBtnNextList.forEach(wizardVerticalBtnNext => {
  67. wizardVerticalBtnNext.addEventListener('click', event => {
  68. verticalStepper.next();
  69. });
  70. });
  71. }
  72. if (wizardVerticalBtnPrevList) {
  73. wizardVerticalBtnPrevList.forEach(wizardVerticalBtnPrev => {
  74. wizardVerticalBtnPrev.addEventListener('click', event => {
  75. verticalStepper.previous();
  76. });
  77. });
  78. }
  79. if (wizardVerticalBtnSubmit) {
  80. wizardVerticalBtnSubmit.addEventListener('click', event => {
  81. alert('Submitted..!!');
  82. });
  83. }
  84. }
  85. // Modern Wizard
  86. // --------------------------------------------------------------------
  87. const wizardModern = document.querySelector('.wizard-modern-example'),
  88. wizardModernBtnNextList = [].slice.call(wizardModern.querySelectorAll('.btn-next')),
  89. wizardModernBtnPrevList = [].slice.call(wizardModern.querySelectorAll('.btn-prev')),
  90. wizardModernBtnSubmit = wizardModern.querySelector('.btn-submit');
  91. if (typeof wizardModern !== undefined && wizardModern !== null) {
  92. const modernStepper = new Stepper(wizardModern, {
  93. linear: false
  94. });
  95. if (wizardModernBtnNextList) {
  96. wizardModernBtnNextList.forEach(wizardModernBtnNext => {
  97. wizardModernBtnNext.addEventListener('click', event => {
  98. modernStepper.next();
  99. });
  100. });
  101. }
  102. if (wizardModernBtnPrevList) {
  103. wizardModernBtnPrevList.forEach(wizardModernBtnPrev => {
  104. wizardModernBtnPrev.addEventListener('click', event => {
  105. modernStepper.previous();
  106. });
  107. });
  108. }
  109. if (wizardModernBtnSubmit) {
  110. wizardModernBtnSubmit.addEventListener('click', event => {
  111. alert('Submitted..!!');
  112. });
  113. }
  114. }
  115. // Modern Vertical Wizard
  116. // --------------------------------------------------------------------
  117. const wizardModernVertical = document.querySelector('.wizard-modern-vertical'),
  118. wizardModernVerticalBtnNextList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-next')),
  119. wizardModernVerticalBtnPrevList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-prev')),
  120. wizardModernVerticalBtnSubmit = wizardModernVertical.querySelector('.btn-submit');
  121. if (typeof wizardModernVertical !== undefined && wizardModernVertical !== null) {
  122. const modernVerticalStepper = new Stepper(wizardModernVertical, {
  123. linear: false
  124. });
  125. if (wizardModernVerticalBtnNextList) {
  126. wizardModernVerticalBtnNextList.forEach(wizardModernVerticalBtnNext => {
  127. wizardModernVerticalBtnNext.addEventListener('click', event => {
  128. modernVerticalStepper.next();
  129. });
  130. });
  131. }
  132. if (wizardModernVerticalBtnPrevList) {
  133. wizardModernVerticalBtnPrevList.forEach(wizardModernVerticalBtnPrev => {
  134. wizardModernVerticalBtnPrev.addEventListener('click', event => {
  135. modernVerticalStepper.previous();
  136. });
  137. });
  138. }
  139. if (wizardModernVerticalBtnSubmit) {
  140. wizardModernVerticalBtnSubmit.addEventListener('click', event => {
  141. alert('Submitted..!!');
  142. });
  143. }
  144. }
  145. })();