Merhaba arkadaşlar,
Bugün sizlere jquery ile yazı fontu büyütme ve küçültme işleminin nasıl yapılacağını anlatacağım. Bunun için öncelikle jquery kütüphanemizi yüklüyoruz. Ve aşağıdaki kodlarımızı yazıyoruz.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { $(".font-button").bind("click", function () { var size = parseInt($('.yazialan').css("font-size")); if ($(this).hasClass("plus")) { size = size + 2; if (size >= 20) { size = 20; } } else { size = size - 2; if (size <= 10) { size = 10; } } $('.yazialan').css("font-size", size); }); }); </script>
<a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
Yukarıdaki kodumuzda metinlerimizin .yazialan ile belirttiğimiz class'ın içinde olması gerekmektedir. Fontların küçültülmesi ve büyütülmesinde istediğimiz sınırı koyabilmektiyiz. Size <=10 ile küçültme sınırımızı >=20 büyüklük sınırımızı koyduk. Sizde istediğiniz sınırları koyabilirsiniz veya bu sınırları kaldırıp sınırsız büyütme ve küçültme seçeneği ile kullanabilirsiniz.
İyi çalışmalar..