Web page context menu (javascript)

效果图:

下载代码文件 web Page context menu (下载后请改名, 去掉.txt 扩展名);

<html>

<head>

var g_popup = window.createPopup();

var html="";

html += '<TABLE id="popup_menu1" STYLE="background-color:menu;100px; height:70px; font-size:smaller;font-family:Calibri">';

html += '<TR ONMOUSEOVER="this.style.backgroundColor=\'highlight\';this.style.color=\'White\';" ONMOUSEOUT="this.style.backgroundColor=\'\';this.style.color=\'\';" STYLE="height:20px;cursor:pointer" >';

html += '<TD> <A style="78px" name="before">Before</A></TD>';

html += '</TR>';

html += ' <TD><A style="78px" name="after">After</A></TD>';

html += '</TR>';

html += ' <TD><A style="78px " name="sub">Sub Section</A></TD>';

html += '</TR>';

html += '</TABLE>';

var toid = null;

var topa = null;

var child = document.createElement("UL");

var fe = null;

function showmenu(eml, a2, a3)

{

toid = eml;

var popBody = g_popup.document.body;

g_popup.document.body.innerHTML = html;

popBody.style.border = "thin outset";

popBody.onclick = this.doClick;

g_popup.show(event.screenX,event.screenY, 90, 70);

}

function doClick()

{

var ev = this.document.parentWindow.event;

var tag = ev.srcElement.tagName;

if(tag == 'A')

act = ev.srcElement.name;

if(tag == 'SPAN')

act = ev.srcElement.id;

if(act )

doAction(act);

}

function doAction(act)

{

if( fe == null)

{

var re = document.getElementById("s9");

fe = re.cloneNode(true);

fe.style.fontStyle = 'italic';

}

var tp = document.getElementById(toid);

//tp.insertAdjacentElement('beforeBegin', re);

if (act== 'before')

tp.insertAdjacentElement('beforeBegin', fe );

if (act== 'after')

tp.insertAdjacentElement('afterEnd', fe );

if (act=='sub')

{

if(tp.children.length <2)

tp.appendChild(child);

tp.lastChild.appendChild(fe );

}

</script>

</head>

<body >

<ul>

<li id="s1" >Section: s1 (Your health and fitness)

<ul>

<li id="s2">Question: q1 (Would you consider yourself a health and fitness enthusiast?)</li>

<li id="s3">Question: q2 (On average, how many times per week do you participate in a physical activity (such as working out, jogging, cycling, swimming, squash, football, etc.)? )</li>

<li id="s4">Question: q3 (Which of the following do you participated in at least 4 times per year (please check all that apply))</li>

<li id="s5">Question: q4 (Do you regularly read any sports or health related magazines?)</li>

</ul>

</li>

<li id="s6">Section: section2 (Health and Fitness online)

<ul>

<li id="s7">Question: q5 (Do you visit sporting or health/fitness related web sites?)</li>

<li id="s8">Question: q6 (If yes to the previous question, what are you looking for at the site?)</li>

<li id="s9" style="text-decoration:line-through; font-weight:bolder">Question: asdf (Have you ever purchased sporting goods through the internet?)</li>

<li id="s10">Question: q8 (If yes to previous question, what did you buy? Check all that apply:)</li>

</ul>

</li>

<li id="s11">Section: test (test survey)

<ul>

<li id="s12">Section: subtestsurvey (sub test survey)

<ul>

<li id="s13">Question: Q9 (adf af saasf d fas fsdaf sa)</li>

</ul>

</li>

<li id="s14">Section: asdf (asdf)

<ul>

<li id="s15">Question: asdfsd (bbb)</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>