jquery.contextify.js

本文介绍了一个基于 jQuery 的上下文菜单插件 Contextify,该插件允许开发者轻松地为网页元素添加自定义的右键菜单。文章详细解释了插件的工作原理,包括如何初始化插件、设置选项及使用方法。
/* jQuery Contextify | (c) 2014-2016 Adam Bouqdib | abemedia.co.uk/license */


/*global define */


;(function( factory ) {
if ( typeof define === "function" && define.amd ) {


// AMD. Register as an anonymous module.
define([ "jquery" ], factory );
} else {


// Browser globals
factory( jQuery, window );
}
}(function ( $, window ) {


    var pluginName = 'contextify',
        defaults = {
            items: [],
            action: "contextmenu",
            menuId: "contextify-menu",
            menuClass: "dropdown-menu",
            headerClass: "dropdown-header",
            dividerClass: "divider",
            before: false
        },
        contextifyId = 0;


    function Plugin( element, options ) {
        this.element = element;


        this.options = $.extend( {}, defaults, options) ;


        this._defaults = defaults;
        this._name = pluginName;


        this.init();
    }


    Plugin.prototype.init = function () {
        var options = $.extend( {}, this.options, $(this.element).data());
        options.id = contextifyId;


        $(this.element)
            .attr('data-contextify-id', options.id)
            .on('contextmenu', function (e) {
                e.preventDefault();


                // run before
                if(typeof(options.before) === 'function') {
                    options.before(this, options);
                }


                var menu = $('<ul class="' + options.menuClass + '" role="menu" id="' + options.menuId + '" data-contextify-id="' + options.id + '"/>');


                menu.data(options);


                var l = options.items.length;
                var i;


                for (i = 0; i < l; i++) {
                    var item = options.items[i];
                    var el = $('<li/>');


                    if (item.divider) {
                        el.addClass(options.dividerClass);
                    }
                    else if (item.header) {
                        el.addClass(options.headerClass);
                        el.html(item.header);
                    }
                    else {
                        el.append('<a/>');
                        var a = el.find('a');


                        if (item.href) {
                            a.attr('href', item.href);
                        }
                        if (item.onclick) {
                            a.on('click', options, item.onclick);
                            a.css('cursor', 'pointer');
                        }
                        if (item.data) {
                        for (var data in item.data) {
                            menu.attr('data-' + data, item.data[data]);
                        }
                            a.data(item.data);
                        }
                        a.html(item.text);
                    }


                    menu.append(el);
                }


                var currentMenu = $("#" + options.menuId);


                if (currentMenu.length > 0) {
                    if(currentMenu !== menu) {
                        currentMenu.replaceWith(menu);
                    }
                }
                else {
                    $('body').append(menu);
                }


                var clientTop = $(window).scrollTop() + e.clientY,
                    x = (menu.width() + e.clientX < $(window).width()) ? e.clientX : e.clientX - menu.width(),
                    y = (menu.height() + e.clientY < $(window).height()) ? clientTop : clientTop - menu.height();


                menu
                    .css('top', y)
                    .css('left', x)
                    .css('position', 'fixed')
                    .show();
            })
        .parents().on('mouseup', function () {
            $("#" + options.menuId).hide();
        });


        contextifyId++;
    };


    Plugin.prototype.destroy = function () {
        var el = $(this.element),
            options = $.extend({}, this.options, el.data()),
            menu = $("#" + options.menuId);


        el
            .removeAttr('data-contextify-id')
            .off('contextmenu')
            .parents().off('mouseup', function () {
                menu.hide();
            });


        menu.remove();
    };


    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if( $.data(this, 'plugin_' + pluginName) && Object.prototype.toString.call(options) === '[object String]' ) {
                $.data(this, 'plugin_' + pluginName)[options]();
            }
            else if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
            }
        });
    };


}));
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值