Jquery Circliful Plugin
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Circliful Plugin

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(2158)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/t74fasds74.png

Kullanımı bu kadar.İster yükleme barı olarak kullanın isterseniz progress bar olarak kullanabiliriz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol