javascript:window.popup()+XSLT弹出式菜单

关注

原创最新推荐文章于 2026-06-14 16:09:17 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

PopupWindow的使用原理以及实现卡片效果前记：本人菜鸟一枚，第一次写博客，写得不好。不喜勿喷，有疑问的地方可以留言回复~。 PopupWindow的使用思路: 在说明他的相关使用方法之前，我们先理清一下它的使用思路。以方便我们针对性的研究各个问题。一· 我们大致会使用PopupWindow的场景： 1.希望点击某些东西之后，能弹出一个独立的操作区域，以承载更多的内容。 2.满足一些比阅读详情

一、菜单ＸＭＬ内容文档

--menu.xsl

<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="menu">
<HTML>
<HEAD>
<TITLE> </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style>
body,td{
font-size:9pt;
}
.PopMenuOutset{border:1px solid;border-color: buttonface threeddarkshadow threeddarkshadow buttonface;FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=buttonshadow,strength=3); }
.PopMenuInset{border:1px solid;border-color: buttonhighlight buttonshadow buttonshadow buttonhighlight;}
.PopMenu{background-color: buttonface;}
.PopMenuItem{height:18px;cursor:default;}
.PopMenuItemOver{height:18px;background-color: highlight;color:highlighttext;cursor:default;}
.PopMenuItemOver img{height:18px;background-color: highlight;color:highlighttext;cursor:default;}
</style>
</HEAD>

<BODY leftmargin="0" topmargin="0" scroll="no" style="border:0">
<script>
<![CDATA[
// 当前展开的菜单项
var preObj = null;

// 创建当前窗体（可以是IE窗体也可以是Popup窗体）的Popup对象
// 这个Popup对象就是用来存储子菜单数据的
var oPopup = document.parentWindow.createPopup();

// 装载xsl
var stylesheet = new ActiveXObject("Microsoft.XMLDOM");
stylesheet.async = false;
stylesheet.load( "menu.xsl" );

// 预装载图片
var img = new Image;
img.src = "images/ArrowRHighlight.gif";

function ItemDbClick(obj,id,name)
{
//ItemOver(obj);
returnValue(id,name);
}

function returnValue(id,name) {
parent.returnValue(id,name);
}
// 鼠标经过菜单项
function ItemOver(obj) {
obj.className='PopMenuItemOver';
}

// 鼠标点击菜单项
function ItemClick(obj,id,name)
{
// 隐藏已经打开的菜单项
if (preObj != null)
{
  if (preObj == obj)
   return;
  oPopup.hide();

// 要清空原Popup中的数据――document.write()方法是接着原来的内容往里面写，所以如果不清空会出现重复数据
oPopup = document.parentWindow.createPopup();

  // 恢复前一个菜单项的状态
  ItemNormal(preObj);
  preObj = null;
}
obj.className='PopMenuItemOver';
if (obj.cells(2).children.length > 0) //有子菜单
{
  obj.cells(2).children(0).src = "images/ArrowRHighlight.gif";

// 获取子菜单xml数据
var subMenuData = obj.all.tags("xml")(0).XMLDocument;

  // 根据子菜单xml数据和当前xsl文档生成HTML
  var sHtml = subMenuData.transformNode(stylesheet);
  // 将解析出来的HTML全部输出到Popup中，在Popup中，又可以利用这些脚本再Popup……
  oPopup.document.write(sHtml);

  // 计算popup内容的实际宽度高度
  oPopup.show(0, 0, 1, 1, obj);
  var width = oPopup.document.body.scrollWidth;
  var height = oPopup.document.body.scrollHeight;
  oPopup.hide();

// 显示菜单
oPopup.show(obj.offsetWidth, 0, width, height, obj);

preObj = obj;
} else {
returnValue(id,name);
}
}

// 鼠标移出菜单项
function ItemOut(obj)
{
if (oPopup.isOpen && preObj == obj) // 如果子菜单被打开则跳过
return;
ItemNormal(obj);
}

// 恢复到菜单项的默认状态
function ItemNormal(obj)
{
obj.className='PopMenuItem';
if (obj.cells(2).children.length > 0)
{
obj.cells(2).children(0).src = "images/ArrowR.gif";
}
}

]]>
</script>
<table border="0" cellpadding="0" cellspacing="0" width="120" class="PopMenuOutset">
<tr>
  <td>
   <table border="0" cellpadding="1" cellspacing="0" width="100%" class="PopMenuInset">
    <tr>
     <td class="PopMenu">
      <table border="0" cellpadding="0" cellspacing="0" width="100%" onselectstart="return false;">
       
       <xsl:for-each select="menu">
        <tr height="18" onmouseover="ItemOver(this)" onmouseout="ItemOut(this);" >
                                                                <xsl:attribute name="title"><xsl:value-of select="@desc" /></xsl:attribute>
                                                                <xsl:attribute name="ondblclick">ItemDbClick(this,'<xsl:value-of select="@id" />','<xsl:value-of select="@fullName" />')</xsl:attribute>
               <xsl:attribute name="onclick">ItemClick(this,'<xsl:value-of select="@id" />','<xsl:value-of select="@fullName" />')</xsl:attribute>

