Jquery Responsive Metinler
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 Responsive Metinler

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1590)
RAPOR ET
Bu dersimizde ekran boyutu değiştiğin de bile metin boyutlarını sabit tutan responsiveText adlı bir plugini anlatacağım.Bu plugin sayesinde metinlerimizi sürekli aynı boyutta tutabiliriz.Yada belirlediğimiz minimum ve maximum değerler arasında da tutabiliriz.Pencere boyutuda değişse yada zoom yapılsada sürekli aynı kalır metinler.

İndir : http://ustaderslik.com/dosya/Responsive-Metin.zip

İncele : http://ustaderslik.com/ornek/Responsive-Metin/

Şimdi kullanımını görelim.Öncelikle jquery ile pluginimizi sayfaya dahil ediyoruz.Yukarıda örnekte mevcut dosyalar.Daha sonra alanı seçip plugini uyguluyoruz.

 $('seçici').responsiveText();

Uyguladığımız yere bazı parametreler verebiliyoruz.Bunlara bakalım.

data-compression : Bu fontun boyutunu temsil ediyor.78 değeri standart font boyutu olan 16 ya denk geliyor.78 değerini azaltıkça font büyüyor.Sadece bu parametreyi verirsek.Her boyutta aynı kalır font.
data-min: Normalde ekrana zoom yapıldığında font büyür.Bu büyüyen fontun ne kadar küçüleceğini burdan belirliyoruz.Örneğin 8px kadar küçülsün font.
data-max : Buda maximum değer için.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.responsiveText.js"></script>
<script type="text/javascript">
$(function(){
$('.alan1,.alan2').responsiveText();
})
</script>
</head>
<body>

<div class="alan1" data-compression="78">Deneme Yazısı</div>
<div class="alan2" data-compression="78" data-min="10" data-max="100">Deneme Yazısı</div>
<div class="alan3">Deneme Yazısı</div>

</body>
</html>

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

Örnekte başlangıçta hepsi aynı boyutta.İlkine min ve max yok.İkincide min max var.Üçüncüde ise plugini uygulamadık.İlki hep aynı kaldı.Diğeri belirlediğimiz boyutta kaldı.Soununcu ise bayabi büyüdü.



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