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ü :
Değişik fontlar kullanarak güzel sonuçlar alabilirsiniz.Plugin dosyaları örnek içinde mevcut.
UstaDerslik
