Jquery .contextmenu() Metodu

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ı

<div class="box"></div>

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.

Yayınlayan

Uğur Özgen

2012 yılından beri web tasarım ile ilgileniyorum. Son 3 senedir profesyonel anlamda bu işi yapıyorum. İşimi çok seviyorum ve her zaman güncel kalmaya çalışıyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir