2012-12-19 55 views
2

我正在嘗試創建一個Greasemonkey腳本,它爲每個網頁添加一個可拖動的div。出於某種原因,div完全不顯示。這可能是什麼原因?使用Greasemonkey將可拖動的窗口添加到頁面

// ==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++); 
    }); 
}); 
+0

還有另外一個腳本,做這樣的:https://userscripts.org/scripts/show/47608我可以使用這個腳本的源代碼,這將是一個相當不錯的解決方法。 –

+0

@Ohgodwhy我注意到下面的腳本只適用於幾個網站(比如Stackoverflow.com)。你是否能在其他網站(如google.com和jsfiddle.com)上正常運行? –

回答

2

完全錯誤的第一次去 - 問題是使用$(document).append。您不能直接附加到文檔,只能附加到節點。

所以無論

$(document.body).append() 

$('body').append() 

Here's the fiddle for proof.

這也許是缺乏@require的,也許你的Greasemonkey是過時了?

// ==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模板。應該正常工作OOB。

+0

@安德森格林這很奇怪。這對我來說可以。 – Ohgodwhy

+0

您測試過哪個網頁,以及您使用哪個瀏覽器?我使用Google Chrome(支持Greasemonkey腳本,如Firefox)。 –

+0

另外,除了您在本文中提到的錯誤之外,您是否還更改過任何內容? –

2

我已經創建了一個工作用戶腳本,它爲每個頁面添加一個可拖動的div。這裏是源代碼:

// ==UserScript== 
// @name  Div on top 
// @namespace http://use.i.E.your.homepage/ 
// @version 0.1 
// @description enter something useful 
// @match  https://*/* 
// @match  http://*/* 
// @match  *.com* 
// @match  *.net* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js 
// @require  http://code.jquery.com/ui/1.9.2/jquery-ui.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 id = "draggableDiv" class = "ui-widget-content" style="position:absolute;top:'+GM_getValue("top")+'px;z-index:'+_highest+';left:'+GM_getValue("left")+'px;background:#ecebeb;border:1px solid #333;border-radius:5px;height:50px;width:300px;"> Hello, This is an addon div from Greasemonkey. <input type = "text" value = "type something here"></input> </div>'); 
    $("#draggableDiv").draggable(); 
    $('#draggableDiv').mouseup(function() { 
     //alert('Set the x and y values using GM_getValue.'); 
     var divOffset = $("#draggableDiv").offset(); 
     var left = divOffset.left; 
     var top = divOffset.top; 
     GM_setValue("left", left); 
     GM_setValue("top", top); 
     //alert("Set left to " + left + " and top to " + top); 
    }); 
});