• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت نوار پیشرفت Progress Bar با جاوا اسکریپت
#1
بسم الله الرحمن الرحیم
آموزش ساخت نوار پیشرفت Progress Bar با جاوا اسکریپت

در این آموزش قصد داریم چگونگی ساخت نوار پیشرفت(Progress Bar) مبنتی بر جاوا اسکریپت را که توانایی کتنرل چند فاکتور را داشته باشد را بیان کنیم.
شما با این کار می تونید چندین مقوله را که از دیتابیس واکشی میشوند و یا همچنین می توانید طول یه TextBox (پسورد) و یا حتی می تونید تعداد چک باکسهایی را که تیک خورده اند رو کنترل کنید. در این آموزش ما قصد داریم که تعداد و درصد چک باکسهایی را که تیک خورده اند رو کنترل کنیم.

قبل از هر چیز شما باید آخرین ورژن اسکریپت مربوطه رو از وبسایت bram.us website دانلود کنید.بر روی لینک دانلود کلیک کرده و اون رو در سیستمون ذخیره کنید. سپس فایل فشرده رو از حالت زیپ خارج کنید.
مانند شکل زیر:
[عکس: javascript_progress_bar_02.jpg]

بعد از اکسترکت فایل زیپ شده شما باید فایلها و پوشه هایی مثل شکل بالا داشته باشید.
فایل ایندکس یه پیشنمایشی از این اسکریپت هست که میتونید اونو پاک کنید یا نگه دارید،به هر حال میریم سر اصل مطلب:
ابتدا یه فایل اچ تی ام ال به نام progress.html میسازیم بعد کدهای زیر رو توش قرار میدیم:
کد پی‌اچ‌پی:
1.    <html>
2.    <head>
3.    <title>My Percent Bar Tutorial</title>
4.    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
5.    <script type="text/javascript" src="js/prototype/prototype.js"></script>
6.    <script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>
7.    </head

در این مرحله هنوز کدهای ساده ی HTML استفاده میشن و چیز خاصی نداره، شما باید با توجه به مسیری که فایلها در آن دایرکتوری قرار دارند آدرس دهی کنید.
حالا ما باید برای نوار پیشرفتمون عنوان و مقدار تعیین کنیم.من صفر درصد رو در نظر میگیرم.این مقدار اولیه و شروع ما خواهد بود.شما می تونید اونو از 0 تا 100 هر مقداری که دلتون میخواد تغییر بدید.این زمانی که صفحه باز یا رفرش میشه مقدار اولبه ما خواهد بود.
کدهای زیر رو ملاحظه کنید:
کد پی‌اچ‌پی:
1.    <body>
2.    <span style="color:#006600;font-weight:bold;">Percent Completed</span>  
3.     <br/>
4.    <span class="progressBar" id="element1">0%</span>
5.    <form name="progress"

می رسیم به مرحله بعد:
اینهایی که در کد پایینی میبینید همشون چک باکسهای مورد استفاده ی ما هستند.یه نکته ی قابل توجه این هست که همه ی چک باکسها تابع onclick رو فراخونی میکنند.این تابع به در مورد تصمیم گیری عمل انجام شده بر روی چک باکس ما را یاری میکند(کلیک کردن).
اگه چک باکس تیک خورده باشد مقداری مثبت به نوار پیشرفت افزوده میشه و همینطور اگه تیک نخورده باشه مقداری از آن حذف میشود.
شما میتونید به هر تعداد که میخواهید چک باکس به فرمتون اضافه کنید ولی باید در نظر داشته باشید که مقدارها طوری در نظر گرفته شوند که اگر تمامیشان تیک خوردند مقدار به 100% برسد.
کد پی‌اچ‌پی:
1.    <input type="checkbox" name="box1" onclick="CheckValues('progress', 'box1', '7');">
2.    Task 1 7%<br />
3.    <input type="checkbox" name="box2" onclick="CheckValues('progress', 'box2', '8');">
4.    Task 2 8%<br />
5.    <input type="checkbox" name="box3" onclick="CheckValues('progress', 'box3', '4');">
6.    Task 3 4%<br />
7.    <input type="checkbox" name="box4" onclick="CheckValues('progress', 'box4', '18');">
8.    Task 4 18%<br />
9.    <input type="checkbox" name="box5" onclick="CheckValues('progress', 'box5', '9');">
10.    Task 5 9%<br />
11.    <input type="checkbox" name="box6" onclick="CheckValues('progress', 'box6', '6');">
12.    Task 6 6%<br />
13.    <input type="checkbox" name="box7" onclick="CheckValues('progress', 'box7', '8');">
14.    Task 7 8%<br />
15.    <input type="checkbox" name="box8" onclick="CheckValues('progress', 'box8', '11');">
16.    Task 8 11%<br />
17.    <input type="checkbox" name="box9" onclick="CheckValues('progress', 'box9', '16');">
18.    Task 9 16%<br />
19.    <input type="checkbox" name="box10" onclick="CheckValues('progress', 'box10', '13');">
20.    Task 10 13%<br />
21.    </form

