效果图:
下载代码文件
web Page context menu (下载后请改名, 去掉.txt 扩展名);
<
html
>
<
head
>
<
script
language
="javascript"
type
="text/javascript"
>
var g_popup = window.createPopup(); var html=""; html += '<TABLE id="popup_menu1" STYLE="background-color:menu;width: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> <span id="before" STYLE="width:12px;"></span><A style="width:78px" name="before">Before</A></TD>'; html += '</TR>'; 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><span id="after" STYLE="width:12px;"></span><A style="width:78px" name="after">After</A></TD>'; html += '</TR>'; 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><span id="sub" STYLE="width:12px;"></span><A style="width: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
>
<
br
>
<
br
>
<
br
><
br
>
<
div
style
="width:546px; height:527px; background-color:green; overflow:auto"
>
<
ul
>
<
li
id
="s1"
><
span
onclick
="javascript:showmenu('s1','q1 question', '1')"
style
="cursor:pointer;"
>
Section: s1 (Your health and fitness)
</
span
>
<
ul
>
<
li
id
="s2"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s2','q1 question', '2')"
style
="cursor:pointer;"
>
Question: q1 (Would you consider yourself a health and fitness enthusiast?)
</
span
></
li
>
<
li
id
="s3"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s3','q2 question', '2')"
style
="cursor:pointer;"
>
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.)? )
</
span
></
li
>
<
li
id
="s4"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s4','q3 question', '2')"
style
="cursor:pointer;"
>
Question: q3 (Which of the following do you participated in at least 4 times per year (please check all that apply))
</
span
></
li
>
<
li
id
="s5"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s5','q4 question', '2')"
style
="cursor:pointer;"
>
Question: q4 (Do you regularly read any sports or health related magazines?)
</
span
></
li
>
</
ul
>
</
li
>
<
li
id
="s6"
><
span
onclick
="javascript:showmenu('s6','q5 question', '2')"
style
="cursor:pointer;"
>
Section: section2 (Health and Fitness online)
</
span
>
<
ul
>
<
li
id
="s7"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s7','q5 question', '2')"
style
="cursor:pointer;"
>
Question: q5 (Do you visit sporting or health/fitness related web sites?)
</
span
></
li
>
<
li
id
="s8"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s8','q6 question', '2')"
style
="cursor:pointer;"
>
Question: q6 (If yes to the previous question, what are you looking for at the site?)
</
span
></
li
>
<
li
id
="s9"
style
="text-decoration:line-through; font-weight:bolder"
><
span
style
="font-weight:bold"
>
Question: asdf (Have you ever purchased sporting goods through the internet?)
</
span
></
li
>
<
li
id
="s10"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s10','q8 question', '2')"
style
="cursor:pointer;"
>
Question: q8 (If yes to previous question, what did you buy? Check all that apply:)
</
span
></
li
>
</
ul
>
</
li
>
<
li
id
="s11"
><
span
>
Section: test (test survey)
</
span
>
<
ul
>
<
li
id
="s12"
><
span
>
Section: subtestsurvey (sub test survey)
</
span
>
<
ul
>
<
li
id
="s13"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s13','Q9 question', '2')"
style
="cursor:pointer;"
>
Question: Q9 (adf af saasf d fas fsdaf sa)
</
span
></
li
>
</
ul
>
</
li
>
<
li
id
="s14"
><
span
>
Section: asdf (asdf)
</
span
>
<
ul
>
<
li
id
="s15"
><
span
class
="psuedoLink"
onclick
="javascript:showmenu('s15','asdfsd question', '2')"
style
="cursor:pointer;"
>
Question: asdfsd (bbb)
</
span
></
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
转载于:https://www.cnblogs.com/skyfei/archive/2007/07/26/831922.html
