Geri Dön
Anasayfa
Jquery Circliful Plugin
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
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 :
Görüntüsü :
Kullanımı bu kadar.İster yükleme barı olarak kullanın isterseniz progress bar olarak kullanabiliriz.
$("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.