使用Greasemonkey将可拖动窗口添加到页面 [英] Add a draggable window to a page using Greasemonkey

问题描述

我正在尝试创建一个Greasemonkey脚本，该脚本向每个网页添加可拖动的div.由于某种原因，div根本没有显示.可能是什么原因?

I'm trying to create a Greasemonkey script that adds a draggable div to every web page. For some reason, the div isn't displaying at all. What might be the reason for this?

// ==UserScript==
// @name       Draggable box demo
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  enter something useful
// @match      *://www.*
// @copyright  2012+, You
// @require http://code.jquery.com/jquery-latest.js http://code.jquery.com/ui/1.9.2/jquery-ui.js
// ==/UserScript==
//alert("Hi!");

$(document).ready(function() {
    $(document).append("<div id='dragZone'><div class='draggable'>Drag here!<input type = 'text'></input></div>");
    $('#dragZone').css('position', 'absolute');
    var a = 3;
    $('.draggable').draggable({
        start: function(event, ui) { $(this).css("z-index", a++); }
    });
    $('#dragZone div').mousedown(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });
});

推荐答案

第一次完全错误-问题是使用$(document).append.您不能直接附加到文档，而只能附加到节点.

Completely wrong on the first go - the issue is the use of $(document).append. You cannot append directly to the document, you can only append to a node.

所以

$(document.body).append()

或

$('body').append()

这是证明的小提琴.

可能是@require的缺失，也许您的油脂猴子已经过时了?

It's probably the lack of the @require, maybe your greasemonkey is out of date?

// ==UserScript==
// @name       My Fancy New Userscript
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  enter something useful
// @match      http://*/*
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @copyright  2012+, You
// ==/UserScript==
jQuery(function($){
    var _highest = 0;   

    $("div").each(function() {
        var _current = parseInt($(this).css("zIndex"), 10);
        if(_current > _highest) {
            _highest = _current + 1;
        }
    });
    $('body').append('<div style="position:absolute;top:50px;z-index:'+_highest+';left:100px;background:#ecebeb;border:1px solid #333;border-radius:5px;height:50px;width:300px;"> Hello, This is an addon div from Greasemonkey. </div>');
});
​

样板模板.应该可以正常工作.

Boilerplate template. Should work fine OOB.

这篇关于使用Greasemonkey将可拖动窗口添加到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！