Basit jQuery Uygulamaları Yazıyoruz : Farenin Sağ Tuşunu Engelleme
Merhaba Arkadaşlar,
” Basit jQuery Uygulamaları Yazıyoruz ” isimli eğitim serimizin bu makalesinde de sizlere fare tıklama işlemlerinden bahsedeceğim. Bazı web sitelerinde gördüğümüz bu özellik karşımıza site içerisinde herhangi bir alanda farenin sağ tuşuna tıkladığımızda ya hiç bir işlem yapmamakla ya da Farenin sağ tuşuna tıklanamayacağına dair bir uyarı yazısı ile çıkmaktadır. Site sahiplerinin bu işlemi yapmasının sebebi içerikte bulunan yazıların birebir kopyalanma işleminin önüne geçmek , resimlerinin başka sitelerde yer almasını engellemek gibi nedenlerdir. Şimdi bizde kısa bir jQuery kod bloğu ile bu işlemi web sitemize nasıl uygulayacağımızı göreceğiz.
İlk olarak bir klasör açıyoruz ve içerisine ” index.html ” isimli bir sayfa yaratıyoruz. Daha sonra jQuery kodlarımızı yazmak için gerekli olan kütüphaneyi indirmek için ” www.jquery.com ” adresine gidiyoruz. Anasayfa da bulunan büyük ” Download ” butonuna tıklıyoruz. Açılan sayfa bize son sürüm jQuery kütüphanesini gösterecektir. Bu sayfayı Farklı Kaydet seçeneği ile uygulama için açtığımız klasörün içerisine kaydediyoruz.
Bu işlemlerimizin ardından html sayfamızı bir metin editörü ile açarak kodlarımızı yazmaya başlıyoruz. İlk olarak klasik HTML kodlarımızı yazıyoruz ve indirdiğimiz jQuery kütüphanemizi sayfamıza dahil ediyoruz.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.9.0.min.js"></script>
</head>
<body>
</body>
</html>
Sayfamızı çalıştırdığımızda karşımıza tamamen boş , beyaz arkaplanlı bir sayfa çıkacaktır. Sağ tık işlemini şu anda denediğimizde bir sorun olmadığını , normal bir biçimde çalıştığını göreceğiz. Şimdi ise basit ve kısa bir jQuery kodu ile sağ tık yapıldığında bunun bu sayfa içerisinde yapılamayacağını anlatan bir yazı yazdıracağız. HTML sayfamızın çalışan ve işlemin gerçekleştiği son hali şu şekildedir.
<html>
<head>
<title>BilgiSayaci.Org - jQuery Uygulamaları</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).bind("contextmenu",function(event){
alert('Bu sayfada sağ tıklama yapamazsınız');
});
})
</script>
</head>
<body>
</body>
</html>
Kodlarımızı bu şekilde düzenleyerek kaydedip çalıştırdığımızda sağ tık işlemlerinde bir hata ile karşılaştığımızı göreceğiz. Script tag ‘leri arasında yazdığımız kodları kısaca incelemek gerekirse;
$(document).ready(function(){
Bu kod ile alt satırlarında yazılmış kodların sayfa yüklendiği anda okunması gerektiği anlatılmaktadır.
$(document).bind("contextmenu",function(event){
Bu kod ise bir alt satırında parantezleri arasına yazılan jQuery kodunun ” contextmenu ” yapıldığında yani sağ tıklama etkileşimi gerçekleştiğinde yapılması gerektiğini anlatmaktadır.
alert('Bu sayfada sağ tıklama yapamazsınız');
Son satırımızda ise sağ tıklama işlemi yapıldığında yapılacak işlemlerin anlatıldığı alanı görüyoruz. Biz bir messageBox ile hata mesajı yayınladık.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 34 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar