Merubah Ukuran Font dengan jQuery
Bagi yang pernah membuat wesbite dengan CMS Joomla pasti tidak akan asing dengan salah satu fasilitas yang disediakan oleh Joomla yang berhubungan dengan font, yaitu fasilitas untuk mengubah ukuran font. Untuk memiliki fasilitas tersebut, kita dapat dengan mudah membuatnya dengan menggunakan jQuery
Berikut contoh script untuk merubah ukuran font dengan menggunakan jQuery:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="ATwiwit.Net" />
<title>Mengubah Ukuran Font</title>
<style type="text/css">
#content{
padding: 10px;
width: 600px;
border: 0px solid #ccc;
}
#besarkan, #kecilkan{
padding: 5px;
margin: 10px 5px 0 0;
background: #eee;
border: 1px solid #ccc;
text-decoration: none;
}
</style>
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#besarkan').click(function(){
var ukuran=parseInt($('.paragraf').css('font-size'))+1;
if(ukuran<50){
$('.paragraf').css('font-size',ukuran);
}
});
$('#kecilkan').click(function(){
var ukuran=parseInt($('.paragraf').css('font-size'))-1;
if(ukuran>5){
$('.paragraf').css('font-size',ukuran);
}
});
});
</script>
</head>
</body>
<div id="content">
<a href="#" id="kecilkan">A-</a>
<a href="#" id="besarkan">A+</a>
<p class="paragraf">Klik A+ untuk memperbesar ukuran font dan klik A- untuk memperkecil ukuran font pada paragraf ini. Ukuran minimal font adalah 5px sedangkan ukuran maksimal font adalah 50px. Jika ukuran font mencapai batas minimal maka ukuran tidak dapat dikurangi lagi. Begitu juga sebaliknya, jika ukuran font mencapai batas maksimal maka ukuran font tidak dapat dibesarkan lagi.
</div>
</body>
</html>
Keterangan script untuk merubah ukuran font dengan menggunakan jQuery:
- Untuk merubah ukuran font dengan menggunakan id "#besarkan" dan "#kecilkan".
- Jika salah satu tombol tersebut di klik maka script akan mengambil value dari CSS font-size dari tulisan paragraf dan dijadikan integer dengan perintah JavaScript parseInt().
- Jika diklik besarkan maka akan memperbesar ukuran font dengan ukuran maksimal 50px.
- Jika diklik kecilkan maka akan memperkecil ukuran font dengan ukuran minimal 5px.
Berikut tampilan script untuk merubah ukuran font dengan menggunakan jQuery ketika dijalankan:
No comments:
Write komentar