div 만들기 및 Greasemonkey 및 jQuery를 통해 페이지에 추가

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

너는 가깝지만 그렇지는 않다. ...

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

... 포함하는 요소의 하단에 새로운 요소를 추가 요소가 다음 위치 곳 개의 스위트로 스타일을 조정하기 위해 jQuery의 append() 방법을 사용합니다. 실제로 스타일이를 포함하는 것을 지나치게 복잡 것, 그리스 몽키에 그러나 ...

// 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> 태그를 스타일 시트에 스타일을 권장하거나 것 :

Answer 2

당신은 또한 같은 것을 고려할 수 있습니다 방법. 당신은 여전히이 물론 아닌 규칙이다

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

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

... 객체와 스타일을 구성 할 수 있습니다,하지만 당신은 jQuery를하고 그리스 몽키에 새로운하다고 언급 때문에 나는이 추가 제안을했다. 좋은 조직 습관으로 시작하는 것이 좋습니다.