چگونه از progressbar استفاده کنم؟

[Wily_Fox]

با سلام خسته نباشید

دوستان اگه امکانش هست روش استفاده از progressbar رو واسم توضیح همراه با مثال بدن.

میخوام کلا تو هرجایی که از ajax استفاده کردم و تابع مربوطه مقداری رو برگردونده این progressbar رو بیارم.

متشکرم

[Wily_Fox]

یعنی هیچ کس استفاده نکرده تاحالا!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!

خواهش می کنم راهنمایی کنید.

منطق کار با progressbar ها رو بگید ممنون میشم!

منظورم از منطق اینکه چه زمانی بایستی progressbar فراخوانی شود؟ و چه زمانی close یا remove شود؟

آیا زمانی که برروی لینکی کلیک شد باید progressbar فراخوانی شود؟


لینک های زیر progressbar های زیبا و جالبی رو آموزش می دهند.
http://todayinwebdesign.com/jquery-loader-progress-bar-and-content-animations/

http://www.aplusdesign.com.au/blog/jquery-ajax-loader-spinner/

http://fgnass.github.io/spin.js/

[Javidhb]

منطق کار اینه که شما باید محاسبه کنید چند درصد از حجم آپلود یا دانلود انجام شده و همون مقدار رو توی progressBar (مثلا ماله jQueryUI ) نشون بدید.

برای قسمت اول (بدست آوردن درصد آپلود یا دانلود):
1. استفاده از XMLHttpRequest (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) هست که:
اینجا مثالش با ()ajax. هست. (http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/) (کد دوم)

2. برای تمییزتر شدن کدتون میتونید از این پلاگین (https://github.com/englercj/jquery-ajax-progress) استفاده کنید: طرز استفاده اش هم مثل success یا ... هست.



برای قسمت دوم (نمایش توی progressBar):
http://jqueryui.com/progressbar/ (یا هر پلاگین دیگه ای)
روی view source کلیک کنید تا طرز استفاده اش رو ببینید.


=> اگه به مشکل خوردید، کدتون رو بزارید تا راهنمایی کنیم...

[Wily_Fox]

خیلی متشکرم که پاسخ دادید.

من واسه آپلود یا دانلود در حال حاضر نمی خوام استفاده کنم.
وب سایتی که در حال حاضر دارم روش کار می کنم لحظه به لحظه با سرور در ارتباط هست و کاربران اطلاعاتی رو رد و بدل می کنند. این پروسه ها به لحاظ تعدد کاربران گاهی زمان بر هست. می خوام تا زمانی که از سمت سرور پاسخی دریافت نشده progressbar نشون داده بشه.

ممنون میشم در این باره هم لینکی یا توضیحاتی ارائه بدید.

[Javidhb]

پس اونی که دنبالشی progressBar نیست همون spinner هست که خودتون لینکاشون رو گذاشتید.
اینکار راحتتره!

یه راهش اینه که:
اول یه عکس|نوشته ('spinner') رو بصورت hide (در حالت بدون درخواست ajax) به صفحه اضافه میکنید و وقتی که منتظر دریافت جواب از سرور هستید موقتا اون رو ()show میکنید و بعد از گرفتن جواب دوباره مخفیش میکنید.


$('spinner')
.hide() // مخفیش میکنید
.ajaxStart(function() {
$(this).show(); // وقتی که منتظر جواب از سروره موقتا نمایشش میدید
})
.ajaxStop(function() {
$(this).hide(); // دوباره مخفیش میکنید
})
;

ajaxStart (http://api.jquery.com/ajaxStart/)| ajaxStop (http://api.jquery.com/ajaxStop/)



یه راه دیگه:


$.ajax({
...
beforeSend: function(){
$("spinner").show(); //قبل از فرستادن درخواست به سرور اون رو نمایش میدید
},
success: function(data)
{
$("spinner").hide(); // بعد از تموم شدن درخواست دوباره مخفیش میکنی
}
});