Jquery Smiley Plugin - Smilify
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 Smiley Plugin - Smilify

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1918)
RAPOR ET
Bu dersimizde metin halindeki yatay smileylerimizi dikey hale getiren smilify adlı smiley pluginini anlatacağım.Kullanımı oldukça basit.Dosyalarını sayfaya dahil ettikten sonra
$("seçici").smilify();

şeklinde uygulayarak smileyleri dikey yapabiliriz.

İndir : http://ustaderslik.com/dosya/smiley.zip

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

Standart smileyleri " :) :( :O:D :p :* :-) :-( :-O :-D ;) ;-) :P xD " bunlar.Daha fazla eklemek için smileys.js yi açarak en üstteki smileys arrayına yenilerini ekleyebiliriz.

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="smileys.js"></script>
<link rel="stylesheet" href="smileys.css" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rock+Salt&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Clicker+Script&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(function(){
$("div").smilify();
})
</script>
<style type="text/css">
.ana{background:#15d4f5;padding:50px;}
div{width:390px;margin:auto;word-spacing:25px;color:#fff;}
#s1 .smiley,#s1 .active{font-family:'Josefin Sans', sans-serif;font-size:60px;}
#s2 .smiley,#s2 .active{font-family:'Rock Salt', cursive;font-size:40px;}
#s3 .smiley,#s3 .active{font-family:'Clicker Script', cursive;font-size:60px;}
#s4 .smiley,#s4 .active{font-family:'Shadows Into Light Two', cursive;font-size:70px;}
</style>
</head>
<body>

<div class="ana">
<div id="s1"> :) :( :O:D ;) :P </div> <br />
<div id="s2"> :) :( :O:D ;) :P </div> <br />
<div id="s3"> :) :( :O:D ;) :P </div> <br />
<div id="s4"> :) :( :O:D ;) :P </div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/a4das12fsd1f51.png

Değişik fontlar kullanarak güzel sonuçlar alabilirsiniz.Plugin dosyaları örnek içinde mevcut.



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