实现jQuery上下文菜单的问题

时间：2013-11-15 18:50:30

标签： javascript jquery jquery-ui google-chrome-extension contextmenu

我的完整目标是制作一个Chrome扩展程序，让我可以在任何维基百科表格上打开上下文菜单，以获取其价值以满足我的需求。我从自己身上学到了这个项目对我来说太大了，几天从未见过网络开发......这就是为什么我真的需要一些“嘿孩子，别担心* pat pat *我在这里寻求帮助你......“

我设法将代码注入wiki的页面，但不是为了使菜单有效...... 当我刷新编辑过的维基页面时，控制台会说：

Uncaught TypeError: Object function (selector,context){return new jQuery.fn.init(selector,context,rootjQuery);} has no method 'widget'

我选择此作为我的上下文菜单： https://github.com/mar10/jquery-ui-contextmenu

我拿了演示中的代码（我希望我的代码看起来一样）： http://wwwendt.de/tech/demo/jquery-contextmenu/demo/

此上下文菜单的原始功能委托给'。hasmenu'类，因此我将其更改为'＃hasmenu'，然后我将此ID添加到维基表（因为它已经有一个有用的'。wikitable'）。我把剩下的代码留下了原来的代码，以确保它能够正常工作。好吧它不起作用，但我因为它而来到这里......

注入代码（好吧，实际上这是注入新代码的代码...... Nvm！）：

$('.wikitable').attr( 'id', 'hasmenu' );

var $cm_css_libraries =
'<!-- INIZIO DELLE LIBRERIE DI STILE DEL MENU CONTESTUALE -->' +
'<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css">' +
'<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">' +
'<!-- FINE DELLE LIBRERIE DI STILE DEL MENU CONTESTUALE -->';

var $cm_css_code =
'<!-- INIZIO DEL CODICE DI STILE DEL MENU CONTESTUALE -->' +
'<style class="moogle-contextmenu-style" type="text/css">' +
'   #ui-id-1 #hasmenu {' +
'       -webkit-user-select: none;' +
'       -khtml-user-select: none;' +
'       -moz-user-select: none;' +
'       -ms-user-select: none;' +
'       user-select: none;' +
'   }' +
'   #container .hasmenu2 {' +
'       -webkit-user-select: none;' +
'       -khtml-user-select: none;' +
'       -moz-user-select: none;' +
'       -ms-user-select: none;' +
'       user-select: none;' +
'   }' +
'</style>' +
'<!-- FINE DEL CODICE DI STILE DEL MENU CONTESTUALE -->';

var $cm_script_libraries =
'<!-- INIZIO DELLE LIBRERIE DI FUNZIONI DEL MENU CONTESTUALE -->' +
'<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>' +
'<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>' +
'<script type="text/javascript" src="http://myHost/chrome-extension/taphold.js"></script>' +
'<script type="text/javascript" src="http://myHost/chrome-extension/jquery.ui-contextmenu.js"></script>' +
//'<script type="text/javascript" src="http://myHost/chrome-extension/jquery.themeswitcher.js"></script>' +
'<!-- FINE DELLE LIBRERIE DI FUNZIONI DEL MENU CONTESTUALE -->';

var $cm_script_code =
'<!-- INIZIO DEL CODICE DELLE FUNZIONI DEL MENU CONTESTUALE -->' +
'<script type="text/javascript" src="http://myHost/chrome-extension/cm_script_code.js"></script>' +
'<!-- FINE DEL CODICE DELLE FUNZIONI DEL MENU CONTESTUALE -->';

