javascript---window.createPopup

最新推荐文章于 2013-06-13 00:51:00 发布

laolaowhn

最新推荐文章于 2013-06-13 00:51:00 发布

阅读量5.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： 3.javascript---window.createPopup 1.html&amp;&amp;javascript 文章标签： border class table function menu div

本文链接：https://blog.youkuaiyun.com/laolaowhn/article/details/1933830

1.html&&javascript 同时被 2 个专栏收录

50 篇文章

订阅专栏

3.javascript---window.createPopup

2 篇文章

订阅专栏

本文探讨了使用Popup窗口实现Web菜单的方法，解决了传统div菜单存在的问题。Popup窗口不会被<select>覆盖，也不受页面滚动的影响，非常适合制作多级菜单。

在Web上使用菜单可以极大地节约页面的空间，同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中，我们普遍使用div嵌套table的方式来实现菜单，这样的菜单有个最致命的问题就是会被<select>覆盖。我们为了解决这个问题，有时我们干脆在显示图层菜单的同时隐藏页面上的所有下拉列表框，在菜单消失的时候，再显示他们。这个方法虽然可以解决问题，而其优化过后还可以只隐藏和下拉列表框相交的列表框，但是这些解决方法都不是十分的完美。还有些小问题，这样的菜单定位很困难，因为在<div>显示的时候，用户可以使用鼠标滚轮滚动页面，这样一来是否要让<div>菜单和页面滚动同步呢？如果不要，页面被滚走了，菜单仍显示在一个和自己毫不相关的位置上很是古怪。如果要同步，那么噩梦就来了，因为被滚动的区域不一定就是<body>区域，还可能是一些类似<div style="overflow:auto"><div>的区域，要算出菜单的位置将会非常的麻烦。

下面将介绍的Popup来实现的Web页菜单将完全解决<div>做为菜单容器时遇到的问题，Popup窗口是IE5.5及以后版本提供的一个新feature。什么是popup呢？简单说popup其实就是一个弹出窗口，它拥有以下特点(MSDN描述)：

·popup窗口在用户点击它自身之外的任何地方或另一个popup打开的时候会自动关闭；

·popup在显示的时候不能获得焦点，所以用户已focused的操作将继续在其父窗口中执行；

·组成popup的DHTML可以存储在其父document或其他的document元素中；

·popup窗口中不支持文本框一类的编辑框element；

·不能选中popup窗口中的元素；

·不能在popup窗口中navigate(点击popup中的连接，不能让更新的内容显示到这个popup中)；

·popup窗口一旦显示就不能移动和resize。

这里MSDN说的不全，而且有的地方不是很准确，popup窗口还有几个重要的特性。它可以超出浏览器的窗口范围而且也不会被下拉框、flash、 IFrame等这些元素遮挡。实际上popup里的内容是可以被选择的，不知道MSDN说的不能选择是啥意思?。关于MSDN说popup不能获得焦点也有点问题，其实是popup里的编辑框类控件不能获得焦点，而其它的非可编辑控件是可以获得焦点的。而且popup显示的时候，IE主窗口不能获得鼠标的 onmousewheel事件。

这样的一些特性，恰好表明了popup窗口非常的适合用来制作弹出菜单，并且由于popup窗口显示的时候，IE窗口内的文档是不能被移动的，这样就不存在context menu的位置同步问题了，因为毕竟popup窗口不能move(move位置需要hide以后在新的位置上重show)，这个问题还比较讨厌。

使用popup窗口制作无限级别的菜单，有两个问题要解决：一个是要能在一个IE中显示多个Popup窗口，二是要能把窗口中的一些事件俘获并执行我们脚本过程。MSDN在描述popup窗口特性时，第一条就说了只要有另一个popup窗口开启，先前显示的popup窗口就会自动关闭。这下怎么办呢？不过既然都说了要实现无限级的菜单了，办法还是有的。对于popup，使用方式其实是很简单的，他一共就只包含了两个方法：hide()和show (...)，和两个属性：document和isOpen。虽然在IE中我们连续的调用n次window.createPopup().show (...)只能出来一个popup窗口被显示，可是我们可以调用popup.document.parentWindow的createPopup方法，它产生的popup窗口在显示的时候就不会关闭前面已显示的popup窗口，并且对于新的popup用这个方法可以继续开启child popup。这个问题再研究下去，会发现IE实现popup的一些怪异的地方(当然这些对于我们实现这个菜单关系不太大，只是觉得混乱)。