</xsl:stylesheet>

二、生成菜单ＪＡＶＡＳＣＲＩＰＴ脚本

// 根据子菜单xml数据和当前xsl文档生成HTML
var sHtml = subMenuData.transformNode(stylesheet);
// 将解析出来的HTML全部输出到Popup中，在Popup中，又可以利用这些脚本再Popup……
popup.document.write(sHtml);

// 计算popup内容的实际宽度高度
popup.show(0, 0, 1, 1);
// alert(popup);
var width = popup.document.body.scrollWidth;
var height = popup.document.body.scrollHeight;
//alert(index);
popup.hide();

// 显示菜单
popup.show(event.screenX-5, event.screenY+10, width, height);
//popup.show(event.screenX-5, event.screenY+10, 100, 300);
}
//二级菜单
function returnValue(id,name) {
popup.hide();
//name保存的主框架与树框架
var obj=new Array();
obj=name.split(",");
//alert(obj[0]);
if(obj[0]!=null && obj[0]!=""){
    href=obj[0];
    index=href.indexOf(':');
    title=href.substring(0,index);
    href=href.substring(index+1);
    //弹出窗口
    if(href.indexOf("windowOpen")>=0){
      winnew=window.open(href,'open','top=100,left=100,width=600,height=500,scrollbars=yes, resizable=yes,status=yes');
      winnew.focus();
    }else{//在main框架中显示
      //parent.document.all.main.src = obj[0];
       //:前是标题

      if(href!=""){//添加窗口
        href2="";
        if(obj[1]!=null && obj[1]!=""){
          href2= obj[1];
        }
        parent.addFrame(href,title,href2);
      }
    }
}
if(obj[1]!=null && obj[1]!=""){
     if(parent.document.all.left_frame.src!= obj[1]){
      parent.document.all.left_frame.src=obj[1];
    }
}
}
//主菜单
function openTop(url){
//alert('dd');
var obj=new Array();
obj=url.split(",");
if(obj[0]!=null && obj[0]!=""){
    //退出主框架
    href=obj[0];//alert(href);
    index=href.indexOf(':');
    title=href.substring(0,index);
    href=href.substring(index+1);
    if(href.indexOf("windowTop")>=0){
      if(confirm('确定要退出系统?')){
        window.top.location = href;
      }
    }else{//在main框架中显示
      //parent.document.all.main.src = obj[0];
      //:前是标题
      if(href!=""){
         href2="";
        if(obj[1]!=null && obj[1]!=""){
          href2= obj[1];
        }
        parent.addFrame(href,title,href2);
      }
    }
}
if(obj[1]!=null && obj[1]!=""){
    if(parent.document.all.left_frame.src!= obj[1]){
      parent.document.all.left_frame.src=obj[1];
    }
}
}
</script>