Search
  1. MooTools ContextMenu Plugin〔コンテキストメニュー〕

MooTools ContextMenu Plugin
コンテキストメニュー

2009/6/20

MooTools ContextMenu Plugin

mootools.js v1.2.1

ブラウザのデフォルトの右クリックを無効にして、カスタムのコンテキストメニューを作成するMootoolsプラグイン。 コンテキストメニュー内の任意の項目やコンテキストメニューの有効化・無効化できるメソッドなど、いくつかのメソッドが用意されています。

設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>MooTools ContextMenu Plugin | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools.js" ></script>
        <script type="text/javascript">
        var ContextMenu = new Class({
            //implements
            Implements: [Options,Events],
            //options
            options: {
                actions: {},
                menu: 'contextmenu',
                stopEvent: true,
                targets: 'body',
                trigger: 'contextmenu',
                offsets: { x:0, y:0 },
                onShow: $empty,
                onHide: $empty,
                onClick: $empty,
                fadeSpeed: 200
            },
            //initialization
            initialize: function(options) {
                //set options
                this.setOptions(options)
                
                //option diffs menu
                this.menu = $(this.options.menu);
                this.targets = $$(this.options.targets);
                
                //fx
                this.fx = new Fx.Tween(this.menu, { property: 'opacity', duration:this.options.fadeSpeed });
                
                //hide and begin the listener
                this.hide().startListener();
                
                //hide the menu
                this.menu.setStyles({ 'position':'absolute','top':'-900000px', 'display':'block' });
            },
            //get things started
            startListener: function() {
                /* all elemnts */
                this.targets.each(function(el) {
                    /* show the menu */
                    el.addEvent(this.options.trigger,function(e) {
                        //enabled?
                        if(!this.options.disabled) {
                            //prevent default, if told to
                            if(this.options.stopEvent) { e.stop(); }
                            //record this as the trigger
                            this.options.element = $(el);
                            //position the menu
                            this.menu.setStyles({
                                top: (e.page.y + this.options.offsets.y),
                                left: (e.page.x + this.options.offsets.x),
                                position: 'absolute',
                                'z-index': '2000'
                            });
                            //show the menu
                            this.show();
                        }
                    }.bind(this));
                },this);
                /* menu items */
                this.menu.getElements('a').each(function(item) {
                    item.addEvent('click',function(e) {
                        if(!item.hasClass('disabled')) {
                            this.execute(item.get('href').split('#')[1],$(this.options.element));
                            this.fireEvent('click',[item,e]);
                        }
                    }.bind(this));
                },this);
                
                //hide on body click
                $(document.body).addEvent('click', function() {
                    this.hide();
                }.bind(this));
            },
            //show menu
            show: function() {
                this.fx.start(1);
                this.fireEvent('show');
                this.shown = true;
                return this;
            },
            //hide the menu
            hide: function() {
                if(this.shown)
                {
                    this.fx.start(0);
                    this.fireEvent('hide');
                    this.shown = false;
                }
                return this;
            },
            //disable an item
            disableItem: function(item) {
                this.menu.getElements('a[href$=' + item + ']').addClass('disabled');
                return this;
            },
            //enable an item
            enableItem: function(item) {
                this.menu.getElements('a[href$=' + item + ']').removeClass('disabled');
                return this;
            },
            //diable the entire menu
            disable: function() {
                this.options.disabled = true;
                return this;
            },
            //enable the entire menu
            enable: function() {
                this.options.disabled = false;
                return this;
            },
            //execute an action
            execute: function(action,element) {
                if(this.options.actions[action]) {
                    this.options.actions[action](element,this);
                }
                return this;
            }
        });
        /* create the menu */
        window.addEvent('domready', function() {
            var context = new ContextMenu({
                targets: '.menu-target',
                menu: 'contextmenu',
                actions: {
                    copy: function(element,ref) {
                        element.setStyle('color','#090');
                        alert('You selected the element that says: "' + element.get('text') + '."  I just changed the color green.');
                        alert('Disabling the menu to show each individual action can control the menu instance.');
                        ref.disable();
                    }
                },
                offsets: { x: 2, y: 2 }
            });
            
            $('enable').addEvent('click',function(e) { e.stop(); context.enable(); alert('Menu Enabled.'); });
            $('disable').addEvent('click',function(e) { e.stop(); context.disable(); alert('Menu Disabled.'); });
            
            $('enable-copy').addEvent('click',function(e) { e.stop(); context.enableItem('copy'); alert('Copy Item Enabled.'); });
            $('disable-copy').addEvent('click',function(e) { e.stop(); context.disableItem('copy'); alert('Copy Item Disabled.'); });
            
        });
        </script>
        <style type="text/css">
            /* context menu specific */
            #contextmenu    { border:1px solid #999; padding:0; background:#eee; width:200px; list-style-type:none; display:none; }
            #contextmenu .separator    { border-top:1px solid #999; }
            #contextmenu li    { margin:0; padding:0; }
            #contextmenu li a { display:block; padding:5px 10px 5px 35px; width:155px; font-size:12px; text-decoration:none; font-family:tahoma,arial,sans-serif; color:#000; background-position:8px 8px; background-repeat:no-repeat; }
            #contextmenu li a:hover    { background-color:#ddd; }
            #contextmenu li a.disabled { color:#ccc; font-style:italic; }
            #contextmenu li a.disabled:hover { background-color:#eee; }
            
            /* context menu items */
            #contextmenu li a.edit    { background-image:url(/content/img/icon/contextmenu/page_white_edit.png); }
            #contextmenu li a.cut    { background-image:url(/content/img/icon/contextmenu/cut.png); }
            #contextmenu li a.copy    { background-image:url(/content/img/icon/contextmenu/page_white_copy.png); }
            #contextmenu li a.paste    { background-image:url(/content/img/icon/contextmenu/page_white_paste.png); }
            #contextmenu li a.delete    { background-image:url(/content/img/icon/contextmenu/page_white_delete.png); }
            #contextmenu li a.quit    { background-image:url(/content/img/icon/contextmenu/door.png); }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://davidwalsh.name/mootools-context-menu'>MooTools ContextMenu Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
            <div class="menu-target" style="font-weight:bold;color:#f00;">Target - Right Click Here</div>
            <br>
            <a href="" id="enable">Enable Menu</a> | <a href="" id="disable">Disable Menu</a><br><br>
            <a href="" id="enable-copy">Enable "Copy" Item</a> | <a href="" id="disable-copy">Disable "Copy" Item</a>
            <ul id="contextmenu">
                <li><a href="#edit" class="edit">Edit</a></li>
                <li class="separator"><a href="#cut" class="cut">Cut</a></li>
                <li><a href="#copy" class="copy">Copy</a></li>
                <li><a href="#paste" class="paste">Paste</a></li>
                <li><a href="#delete" class="delete">Delete</a></li>
                <li class="separator"><a href="#quit" class="quit">Quit</a></li>
            </ul>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women