比如我们在一个IE窗口中，var popup = window.createPopup(); var win = popup.document.parentWindow; 我们会发现 window != win，对于多个popup可以共存，这个不相等还能理解，但是当我们调用win.resizeTo(...)的时候，我们发现父IE窗口被resize 了。同样我们在popup中select all，结果也是父IE窗口里的内容被全选了@_@...

下面是实现了一级菜单的window.createPopup（）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Frame_stuFrame_top.aspx.cs" Inherits="page_P_frame_Frame_stuFrame_top" %>

<title>电子商务实践平台</title>

var errorStr;

function mobileShow()

{

// var curCols = parent.document.all.fstMain.cols;

// var setCols = "";

// var sCols = curCols.split(",");

// sCols[1] == "223" ? setCols = sCols[0] + ",0," + sCols[2] + "," + sCols[3] : setCols = sCols[0] + ",223," + sCols[2] + "," + sCols[3]

// parent.document.all.fstMain.cols = setCols;

}

function messageShow()

{

var curCols = parent.document.all.fstMain.cols;

var setCols = "";

switch(curCols)

{

case "223,*,220":

setCols = "223,*,0";

break;

case "0,*,0":

setCols = "0,*,220";

break;

case "223,*,0":

setCols = "223,*,220";

break;

case "0,*,220":

setCols = "0,*,0";

break;

}

parent.document.all.fstMain.cols = setCols;

//var curCols = parent.document.all.fstMain.cols;

//var setCols = "";

//var sCols = curCols.split(",");

//sCols[3] == "260" ? setCols = sCols[0] + "," + sCols[1] + "," + sCols[2] + ",0" : setCols = sCols[0] + "," + sCols[1] + "," + sCols[2] + ",260"

//parent.document.all.fstMain.cols = setCols;

}

function picShow()

{

var curCols = parent.document.all.fstMain.cols;

var setCols = "";

switch(curCols)

{

case "223,*,220":

setCols = "0,*,220";

break;

case "0,*,0":

setCols = "223,*,0";

break;

case "223,*,0":

setCols = "0,*,0";

break;

case "0,*,220":

setCols = "223,*,220";

break;

}

parent.document.all.fstMain.cols = setCols;

// var curCols = parent.document.all.fstMain.cols;

//var setCols = "";

// var sCols = curCols.split(",");

// sCols[0] == "223" ? setCols = "0," + sCols[1] + "," + sCols[2] + "," + sCols[3] : setCols = "223," + sCols[1] + "," + sCols[2] + "," + sCols[3]

// parent.document.all.fstMain.cols = setCols;

}

function goright(e)

{

var speed=1;

var MyMar=setInterval(Marquee,speed);

e.onmouseup=function() {clearInterval(MyMar)}

}

function goleft(e)

{

var speed=1;

var MyMar=setInterval(Marqueeleft,speed);

e.onmouseup=function() {clearInterval(MyMar)}

}

function Marquee()

{

demo.scrollLeft++;

}

function Marqueeleft()

{

demo.scrollLeft--;

}

function createPage(formName,formID)

