آدرس : تهران ، خیابان آزادی ، خیابان رودکی شمالی ، پلاک ۸۷۰
تلفن ثابت : 02166421387
تلفن همراه : 09198661229
تلفن همراه : 09302974451
ایمیل : info@woham.com
سورس کدنویسی نوار مهارت متحرک با استفاده از آموزش زبان برنامه نویسی جی کوئری ، html ، css برای معیار و ارزشیابی میزان مهارت در طراحی سایت … Skill Bar یک روش مدرن برای رتبه بندی است، مانند اگر می خواهید تلفن های همراه را از نظر عملکرد مقایسه کنید، نوار مهارت یکی از بهترین گزینه ها برای نشان دادن رتبه عملکرد در مقابل کاربر است، چندین روش برای استفاده از این مهارت روش رتبه بندی مدرن وجود دارد.
در این آموزش به شما نشان خواهیم داد که چگونه با استفاده از jQuery، HTML و CSS نوار مهارت متحرک ایجاد کنید. همچنین ممکن است نوار پیشرفت متحرک را با استفاده از jquery دوست داشته باشید.
برای ایجاد نوار مهارت فقط دو مرحله طول می کشد:
مرحله 1. یک فایل HTML بسازید و نشانه گذاری و اسکریپت را تعریف کنید:
یک فایل HTML می سازیم و با نام skill_bar.html ذخیره می کنیم.
<html>
<head>
<link rel="stylesheet" type="text/css" href="skill_bar_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#skillbar_php").animate({width:'85%'},1500);
$("#skillbar_asp").animate({width:'55%'},1500);
$("#skillbar_jsp").animate({width:'75%'},1500);
});
</script>
</head>
<body>
<div id="wrapper">
<div class="skill_name" id="skill_php">PHP</div>
<div class="skillbar_wrapper">
<div class="skillbar_bar" id="skillbar_php"></div>
<div class="skill_bar_percent">85%</div>
</div>
<div class="skill_name" id="skill_asp">ASP</div>
<div class="skillbar_wrapper">
<div class="skillbar_bar" id="skillbar_asp"></div>
<div class="skill_bar_percent">55%</div>
</div>
<div class="skill_name" id="skill_jsp">JSP</div>
<div class="skillbar_wrapper">
<div class="skillbar_bar" id="skillbar_jsp"></div>
<div class="skill_bar_percent">75%</div>
</div>
</div>
</body>
</html>
در این مرحله سه نوار مهارت برای سه زبان مختلف ایجاد می کنیم و سپس درصد نوار مهارت را تعریف می کنیم تا نوار مهارت ما تا آن درصد متحرک شود و نوار مهارت خود را در یک ظرف به نام skillbar_wrapper می پیچیم. زیرا نمای نوار پیشرفت را می دهد که مورد نیاز است.
سپس ما تابع document.ready را برای متحرک سازی نوار مهارت بر اساس عرض تعریف می کنیم. همچنین ممکن است با استفاده از jQuery نوار پیشرفت را در بارگذاری صفحه نمایش دهید.
مرحله 2. یک فایل CSS بسازید و یک استایل تعریف کنید.
یک فایل CSS می سازیم و با نام skill_bar_style.css ذخیره می کنیم.
body
{
text-align:center;
width:995px;
margin:0 auto;
padding:0px;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#CED8F6;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#wrapper h1
{
margin-top:100px;
font-size:55px;
color:#2E64FE;
}
#wrapper h1 a
{
color:#2E64FE;
font-size:18px;
}
.skill_name
{
margin-left:250px;
width:50px;
height:40px;
line-height:40px;
font-weight:bold;
font-size:13px;
color:white;
clear:both;
float:left;
border-radius:3px 0px 0px 3px;
}
#skill_php
{
background-color:#088A85;
}
#skill_asp
{
background-color:#5858FA;
}
#skill_jsp
{
background-color:#04B404;
}
.skillbar_wrapper
{
float:left;
position:relative;
display:block;
margin-bottom:15px;
width:400px;
background-color:#E6E6E6;
height:40px;
border-radius:0px 3px 3px 0px;
}
.skillbar_bar
{
height:40px;
width:0px;
border-radius:0px 3px 3px 0px;
}
#skillbar_php
{
background-color:#01DFD7;
}
#skillbar_asp
{
background-color:#8181F7;
}
#skillbar_jsp
{
background-color:#01DF01;
}
.skill_bar_percent
{
position:absolute;
right:10px;
top:0;
font-size:12px;
height:35px;
line-height:35px;
color:black;
}
این همه چیز است، این نحوه ایجاد نوار مهارت متحرک با استفاده از jQuery، HTML و CSS است. شما می توانید این کد را بر اساس نیاز خود بیشتر سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید. هلدینگ وهام مجموعه برتر ایده و خلاقیت در ایران.