Jquery Favico Plugin - favico.js
Geri Dön

Jquery Favico Plugin - favico.js

Anasayfa
Jquery derslerimize devam ediyoruz.Bu dersimizde title yanında bulunan favico ikonun değiştirmemize yarayan favico.js yi işleyeceğiz.Bu plugin sayesinde favico olarak resim,video,webcam koyabiliyoruz.Ayrıca favico üzerine sayısal olarak bildirim sayısı da yazdıra biliyoruz ve dinamik olarak değiştire biliyoruz.Tüm ayarları için http://lab.ejci.net/favico.js/ buraya bakabilirsiniz.

İndir : http://ustaderslik.com/dosya/favicon.rar

İncele : http://ustaderslik.com/ornek/favicon/

Öncelikle faviconu resim olarak değiştirmeyi yapalım.

var favicon=new Favico();//faviconu tanımlıyoruz
var resim=document.getElementById('res');//favicon olacak resmin idsini yazıyoruz.
favicon.image(resim);//resmi favicon olarak atıyoruz.

Bu şekilde kullanımı oldukça basit.

Favicon yanında bildirim sayısı göstermeyi yapalım.Bir kaç parametresi mevcut.Öncelikle bunları inceleyelim.

animation : Değişim animasyonu.Animasyonları şunlar 'slide, fade, pop, popFade, none'.
bgColor : Arkaplan rengi.
textColor : Yazı rengi.
fontFamily : Font tipi.
fontStyle : Font kalınlığı.
type : Bildirim tipi.normali daire.Dikdörtgen yapmak için rectangle vermemiz gerek.
position : Bildirim konumu.Konumları şunlar 'up, down, left, upleft'

var bildirim = 1;//bildirim sayısı
var favicon = new Favico();//faviconu tanımlıyoruz.
favicon.badge(bildirim);//bildirimi favicona atıyoruz.

bu şekilde bildirim sayısını atayabiliyoruz.

Genel örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="favicon.ico">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="favico.min.js"></script>
<script type="text/javascript">
$(function() {
var bildirim = 1;
var favicon = new Favico({
animation : 'popFade',
bgColor:"#14b7d3",
textColor:"#fff",
fontFamily:"Verdana",
fontStyle:"bold",
type:"circle",
position:"left"
});
$('#arti').click(function() {
bildirim++;
favicon.badge(bildirim);
});
$('#eksi').click(function() {
if(bildirim>0){ bildirim--; }
favicon.badge(bildirim);
});
$('#sifirla').click(function() {
favicon.reset();
});
$('#resim').click(function() {
var favicon=new Favico();
var resim=document.getElementById('res');
favicon.image(resim);
});
favicon.badge(bildirim);
});
</script>
<style type="text/css">
img{display:none;}
</style>
</head>

<body>

<button id="arti">+++</button>
<button id="eksi">----</button>
<button id="resim">Resim</button>
<button id="sifirla">Sıfırla</button>

<img src="resim.png" id="res" />

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/df4erwf0d.png
Bu şekilde kullanımı oldukça basit.



Anasayfa

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik