ijquery

نوار پیشرفت

screenshot

با استفاده از این جی کوئری می توانید یک نوار پیشرفت یا progressbar برای پروژ ه های خود ایجاد کنید .

آموزش استفاده

  1. قبل از بسته شدن تگ <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>

     

  2. بعد از تگ <body>
    <div class="progress_container"><div class="progress_bar tip" title="78%"></div></div>

     


پیش نمایش دانلود فایل پلاگین

5 دیدگاه دربارهٔ «نوار پیشرفت»

  1. سلام آقا مهدی
    چه جوری میشه با مقدار دادن به یک text مثلا داخلش نوشتیم 60، نوار پیشرفت هم بزنه 60% است.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *