Как оживить мультиформный процесс с помощью ajax jquery и php?

спросил: 14 ноября 2017 в 06:22 в: php

Через PHP шаги подсчитываются и добавляются в сеансе, чтобы избежать возврата к началу в случае обновления или обновления страницы, значение получается с помощью следующей переменной $step

<?php
  session_start();  if ( !empty($_SESSION['datos_form']['__step__'])) {
    $step = $_SESSION['datos_form']['__step__'];
  } else {
    $step = '1';
  }?>

Мы получаем значение переменной в javascript-коде jQuery.

show_step(<?= $step; ?>);

Это будет равно: (для полученного значения по умолчанию)

show_step(1);

Каждый шаг процесса отображается в соответствии со значением, полученным из PHP для кода Javascript, как это уже упоминалось.

Без необходимости добавлять дополнительные элементы управления, такие как:

current = $(this).parent();
next = $(this).parent().next();

У меня есть следующий простой мастер с CSS

https://jsfiddle.net/2LL8x1sm/

Мне нужно иметь возможность адаптировать его к javascript-коду ajax, чтобы он анимировал шаг, на котором он находится.

В текущем коде уже была анимация с использованием метода sprite

function animacion(caso){}

Что я ed должен быть в состоянии адаптировать анимацию процесса и использовать значок (подобный этому), который скользит с полосой прогресса, подобной следующему изображению:

Эта анимация должна быть добавлена ​​в функцию animacion(caso) {}, которая работает вместе с обратными ссылками и продолжается, добавьте пример внутри функции в следующем code:

$( ".test" ).animate({ "left": "-=50px" }, "slow" );

И в действительности это работает, div с тестовым классом изменяет левый стиль, продолжая на каждом шаге.

Как я могу оживить процесс моего HTML-кода CSS?

$(function() {
    show_step(<?= $step; ?>);        
});

function animacion(caso){
  //$( ".test" ).animate({ "left": "-=50px" }, "slow" );
};

// function to save the form data and change the step
function show_step(step){
    var data = $( "#form" ).serialize();
    var url = 'saveTemp.php?step=' + step;

    $.ajax({
      type: "POST",
      url: url,
      data: data
    })
    .done(function( resp ) {
        $('.step').css( "display", "none" );
        $('#step'+step).fadeIn("slow");
        //animation of each step
        animacion(step);
    });
};

.container {
  width: 100%;
  padding-top: 20px;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
}

.progressbar li > * {
  position: relative;
  padding-bottom: 20px;
  display: inline-block;
  font-size: 1.4rem;
  color: #2c3f4c;
  top: -45px;
}

.progressbar li:before {
  content: '';
  width: 12px;
  height: 12px;
  display: block;
  text-align:  center;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #edeff0;
}
  
.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #edeff0;
  top: 4px;
  left: -50%;
  z-index: -1;
}
  
.progressbar li:first-child:after {
  content: none;
}
  
.progressbar li.active {
  color: green;
}
  
.progressbar li.active:before {
  background-color: green;
}
  
.progressbar li.active + li:after {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- <div class="test"></div> -->

<div class="container">
  <ul class="progressbar">
  	<li class="active"><span>Step 1</span></li>
  	<li><span>Step 2</span></li>
  	<li><span>Step 3</span></li>
  </ul>
</div>

<form id="form" action="procesar.php">
  <div id="step1" class="step">
  	<h1>step 1</h1>
  	<a data-ref="#" onclick="show_step(2)">continue</a>
  </div>
  <div id="step2" class="step">
  	<h1>step 2</h1>
  	<a data-ref="#" onclick="show_step(1)">after</a>
    <a data-ref="#" onclick="show_step(3)">continue</a>
  </div>
  <div id="step3" class="step">
  	<h1>step 3</h1>
  	<a data-ref="#" onclick="show_step(2)">after</a>
  	<button>Send</button>
  </div>
</form>

0 ответов