Web sitenizdeki herhangi bir bölümde sayfaya sağ tıklandığı zaman sosyal medya linklerinin ve butonlarının görünmesini sağlayan oldukça kullanışlı bir çalışma. Eğer sağ tıklama işleminin çalışacağı bölüm olarak bütün siteyi seçerseniz hem yazılarınızın çalınmasına biraz engel olabilir hem de kısa yolda sitenizi paylaşmak için gerekli linkleri göstermenizi sağlar.
Hitesh Joshi tarafından hazırlanan sağ tıklama penceresi sayesinde web sayfanız içerisindeki herhangi bir alanda yada websayfanızın tamamında sağ tıklama işleminde site ziyaretçilerinize tarayıcı menüsü yerine kendi kategorilerinizi gösterebilirsiniz. Hitesh Joshi hazırladığı bu örneği sağ tıklama esnasında sosyal paylaşım sitelerinin iconlarını ekleyerek bir nevi sosyal paylaşma örneği hazırlamış. Sosyal meda butonları yada web sitenizdeki kategorileri tasarıma eklemek tamamen sizin tercihinize kalmış birşey.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Stil :
<style type="text/css">
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
display:block;
}
#myMenu{
position:absolute;
display:none;
z-index:9999;
background:yellow;
border:1px solid;
width:200px;
height:155px;
}
#textbox{
background:orange;
width:700px;
height:500px;
border:2px solid;
}
img {
height:30px; width:30px;
}
td{
font-size:20px;
cursor:pointer;
}
a{
text-decoration:none;
color:black;
}
a:hover{
color:white;
background:black;
}
</style>
JavaScript :
<script type="text/javascript">
var windowwidth;
var windowheight;
var checkmenu;
$(window).ready(function() {
$('#myMenu').hide();
$('#textbox').bind("contextmenu",function(e){
windowwidth = $(window).width();
windowheight = $(window).height();
checkmenu = 1;
$('#mask').css({
'height': windowheight,
'width': windowwidth
});
$('#myMenu').show(500);
$('#myMenu').css({
'top':e.pageY+'px',
'left':e.pageX+'px'
});
return false;
});
$('#mask').click(function(){
$(this).height(0);
$(this).width(0);
$('#myMenu').hide(500);
checkmenu = 0;
return false;
});
$('#mask').bind("contextmenu",function(){
$(this).height(0);
$(this).width(0);
$('#myMenu').hide(500);
checkmenu = 0;
return false;
});
$(window).resize(function(){
if(checkmenu == 1) {
windowwidth = $(window).width();
windowheight = $(window).height();
$('#mask').css({
'height': windowheight,
'width': windowwidth,
});
}
});
});
</script>
- Bodyetiketleri arasına eklenmesi gereken bölümler.
Sağ tıklama :
Bu bölümde sağ tıklamada çıkan linkleri ve iconları değiştirebilirsiniz
<div id="myMenu" > <table cellspace="3"> <tr> <td ><img src="images/twitter.png" ></td><td><a href="#">tweet me</a></td> </tr> <tr> <td ><img src="images/facebook.png" > </td><td><a href="#">facebook share</a></td> </tr> <tr> <td ><img src="images/myspace.png" > </td><td><a href="#">myspace share</a></td> </tr> <tr> <td ><img src="images/mail.png" > </td><td><a href="#">e-mail this</a></td> </tr> </table> </div>
Sağ tıklama işleminin gerçekleştiği alan kodları :
<div id="mask"> </div> <div id="textbox"> Burası sag tiklama isleminin calistigi alan </div> <div>