var $cm_html =
'<!-- INIZIO DEL CODICE HTML DEL MENU CONTESTUALE -->' +
'<ul class="ui-helper-hidden ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" id="ui-id-2" role="menu" tabindex="0" style="position: absolute; left: 32px; top: 20px; display: none;" aria-activedescendant="ui-id-6">' +
'   <li class="ui-menu-item" role="presentation">' +
'       <a href="#cut" id="ui-id-3" class="ui-corner-all" tabindex="-1" role="menuitem">' +
'           Cut' +
'           <span class="ui-icon ui-icon-scissors"></span>' +
'       </a>' +
'   </li>' +
'   <li class="ui-menu-item" role="presentation">' +
'       <a href="#copy" id="ui-id-4" class="ui-corner-all" tabindex="-1" role="menuitem">' +
'           Copy' +
'           <span class="ui-icon ui-icon-copy"></span>' +
'       </a>' +
'   </li>' +
'   <li class="ui-widget-content ui-menu-divider">----</li>' +
'   <li class="ui-menu-item" role="presentation">' +
'       <a href="#" aria-haspopup="true" id="ui-id-6" class="ui-corner-all" tabindex="-1" role="menuitem">' +
'           <span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>' +
'           More' +
'       </a>' +
'       <ul class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="false" style="display: none; top: 53px; left: 152px;" aria-hidden="true">' +
'           <li class="ui-menu-item" role="presentation">' +
'               <a href="#" id="ui-id-7" class="ui-corner-all" tabindex="-1" role="menuitem">' +
'                   Sub 1 (using callback)' +
'               </a>' +
'           </li>' +
'           <li class="ui-menu-item" role="presentation">' +
'               <a href="#sub1" id="ui-id-8" class="ui-corner-all" tabindex="-1" role="menuitem">' +
'                   Sub 2' +
'               </a>' +
'           </li>' +
'       </ul>' +
'   </li>' +
'</ul>' +
'<!-- FINE DEL CODICE HTML DEL MENU CONTESTUALE -->';

$('body').append($cm_html);
$('head').append($cm_css_libraries + $cm_css_code + $cm_script_libraries + $cm_script_code);
console.log('[WikipediaListConverter] injection.js: modifica avvenuta con successo');

最后* 鼓励 *这个函数给了我控制台的错误，或者至少我希望如此......（我在'$ cm_script_code'里面称呼它）

var CLIPBOARD = "";
$(function(){
    $(document).contextmenu({
        delegate: "#hasmenu", // <-- This is the only thing I edited, if I remember correctly
        preventSelect: true,
        taphold: true,
        menu: [
            {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
            {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
            {title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
            {title: "----"},
            {title: "More", children: [
                {title: "Sub 1 (using callback)", action: function(event, ui) { alert("action callback sub1");} },
                {title: "Sub 2", cmd: "sub1"}
            ]}
        ],
        // Handle menu selection to implement a fake-clipboard
        select: function(event, ui) {
            var $target = ui.target;
            switch(ui.cmd){
            case "copy":
                CLIPBOARD = $target.text();
                break
            case "paste":
                CLIPBOARD = "";
                break
            }
            alert("select " + ui.cmd + " on " + $target.text());
        },
        // Implement the beforeOpen callback to dynamically change the entries
        beforeOpen: function(event, ui) {
            var $menu = ui.menu,
                $target = ui.target;
            $(document)
                // .contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}])
                // .contextmenu("replaceMenu", "#options2")
                // .contextmenu("setEntry", "cut", {title: "Cuty", uiIcon: "ui-icon-heart", disabled: true})
                .contextmenu("setEntry", "copy", "Copy '" + $target.text() + "'")
                .contextmenu("setEntry", "paste", "Paste" + (CLIPBOARD ? " '" + CLIPBOARD + "'" : ""))
                .contextmenu("enableEntry", "paste", (CLIPBOARD !== ""));
        }
    });
});

我错了什么？！当然，对不起，如果我写了那么多...... 像往常一样，我接受每个建议之王，甚至如何改进我已经做过的事情。我正在做所有这些混乱只是为了学习新的东西= P

谢谢！

编辑：这是删除$ cm_script_code值后控制台给我的内容

Uncaught TypeError: Object function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'widget'

<小时/> 编辑：我不知道这是否有用，但错误（两者）链接到此脚本的第20行（无法发布任何其他链接...）：https：// github.com/mar10/jquery-ui-contextmenu/blob/master/jquery.ui-contextmenu.js

0 个答案:

没有答案
相关问题
最新问题