Question

我刚开始使用Greasemonkey和jQuery，我需要在点击图片时将设置面板添加到当前页面。

有人可以给我一个如何通过jQuery创建div的示例，然后将其添加到当前页面，绝对定位在其他元素上吗？

以下是我正在使用的一些测试代码，对所涉及的方法有点盲目。

var settingsDiv = '<div style="position:absolute;bottom:0;width:500px;padding:0;" id="kwdHelpInfo">This is the div that I want to add to the page</div>';

//the #kwdHelp element is an image file already in the document. When its clicked, I want to show the settingsDiv...

jQuery('#kwdHelp').live('click',function(){
    //alert('clicked show help');
    //var newcell = jQuery(settingsDiv);
    //jQuery(newcell).show();
});

Answer 1

你很亲密，但并不完全。使用jQuery的append()方法将新元素添加到包含元素的底部...

$('#kwdHelp').click(function() {
    $('#outerElement').append(settingsDiv); // this very well could be $('body') or any element you choose
});

...调整您的样式，因为它适合元素的位置。

Answer 2

您也可以考虑以下内容：

// Create, Append, and Save jQuery object for later reference
// Using appendTo is similar to append in functionality, but it returns the object appended
// Create once; toggle later
var jQ_helpInfo = jQuery("<div id='kwdHelpInfo'> ... </div>").appendTo("body");

// ...potentially add styles here...

// Add the click live event to "show"
jQuery("#kwdHelp").live("click", function() { jQ_helpInfo.show(); });

// Later you can have another event "hide"
jQuery(/* some other element or selector */).live("click", function() { jQ_helpInfo.hide(); });

通常情况下，我会建议样式表中的样式或至少<style>标签...但是在Greasemonkey中，实际上过分复杂的东西是以这种方式嵌入样式。您仍然可以使用对象组织样式...

// Define styles
var helpInfo_CSS = {
      "position": "absolute",
      "bottom": 0,
      "width": "500px",
      "padding": 0
    };

// Now apply the styles
jQ_helpInfo.css(helpInfo_CSS);

这当然不是一个规则，但我添加了这个额外的建议，因为你提到了jQuery和Greasemonkey的新手。从一些良好的组织习惯开始总是很好。

创建一个div并通过Greasemonkey和jQuery将其添加到页面

2 个答案: