初版

zhangyanpeng

2024-05-29 1f227a1cf627526701c652ba84bae3e430bba8d3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
Popmenu = Control.subClass({
 
    items: true,
 
    init: function(config) {
        config.css = util.combine(config.css, {
            container: null
        });
 
        this.groups = {};
        this.items = [];
        Control.call(this, config);
 
        let me = this;
        //添加点击事件
        document.addEventListener("click", function(){
            me.hide();
        });
    },
 
    getContainerTemplate: function() {
        return $(Popmenu_Template.container);
    },
 
    createContent: function() {
//        this.cancelContextmenu();
 
        var items = this.config.items;
 
        if (!items || !items.length) {
            return;
        }
 
        var max = items.length;
 
        for (var i = 0; i < max; i++) {
            var item = items[i];
 
            if (item.name == "-") {
                this.createOneSpliter(this.container, item);
            }
            else {
                this.createOneItem(this.container, item);
            }
        }
    },
 
    cancelContextmenu: function() {
        if (!document.oncontextmenu) {
            document.oncontextmenu = function(e){
                return false;
            }
        }
 
    },
 
    createOneItem: function(parent, option) {
        //1. element
        var item = $(Popmenu_Template.item);
        item.html(option.name);
 
        //2. click
        var me = this;
        item.click(function() {
            if (option.onClick) {
                option.onClick.call(this, me.data);
            }
         });
 
        //3. append
        parent.append(item);
        return result;
    },
 
    createOneSpliter: function(parent) {
        var item = $(Popmenu_Template.spliter);
        parent.append(item);
 
        return result;
    },
 
    linkTo: function(el, option) {
        var me = this;
        if (me.el) {
            $(el).unbind( "contextmenu");
            me.el = null;
        }
        me.el = el;
 
        $(el).on('contextmenu', function(e) {
            me.resetPosition(e.pageX, e.pageY);
            me.data = option;
            me.show();
            return false;
        });
 
    },
 
    resetPosition: function(x, y) {
        if(this.container) {
            $(this.container).css("left", x + "px");
            $(this.container).css("top", y + "px");
        }
    },
    show: function() {
        this.container.show();
    },
    hide: function() {
        this.container.hide();
    }
});
 
 
//*************************************
Popmenu_Template = {};
 
Popmenu_Template.container = "<ul class='popmenu' style='display:none;'></ul>";
 
Popmenu_Template.item = "<li class='popmenu-item'></li>";
 
Popmenu_Template.spliter = "<li class='popmenu-spliter'></li>";