Sağ tıklamaya paylaş ikonları ekleme

By

sağ tıklama

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.
Js adresi : 
<script src="http://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>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend