Создание div и добавление его на страницу через Greasemonkey и jQuery - PullRequest
Новая
       30

Создание div и добавление его на страницу через Greasemonkey и jQuery

2 голосов
/ 31 августа 2011

Я новичок в работе с Greasemonkey и jQuery, и мне нужно добавить панель настроек на текущую страницу при нажатии на изображение.

Может ли кто-нибудь дать мне пример того, как создать div с помощью jQuery, а затем добавить его на текущую страницу, абсолютно поверх других элементов?

Вот часть тестового кода, с которым я работаю, несколько вслепую по отношению к используемым методам. 

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();
});

Ответы [ 2 ]

2 голосов
/ 31 августа 2011

Ты рядом, но не совсем там. используйте метод jQuery append(), чтобы добавить новый элемент в конец содержащего его элемента ... 

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

... отрегулируйте ваш стиль так, чтобы он соответствовал месту расположения элемента.

1 голос
/ 31 августа 2011

Вы также можете рассмотреть что-то вроде: 

// 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. Всегда приятно начинать с хороших организационных привычек.

...