Jquery .contextmenu() Metodu

  • Kategori: JQuery
  • 2 hafta önce

JQuery’de contextmenu() metodu, mouse olaylarında sağ tık fonksiyonunu yakalamamızı sağlayan bir methoddur. Bu işlemi DOM üzerindeki istediğimiz nesne üzerinde uygulayabiliriz.

 

contextmenu() metodunun kullanımı

En basit haliyle şu şekilde kullanılır.

$( selector ).contextmenu( function(){} )

Basit bir örnek uygulama ile konumuzu pekiştirelim :)

Genelde sol tık ile yapılan toggleClass uygulamasını biz sağ tık ile yapalım. Oldukça basit bir uygulama olacak :)

HTML kodları


 
 

CSS kodları

.box {
    width:180px;
    background: white;
    border:3px solid #ccc
}
.box:before {
    content: 'Right click here';
    display:block;
    line-height: 200px;
    text-align:center;
    color: #c3c3c3
}
.box.active {
    border-color: cornflowerblue
}
.box.active:before {
    color: cornflowerblue
}

JavaScript kodları

$('.box').contextmenu(function(e){
    $(this).toggleClass('active');
    e.preventDefault();
});

Not: Neden preventDefault() kullandın diye soracak olursanız, bu method olaylardaki varsayılan tarayıcı işlemlerini iptal eder. Bu örnekte, normalde sağ tık ile açılan menünün açılmamasını sağladık.

Çalışan örneği buradan görebilirsiniz.

Yorum Bırak

Yorum gönderirken kullanabileceğiniz BBKOD listesi için tıklayın

  • [b] ... [/b]
  • [i] ... [/i]
  • [u] ... [/u]
  • [s] ... [/s]
  • [font size="5" color="#333"] ... [/font]
  • [url href="link"] ... [/url]
  • [img alt="test"] test.jpg [/img]
  • [code lang="css"] ... [/code]
  • [code lang="js"] ... [/code]
  • [code lang="php"] ... [/code]
  • [code lang="json"] ... [/code]
  • [youtube width="560" heght="315" frameborder="0" allowfullscreen="true"] ... [/youtube]