0

異なるdivのコンテキストメニュー用のプラグインを開発しました

<div>
  <div class='first'>some data</div>
  <div class='second'>some data</div>
  <div class='third'>some data</div>
  <div class='fourth'>some data</div>
</div>

コンテキストメニューとして表示するメニュー

<ul id='cmenu'>
 <li id='menuItem1'>Item1</li>
<li id='menuItem2'>Item1</li>
<li id='menuItem3'>Item1</li>
<li id='menuItem4'>Item1</li>
<li id='menuItem5'>Item1</li>
<li id='menuItem6'>Item1</li>
</ul>

そして私のプラグインはです。

このプラグインの仕組みは、部門ごとにメニュー項目のリストを変更し、メニュー項目のコールバックも変更されるためです。

(function($) {
    $.fn.cnxtmenu = function(options) {
        var defaults = {
            'menuid' : '',
            item1 : function() {
            },
            item2 : function() {
            },
            item3 : function() {
            },
            item4 : function() {
            },
            item5 : function() {
            },
            item6 : function() {
            },
        }, opt = $.extend({}, defaults, options);
        console.log(opt);
        var mid = '#'+opt.menuid, seldiv;
        this.live({
            "contextmenu" : function(e) {
                //console.log(this);
                seldiv = $(this);
                if ($(this).hasClass('first')) {

                    //change the menu list

                } else if($(this).hasClass('second')){


                // change the menu list to display different items 

                } 
                else if($(this).hasClass('file-list')){
                //differ list

                }
                else if($(this).hasClass('dstore_file-list')){
                    //differ menu list
                }

                $(mid).css({
                    top : e.pageY + 'px',
                    left : e.pageX + 'px'
                }).show();
                return false;
            }
        });

        $(mid).children('li').unbind('click').click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            //console.log(file + "at switch");
            switch(this.id) {
                case 'menuItem1':
                    opt.item1(this, seldiv);
                    break;
                case 'menuItem2':
                    opt.item2(this, seldiv);
                    break;
case 'menuItem3':
                    opt.item3(this, seldiv);
                    break;
case 'menuItem4':
                    opt.item4(this, seldiv);
                    break;
case 'menuItem5':
                    opt.item5(this, seldiv);
                    break;
case 'menuItem6':
                    opt.item6(this, seldiv);
                    break;


            }
            $(mid).hide();
            return false;
        });

        $(mid).click(function() {
            $(mid).hide();
        });
        $(document).click(function() {
            $(mid).hide();
        });

    }
})(jQuery);

私はこのプラグインをこのように使用しています。

$('.first').cnxtmenu({menuid:'cmenu',
item1:some callbacks
...});

3つのdivすべてに異なるコールバックを割り当てます。

私の問題は、セレクターのコールバックに違いがないことです。コールバックは何度もトリガーされています。

私のコードのどこが悪いのか助けてください

前もって感謝します。

4

1 に答える 1

1

プラグインでスクリプトのロード時にコールバックを割り当てるので、最後に割り当てられたコールバックのみが機能します。

解決策は、コンテキストメニュー関数内でコールバックを割り当てる必要があることです。

于 2012-08-25T09:52:41.970 に答える