Özel yapım sağ tıklatın benim için bağlam menüleri web-app

SORU

21 Aralık 2010, Salı

Özel yapım sağ tıklatın benim için bağlam menüleri web-app

Aşağı sağ tıklayın menüler özel damla google-docs gibi Web birkaç ettim ve quest göster. Nedense açılan menü tarayıcı davranışını geçersiz kılar, ve şimdi onlar bunu tam olarak emin değilim. Bu bir jQuery plugin buldum, ama yine de bir kaç şey merak ediyorum:

Nasıl oluyor bu iş? Tarayıcının açılır menü aslında geçersiz kılınmasını, ya da etkisi sadece taklit mi? Eğer öyleyse, nasıl?
Eklenti uzak soyut nedir? Perde arkasında neler oluyor?
Bu etkiyi elde etmek için tek yoldur?

custom context menu image

See several custom-context menus in action

CEVAP

9 Aralık 2013, PAZARTESİ

Bu soru oldukça eski olduğunu biliyorum, ama herkes benim gibi google üzerinden bu bulur diye kendim cevaplıyorum aynı sorun ile geldi ve kendim çözdük. @Andrew konuda benim çözümüm dayalı, ama aslında her şeyi sonradan değiştirilmiş.

EDİTnasıl popüler bu son zamanlarda görmeye, stilleri de daha fazla ve daha az gibi windows 95 2014 gibi görünmesi için güncellemeye karar verdim. Böcekler @Quantico ve @Trengot düzelttim şimdi daha sağlam bir cevap bu yüzden gördü.

2 DÜZENLEYİNCool yeni bir özellik, onlar gibi StackSnippets ile ayarladım. Bırakıngood jsfiddlereferans (4. panel işlerini görmek için tıklayın) düşünce için burada.

Yeni Parçacık Yığını:

// JAVASCRIPT (jQuery)

// Trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function (event) {
    
    // Avoid the real one
    event.preventDefault();
    
    // Show contextmenu
    $(".custom-menu").finish().toggle(100).
    
    // In the right position (the mouse)
    css({
        top: event.pageY   "px",
        left: event.pageX   "px"
    });
});


// If the document is clicked somewhere
$(document).bind("mousedown", function (e) {
    
    // If the clicked element is not the menu
    if (!$(e.target).parents(".custom-menu").length > 0) {
        
        // Hide it
        $(".custom-menu").hide(100);
    }
});


// If the menu element is clicked
$(".custom-menu li").click(function(){
    
    // This is the triggered action name
    switch($(this).attr("data-action")) {
        
        // A case for each action. Your actions here
        case "first": alert("first"); break;
        case "second": alert("second"); break;
        case "third": alert("third"); break;
    }
  
    // Hide it AFTER the action was triggered
    $(".custom-menu").hide(100);
  });

/* CSS3 */

/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
}

.custom-menu li:hover {
    background-color: #DEF;
}

<!-- HTML -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

<!-- Not needed, only for making it clickable on StackOverflow -->
Right click me

Not: görürseniz, bazı küçük hatalar (açılan uzak imleç, vb), emin olun bu işler içinde jsfiddle, bu işi daha fazla benzer web sayfası daha StackSnippets olabilir.

Bunu Paylaş: