Bu dersimizde jquery yükleme barı plugini olan circliful anlatacağım.Bize yükleme barı daire ve yarım daire şeklinde veriyor.Kullanımı kolay.Bir div yaratıp id verelim sonra jquery ile
$("seçici").circliful();
diyerek pluginimizi uyguluyoruz.Ayarları dive parametre vererek uyguluyoruz.Şimdi parametrelere bakalım.
İndir : http://ustaderslik.com/dosya/Jquery%20Circliful%20Plugin.zip
data-dimension : Çemberin boyutunu değiştiriyor.
dataa-text : Çember içindeki yazı
data-info : Çember içindeki ufak açıklama metni
data-width : Çemberin etrefında ilerleyen barın kalınlığı
data-fontsize : data-textin font boyutu
data-percent : Yükleme barının değeri
data-fgcolor : Yükleme barının rengi
data-bgcolor : Çemberin etrefındaki çerçevenin rengi
data-fill : Çemberin rengi
data-type : Bunu verip değere half girersek yarım daire olur.
Parametrelerimiz bu kadar.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.circliful.min.js"></script>
<link rel="stylesheet" href="jquery.circliful.css" />
<script type="text/javascript">
$(function(){
$("#ist-1,#ist-2").circliful();
})
</script>
</head>
<body>
<div id="ist-1" data-dimension="300" data-text="%45" data-info="Yarım daire" data-width="30" data-fontsize="30" data-percent="45" data-fgcolor="#d12c69" data-bgcolor="#fff" data-type="half" data-fill="#eee"></div>
<div id="ist-2" data-dimension="300" data-text="55%" data-info="Tam daire" data-width="50" data-fontsize="55" data-percent="55" data-fgcolor="#2ad" data-bgcolor="#eee" data-fill="#f5f5f5"></div>
</body>
</html>
Görüntüsü :
Kullanımı bu kadar.İster yükleme barı olarak kullanın isterseniz progress bar olarak kullanabiliriz.
UstaDerslik
