Jquery Favico Plugin - favico.js
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 Favico Plugin - favico.js

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1579)
RAPOR ET
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.



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