نمایش افکت fade in با آژاکس (ajax)

10 / 10
از 1 کاربر

در این قسمت از آموزش Ajax می خواهیم در طراحی سایت نحوه ی نمایش افکت fade in با آژاکس را برای شما توضیح دهیم به عبارتی می خواهیم با استفاده از توانایی کدنویسی با تکنیکی دیگر کاملتر کنیم و پس از دریافت اطلاعات درخواست آژاکسی از سرور، آن را با یک افکت fade in یا همان ظاهر شدن محتوا از حالت بی رنگ به صورت واضح، نشان دهیم .

برای اینکه بخواهیم افکت fade in را با ترکیب جاوا اسکریپت و سی اس اس انجام دهیم ابتدا باسد افکت fade in را به بلاک div خود نسبت دهیم و آن را در یک اتابع تعریف کرد برای این کار از خواص opacity در css استفاده می کنیم به دستور زیر توجه نمایید :

<script type="text/javascript">
//<![CDATA[
var element = document.getElementById('code');
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
 element.style.opacity = level;
 element.style.mozopacity = level;
 element.style.khtmlopacity = level;
 element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
 for (i = 0; i <= 1; i += (1 / steps)) {
 setTimeout("setopacity(" + i + ")", i * duration);
 }
}
//]]>
</script>

توجه داشته باشید که که حتما این کد را در بین تگ body و بعد از بلاک div درج نمائید . در دستور بالا در تابع setopacity مقادیر شفافیت را در یک ثانیه (1000 میلی ثانیه) در بیست فِرم به بلاک div نسبت می دهیم همچنین در یک حلقه for در تابع fadeIn، در 20 گام، افکت را تنظیم و در قسمت setTimeout از setopacity برای اعمال افکت استفاده می کنیم ومقادیر متفاوت style.opacity، style.mozopacity و style.khtmlopacity برای سازگاری با مرورگرهای مختلف است . در فایل ajax-loading-fade.php می توانید با تابع rand در php اعداد اتفاقی تولید و آن ها را جایگزین متغیر code می کند . به دستور زیر توجه کنید :

<?php
$code = rand(10000,99999);
echo "کد انتخابی شما عدد ".$code." است!";
?>

دستور بالا را به نام ajax-loading-fade.php در یک دایرکتوری ایجاد کنید . فایل Ajax-loading-fade.html حاوی کد و تنظیمات آژاکسی می باشد و درخواست را به سرور (ajax-loading-fade.php) ارسال و پاسخ را دریافت می کند . به دستور زیر توجه کنید :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش پیام در حال پردازش و نمایش افکت در آژاکس</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 direction:rtl;
 font-size:12px;
}
#code{
 background-color:#666;
 color:#FFF;
 width:190px;
 padding:4px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function Ajaxrequest(){
 var xmlHttp;
 try{
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 return xmlHttp;
 }
 catch (e){
 try{
 // Internet Explorer
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 return xmlHttp;
 }
 catch (e){
 try{
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 return xmlHttp;
 }
 catch (e){
 alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
 return false;
 }
 }
 }
}
var div = 'code';
var message = 'message';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> کمی صبر کنید...';
var url = 'ajax-loading-fade.php';
function changecode(){
 var xmlHttp = Ajaxrequest();
 xmlHttp.onreadystatechange = function(){
 if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
 document.getElementById(message).innerHTML=loadingmessage;
 }
 if (xmlHttp.readyState == 4) {
 document.getElementById(div).innerHTML=xmlHttp.responseText;
 fadeIn()
 document.getElementById(message).innerHTML='';
 }
 }
 xmlHttp.open("POST", url, true);
 xmlHttp.send();
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="changecode();">تعویض کد</a><br /><br />
<div id="message"></div><br />
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById('code');
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
 element.style.opacity = level;
 element.style.mozopacity = level;
 element.style.khtmlopacity = level;
 element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
 for (i = 0; i <= 1; i += (1 / steps)) {
 setTimeout("setopacity(" + i + ")", i * duration);
 }
}
//]]>
</script>
</body>
</html>

در دستور بالا کدجاوا  اسکریپتی برای ایجاد افکت fade in به انتهای صفحه اضافه شده است . برای فراخوانی تابع افکت، پس از true شدن xmlHttp.readyState == 4، با قرار دادن ()fadeIn این کار را انجام داده ایم . برای نمایش پیام در حال پردازش و نتیجه درخواست آژاکسی، از دو بلاک متفاوت (با آی دی message و code) استفاده کرده ایم. عناوین بلاک ها و توابع انتخابی و سلیقه ای است، می توانید آنها را متناسب با سلیقه خود تغییر دهید . برای کسب اطلاعات بیشتر، مقالات طراحی سایت را دنبال کنید.

ارسال نظر و نظرات ثبت شده