{

//先判断该窗体是否存在

var forms = document.getElementById("hd_form");

var panel = document.getElementById("td_menu");

if(forms.value.indexOf(formID + ";") >= 0)

{

var formStr = forms.value.split(";");

var s;

for (s in formStr)

{

if(formStr[s] != "")

{

document.getElementById(formStr[s]).className="title2";

}

//激活窗体

pageFocus(formID);

}

else

{

if(forms.value != "")

{

var formStr = forms.value.split(";");

var s;

for (s in formStr)

{

if(formStr[s] != "")

{

document.getElementById(formStr[s]).className="title2";

}

//新增窗体

var childInput=document.createElement('input');

childInput.setAttribute('id',formID);

childInput.type="button";

childInput.className="title1";

childInput.value=formName;

childInput.attachEvent('onclick',pageClick);

childInput.attachEvent('ondblclick',pageDbClick);

panel.appendChild(childInput);

forms.value += formID + ";";

pageFocus(formID);

}

function pageFocus(formID)

{

var forms = document.getElementById("hd_form");

var sumWidth = document.getElementById("demo");

var formStr = forms.value.split(";");

var s;

for (s in formStr)

{

if(formStr[s] != "")

{

if(formStr[s] == formID)

{

var curIndex = parseInt(s)+1;

var curWidth = curIndex * 122 - 11;

if(sumWidth.offsetWidth < curWidth)

{

sumWidth.scrollLeft = curWidth - sumWidth.offsetWidth;

if(curIndex < formStr.length)

{

sumWidth.scrollLeft += 20;

}

else

{

sumWidth.scrollLeft = 0;

}

break;

}

document.getElementById(formID).className="title1";

//处理页面

//createPage

parent.frames["mainFrame"].createPage(formID);

}

function pageClose()

{

var panel = document.getElementById("td_menu");

var ppanel = parent.frames["mainFrame"].document.getElementById("td_menu");

var forms = document.getElementById("hd_form");

var formStr = forms.value.split(";");

var s;

for (s in formStr)

{

if(formStr[s] != "")

{

if(document.getElementById(formStr[s]).className=="title1")

{

panel.removeChild(document.getElementById(formStr[s]));

//document.getElementById(formStr[s]) = null;

if(ppanel)

{

var pFrame = parent.frames["mainFrame"].document.getElementById(formStr[s]);

if(pFrame)

{

ppanel.removeChild(pFrame);

//pFrame = null;

}

forms.value = forms.value.replace(formStr[s] + ";","");

var pforms = parent.frames["mainFrame"].document.getElementById("hd_form");

if(pforms)

{

pforms.value = pforms.value.replace(formStr[s] + ";","");

}

//删除页面

if(forms.value != "")

{

if(s>0)

{

pageFocus(formStr[parseInt(s) - 1]);

}

else

{

pageFocus(formStr[parseInt(s) + 1]);

}

break;

}

function pageDbClick()

{

pageClick();

pageClose();

}

function pageClick()

{

try

{

var forms = document.getElementById("hd_form");

var formStr = forms.value.split(";");

var s;

for (s in formStr)

{

if(formStr[s] != "")

{

if(document.getElementById(formStr[s]).className=="title1")

{

document.getElementById(formStr[s]).className="title2";

break;

}

event.srcElement.className="title1";

pageFocus(event.srcElement.id);

}

catch(e)

{

errorStr = e;

}

function pageRe()

{

parent.frames["mainFrame"].pageRe();

}

function pageBack()

{

parent.frames["mainFrame"].pageBack();

}

function pageGo()

{

parent.frames["mainFrame"].pageGo();

}

</script>

</head>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<tr>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

<tr>

<td>

<tr>

</td>

<tr>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Timer ID="Timer1" runat="server" Interval="30000" OnTick="Timer1_Tick">

</asp:Timer>

</ContentTemplate>

</asp:UpdatePanel>

</td>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</div>

</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</tr>

<td onclick="parent.createPage('个人信息管理','ibtn_2');parent.hideTask();" class="divmenu_pad">个人信息管理</td>

</tr>

<td onclick="parent.createPage('企业信息管理','ibtn_3');parent.hideTask();" class="divmenu_col2 divmenu_pad">企业信息管理</td>

</tr>

</table>

</div>

</tr>

</tr>

<td onclick="parent.createPage('电子商务文档','ibtn_6');parent.hideTask();" class="divmenu_pad">电子商务文档</td>

</tr>

</table>

</div>

</tr>

</tr>

</table>

</div>

</tr>

</tr>

</tr>

</table>

</div>

</tr>

</tr>

</tr>

</tr>

</table>

</div>

</tr>

</tr>

</tr>

</table>

</div>

var oPopup = window.createPopup();

function showMenu(obj,x)

{

var oPopBody = oPopup.document.body;

oPopup.document.createStyleSheet().addImport("../../CSS/DEFAULT/P_frame/main.css");

var HTML = document.all("menu" + x).innerHTML;

oPopBody.innerHTML = HTML;

var rows = HTML.match(/<TR onmouseover="this.style.backgroundColor='#F5FDE7'" onmouseout="this.style.backgroundColor=''">/g).length;

oPopup.show(obj.offsetLeft + 4,obj.offsetTop + 22,120,rows * 28,document.body);

}

function hideTask()

{

oPopup.hide();

}

</SCRIPT>

</form>

</body>

</html>