با سلام خدمت شما دوستان در این پست شما میتونید کد نوار پیشرفت (progress bar ) رو دریافت کنید سعی کردیم برای شما توضیحات تکمیلی درباره این ابزار رو بیان کنیم تا بتونید تا حدودی این ابزار رو ویرایش کنید پس در ادامه مطلب همراه ما باشید …
پیش نمایش
شما با دیدن فایل های کمکی زیر می توانید آموزشتان را تکمیل کنید:
برای اینکه این کد رو بهتر توضیح بدیم به سه قسمت تقسیم میکنیم قسمت کد های جاوا اسکریپت , سی اس اس و اچ تی ام ال
کد زیر که یک تکه کد جی کوئری
میباشد باید در قالب شما و در قسمت هد شما یعنی بعد از تگ < head >یا
قبل از < /head > قرار گیرد لطفا این کد را ویرایش نفرمایید
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script type="text/javascript" src="http://dl.1learn.ir/admin/posts/greenpb/jquery.min.js"></script>
<script>
$(function() {
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
});
</script> |
این کد زیر را نیز باید در قسمت هد قالب خود مانند حالت بالا قرار دهید حالا برای ویرایش این ابزار شما باید به نکات زیر توجه کنید
در خط سوم شما میتوانید مقدار 450 را هر مقدار دلخواه خود وارد کنید این مقدار طول کل ابزار شما میباشید که در مواقعی کاربردی است که ابزار دراز یا کوتاه میباشید و شما میخواهید متناسب با مکان خود آن را ویرایش کنید
نکته دوم ان است که شما میتوانید با عوض کرن مفدار 20 در خط ششم عرض ابزار خود را نیز تنظیم کنید
و نکته سوم اینکه برای فاصله دادن از سمت های بالا راست چپ و پایین به ابزار خود مقدار های عددی موجود در خط 8 را ویرایش کنید
در خط سوم شما میتوانید مقدار 450 را هر مقدار دلخواه خود وارد کنید این مقدار طول کل ابزار شما میباشید که در مواقعی کاربردی است که ابزار دراز یا کوتاه میباشید و شما میخواهید متناسب با مکان خود آن را ویرایش کنید
نکته دوم ان است که شما میتوانید با عوض کرن مفدار 20 در خط ششم عرض ابزار خود را نیز تنظیم کنید
و نکته سوم اینکه برای فاصله دادن از سمت های بالا راست چپ و پایین به ابزار خود مقدار های عددی موجود در خط 8 را ویرایش کنید
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<style> #green{
width: 450px;
}
.green {
height: 20px;
position: relative;
margin: 5px 0px 5px 0px;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 7px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.green > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.green > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>
|
و در پایان کد زیر را در هر مکان از قالب یا پست های خود که دوست دارید استفاده کنید فقط به نکات زیر توجه کنید
در قطعه کد دوم هر مقداری را که در خط سوم قرار دادید همان مقدار را نیز برای این کد در خط دوم وارد کنید این به آن خاطر است که برخی از سیستم های وبلاگ دهی مشکل ایجاد میکنند لذا با این کار قطعا این مشکل برطرف خواهد شد
و نکته پایانی و مهم تر از همه اینکه مقدار درصد پیشرفت را در خط چهارم به جای مقدار 50 وارد کنید
در قطعه کد دوم هر مقداری را که در خط سوم قرار دادید همان مقدار را نیز برای این کد در خط دوم وارد کنید این به آن خاطر است که برخی از سیستم های وبلاگ دهی مشکل ایجاد میکنند لذا با این کار قطعا این مشکل برطرف خواهد شد
و نکته پایانی و مهم تر از همه اینکه مقدار درصد پیشرفت را در خط چهارم به جای مقدار 50 وارد کنید
|
1
2
3
4
5
6
7
|
<!-- طراحی توسط یک لرن http://www.1learn.ir--><div id="green" style="width:450px;">
<div class="green animate">
<span style="width: 50%"><span>
</div>
</div>
<!-- طراحی توسط یک لرن http://www.1learn.ir--> |
