با استفاده از این جی کوئری می توانید یک نوار پیشرفت یا progressbar برای پروژ ه های خود ایجاد کنید .
آموزش استفاده
- قبل از بسته شدن تگ <head/>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script language="javascript" src="jquery.tips.js" type="text/javascript"></script> <script> $("document").ready(function (){ var percent = $('.progress_bar').attr('title'); $('.progress_bar').animate({width: percent},1000); // activate tooltip $('.tip').tipsy({gravity: 's',fade: true}); }); </script> <style> body{ padding:50px; font-size:11px; font-family:Arial, Helvetica, sans-serif;} .progress_container{ padding:1px; width:195px; height:9px; overflow:hidden; background:url(progress_container.png); } .progress_bar{ height:9px; width:0px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:url(progress_bar.png); } /*-----------------------------------------------------------------------------------*/ /*Tipsy Tooltip style /*-----------------------------------------------------------------------------------*/ .tipsy { padding: 5px; font-size: 11px; position: absolute; z-index: 100000; } .tipsy-inner { padding: 6px 8px 6px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-arrow { position: absolute; background: url('tipsy.gif') no-repeat top left; width: 9px; height: 5px; } .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; } .tipsy-nw .tipsy-arrow { top: 0; left: 10px; } .tipsy-ne .tipsy-arrow { top: 0; right: 10px; } .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; } .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; } .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; } .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; } .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; } </style>
- بعد از تگ <body>
<div class="progress_container"><div class="progress_bar tip" title="78%"></div></div>
سلام و خسته نباشید
خیلی زیباست
ولی وقتی چند تارو تویه یک صفحه استفاده میکنی همه درصداشون مث هم میشه
باید چیکار کرد؟
پاسخ مارا نمیدین؟
سلام فرزاد جان تنها کپی پیست html کافی نیست باید css و js آن هم تحت یک نام جدید اضافه بشه
راه دیگه ای نداره؟
چون اگه بخوایم همش اینکارو بکنیم
حجم صفحه بالا میره
سلام آقا مهدی
چه جوری میشه با مقدار دادن به یک text مثلا داخلش نوشتیم 60، نوار پیشرفت هم بزنه 60% است.