पीएचपी के माध्यम से चरणों गिना जाता है और एक सत्र को अद्यतन करने या पृष्ठ को ताज़ा करने के मामले में शुरुआत की ओर लौटने से बचने के लिए जोड़ रहे हैं, मूल्य निम्न चर मूल्य $stepAJAX jquery और php के साथ बहु फ़ॉर्म प्रक्रिया को एनिमेट कैसे करें?
<?php
session_start();
if (!empty($_SESSION['datos_form']['__step__'])) {
$step = $_SESSION['datos_form']['__step__'];
} else {
$step = '1';
}
?>
हम प्राप्त के माध्यम से प्राप्त किया जाता है jQuery जावास्क्रिप्ट कोड में चर के।
show_step(<?= $step; ?>);
कि के बराबर होगा: (के लिए डिफ़ॉल्ट मान प्राप्त)
show_step(1);
के रूप में यह पहले से ही उल्लेख किया गया था प्रक्रिया के प्रत्येक चरण जावास्क्रिप्ट कोड को पीएचपी से प्राप्त मूल्य के अनुसार दिखाया गया है ।
की तरह अतिरिक्त नियंत्रण जोड़ने के लिए जरूरत के बिनानिम्नलिखित:
current = $(this).parent();
next = $(this).parent().next();
मैं सीएसएस के साथ निम्नलिखित सरल विज़ार्ड
https://jsfiddle.net/2LL8x1sm/
मैं ajax करने के लिए इसे अनुकूलित करने के लिए सक्षम होना चाहिए जावास्क्रिप्ट कोड ताकि वह उस चरण को एनिमेट कर सके जिसमें यह है।
वर्तमान कोड पहले से ही एक एनीमेशन एक तकनीक स्प्राइट कहा जाता है का उपयोग कर किया था
function animacion(caso){}
क्या मैं जरूरत है एक आइकन (like this one) कि चला जाता है का उपयोग कर प्रक्रिया का एनीमेशन अनुकूल करने के लिए सक्षम होने के लिए, और है
इस एनिमेशन समारोह animacion(caso) {} कि वापस लिंक के साथ मिलकर काम करता है और जारी रखने के लिए निम्न कोड में fuction के भीतर एक उदाहरण जोड़ने के अंदर जोड़ा जाना चाहिए:
$(".test").animate({ "left": "-=50px" }, "slow");
और प्रभाव में यह परीक्षण के साथ काम करता है, div कक्षा प्रत्येक चरण में जारी रखकर बाएं शैली को संशोधित कर रही थी।
मैं अपने एचटीएमएल कोड सीएसएस की प्रक्रिया को कैसे एनिमेट कर सकता हूं?
$(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">
\t <li class="active"><span>Step 1</span></li>
\t <li><span>Step 2</span></li>
\t <li><span>Step 3</span></li>
</ul>
</div>
<form id="form" action="procesar.php">
<div id="step1" class="step">
\t <h1>step 1</h1>
\t <a data-ref="#" onclick="show_step(2)">continue</a>
</div>
<div id="step2" class="step">
\t <h1>step 2</h1>
\t <a data-ref="#" onclick="show_step(1)">after</a>
<a data-ref="#" onclick="show_step(3)">continue</a>
</div>
<div id="step3" class="step">
\t <h1>step 3</h1>
\t <a data-ref="#" onclick="show_step(2)">after</a>
\t <button>Send</button>
</div>
</form>
आप सिर्फ एनिमेट करने के लिए नीफ? –
@BASEERHAIDERJAFRI हां दोस्त, और यदि संभव हो तो अगले चरण का पालन करने से बचने के लिए संभावित रूपों को सत्यापित करने का एक उदाहरण। – gPH
फॉर्म सत्यापन के उपयोग के लिए Jquery Validator (https://jqueryvalidation.org/documentation/) –