در این مرحله باید مونیتورینگ این اسکریپت رو انجام بدیم و کد زیر رو به سندمون اضافه کنیم و سپس تگ body و html رو ببنیدیم.
کد پی‌اچ‌پی:
1.    <SCRIPT LANGUAGE="JavaScript">
2.    function CheckValues(FormCheckBoxValue)
3.    {
4.    var objCheckBox document.forms[Form].elements[CheckBox];
5.    if (objCheckBox.checked == true){
a.    myJsProgressBarHandler.setPercentage('element1','+'+Value);return true;
6.    }else{
a.    myJsProgressBarHandler.setPercentage('element1','-'+Value);return true;
7.    }
8.    }
9.    </script

حالا کارمون بعد از اجرا مثل شکل زیر خواهد :

[عکس: javascript_progress_bar_04.jpg]

اگه تمامی چک باکسها تیک بخورند شکلی مانند زیر خواهیم داشت:
[عکس: javascript_progress_bar_05.jpg]

امیدوارم این آموزش براتون مفید واقع بشه...
Learning By Morteza Fathi
حق تالیف و تصنیف این آموزش با سازمان مدیریت برنامه نویسان ایران پی اچ پی میباشد.
در بين تمامي مردم تنها عقل است كه به عدالت تقسيم شده زيرا همه فكر مي‌كنند به اندازه كافي عاقلند!!!
  پاسخ
#2
سلام ...
من مبتدی هستم ... یعنی در حدِ صفر Big Grin

سوال :
چور میشه بجایِ چک باکسها یه باکسِ ورودِ عدد گذاشت که کاربر بتونه عدد دلخواهش رو وارد کنه و با ذخیره کردن به میزانِ Progress-Bar اضافه بشه؟ Huh

شرایط:
کاربر فقط بتونه دو بار عدد وارد کنه ! (از هر IP )
کاربر نتونه بیش از عددِ کل عددی وارد کنه!

ممنون از لطفتون.Heart


فایل‌های پیوست تصاویر بندانگشتی
   
  پاسخ
تشکر شده توسط :
#3
نقل قول:چور میشه بجایِ چک باکسها یه باکسِ ورودِ عدد گذاشت که کاربر بتونه عدد دلخواهش رو وارد کنه و با ذخیره کردن به میزانِ Progress-Bar اضافه بشه؟
اینپوت عدد ایجاد کن و از کاربر بخواه توش عددی وارد کنه. همزمان با وارد شدن عدد، مقداری که وارد میشه در اینپوت رو با جاوا اسکریپت دریافت میکنی و مقدارشو در برچسب تغییر میدی. البته اون موقع HTML5 نبود ولی حالا هست. یه نگاهی به این بنداز http://www.w3schools.com/html5/tag_progress.asp
غایب
  پاسخ
تشکر شده توسط : zoghal padeshah_2009
#4
(۱۳۹۱ تير ۲۲, ۰۸:۰۵ ب.ظ)cyletech نوشته:
نقل قول:چور میشه بجایِ چک باکسها یه باکسِ ورودِ عدد گذاشت که کاربر بتونه عدد دلخواهش رو وارد کنه و با ذخیره کردن به میزانِ Progress-Bar اضافه بشه؟
اینپوت عدد ایجاد کن و از کاربر بخواه توش عددی وارد کنه. همزمان با وارد شدن عدد، مقداری که وارد میشه در اینپوت رو با جاوا اسکریپت دریافت میکنی و مقدارشو در برچسب تغییر میدی. البته اون موقع HTML5 نبود ولی حالا هست. یه نگاهی به این بنداز http://www.w3schools.com/html5/tag_progress.asp

می دونم که خیلی خیلی برای شما ساختنش آسونه اما واقعا هیچی از کد نویسی بلد نیستم ... اگه ممکنه برادری کنید و مثلِ جنابِ Maya توضیح بدید که چجوری اینو بسازم ...

Heart
  پاسخ
تشکر شده توسط :
#5
سلام دوستان من یک کد با آجاکس نوشتم که درصد یک عملیان رو واسه صفحه من میفرسته حالا از نوار پیشرفتی که اینجا معرفی کردید استفاده کردم.میخواستم ببینم این کد رو باید چطور تغییر بدم که اون نوار پر بشه خودم دستکاری کردمش ولی کار نمیکنه میخواستم بگید مشکلش کجاست.ممنون
کد پی‌اچ‌پی:
function check()
{
    var 
url;
    
url document.getElementById('url').value;
    if (
xmlHttp==null)
    {
        
alert ("مرورگر شما از آجاکس پشتیبانی نمی کند");
        return;
    }
    
Address='act.php?address='+url+'&check=ok';
    
xmlHttp2.onreadystatechange=stateChangeS;
    
xmlHttp2.open("get",Address,true);
    
xmlHttp2.send(null);
}
function 
stateChangeS()
{
     if ( (
xmlHttp2.readyState == 4) && (xmlHttp2.status == 200) )
     {
          
myJsProgressBarHandler.setPercentage('element1',xmlHttp2.responseText);return true;
     }

  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان