آدرس : تهران ، خیابان آزادی ، خیابان رودکی شمالی ، پلاک ۸۷۰
تلفن ثابت : 02166421387
تلفن همراه : 09198661229
تلفن همراه : 09302974451
ایمیل : info@woham.com
کدنویسی نوار پیشرفت متحرک با استفاده از jQuery و CSS و PHP و HTML ، نوار پیشرفت برای نمایش پیشرفت زمان واقعی یک فرآیند استفاده می شود . در این آموزش به شما نشان خواهیم داد که چگونه با استفاده از jQuery و CSS یک نوار پیشرفت ساده ایجاد کنید. نوار پیشرفت برای نمایش پیشرفت زمان واقعی یک فرآیند استفاده می شود که می توانید از نوار پیشرفت در هر چیزی برای مثال در آپلود فایل، فرآیند ارسال فرم و غیره استفاده کنید.
همچنین ممکن است نوار پیشرفت آپلود فایل را با استفاده از jQuery دوست داشته باشید.
مرحله 1. یک فایل HTML بسازید و نشانه گذاری و اسکریپت را تعریف کنید.
یک فایل HTML می سازیم و با نام progress_bar.html ذخیره می کنیم.
<html>
<head>
<link href="progress_bar_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function animate_progressbar()
{
$total_width=$("#progressbar_wrapper").width();
$width_inc=$total_width/10;
if($("#progressbar").width()<$total_width)
{
$width=$("#progressbar").width()+$width_inc;
$("#progressbar").animate({width:''+$width+''},300);
}
}
function reset_progressbar()
{
$("#progressbar").animate({width:'0px'},300);
}
</script>
</head>
<body>
<div id="wrapper">
<div id="progressbar_div">
<div id="progressbar_wrapper">
<div id="progressbar"></div>
</div>
<p>
<input type="button" value="ANIMATE" onclick="animate_progressbar();">
<input type="button" value="RESET" onclick="reset_progressbar();">
</p>
</div>
</div>
</body>
</html>
در این مرحله ما دو div را برای بسته بندی نوار پیشرفت و دیگری برای نوار پیشرفت ایجاد می کنیم. ما دو دکمه ایجاد می کنیم تا پیشرفت نوار پیشرفت را متحرک کنیم و نوار پیشرفت را تنظیم مجدد کنیم.
همچنین ممکن است فرم چند مرحله ای با نوار پیشرفت را با استفاده از جی کوئری دوست داشته باشید.
برای متحرک کردن نوار پیشرفت، تابع ()animate_progressbar را ایجاد می کنیم، در این حالت عرض نوار پیشرفت را می گیریم و بر 10 تقسیم می کنیم، می توانید از هر عددی استفاده کنید، سپس بررسی می کنیم که عرض نوار پیشرفت کوچکتر باشد سپس پوشش آن اگر بله، عرض نوار پیشرفت را با استفاده از تابع animate افزایش می دهیم. از jQuery().
برای بازنشانی نوار پیشرفت، با فراخوانی تابع ()reset_progressbar، عرض نوار پیشرفت را روی 0 تنظیم می کنیم. همچنین ممکن است هنگام بارگیری صفحه، نوار پیشرفت نمایش داده شود.
مرحله 2. یک فایل CSS بسازید و یک استایل تعریف کنید.
یک فایل CSS می سازیم و با نام progress_bar_style.css ذخیره می کنیم.
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#A9F5A9;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#progressbar_wrapper
{
border:1px solid #088A08;
margin-left:345px;
margin-top:20px;
width:300px;
height:35px;
border-radius:3px;
overflow:hidden;
}
#progressbar
{
width:0px;
height:35px;
border-radius:0px;
background-color:green;
}
#progressbar_div input[type="button"]
{
background-color:#088A08;
border:none;
width:150px;
height:40px;
color:white;
border-radius:3px;
border-bottom:3px solid #0B610B;
}
این همه چیز است، این نحوه ایجاد نوار پیشرفت متحرک با استفاده از jQuery و CSS است. شما می توانید این کد را مطابق با نیاز خود سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.