`

用xslt+xml+javascript+css实现的菜单

XMLCSSJavaScriptXSL 
阅读更多

1、xml文件
<?xml version='1.0' encoding='utf-8'?>
<?xml:stylesheet type='text/xsl' href='menu.xsl'?>
<Menu>
 <item>
  <p_id>00</p_id>
  <menu_id>01</menu_id>
  <menu_name>供应商信息查询</menu_name>
  <link_name></link_name>
  <infor>点击改变目录层次</infor>
  <url></url>
  <memo></memo>
 </item>
 <item>
  <p_id>01</p_id>
  <menu_id>0101</menu_id>
  <menu_name></menu_name>
  <link_name>库存明细查询</link_name>
  <infor>库存明细查询</infor>
  <url>./kcmx.aspx</url>
  <memo></memo>
 </item>
 <item>
  <p_id>01</p_id>
  <menu_id>0102</menu_id>
  <menu_name> </menu_name>
  <link_name>库存汇总查询</link_name>
  <infor>库存汇总查询</infor>
  <url>./kchz.aspx </url>
  <memo></memo>
 </item>
 <item>
  <p_id>00</p_id>
  <menu_id>02</menu_id>
  <menu_name>业务情况处理</menu_name>
  <link_name></link_name>
  <infor>点击改变目录层次</infor>
  <url></url>
  <memo></memo>
 </item>
 <item>
  <p_id>02</p_id>
  <menu_id>0201</menu_id>
  <menu_name></menu_name>
  <link_name>采购信息处理</link_name>
  <infor>采购信息处理</infor>
  <url>./cgxx.aspx</url>
  <memo></memo>
 </item>
 <item>
  <p_id>02</p_id>
  <menu_id>0202</menu_id>
  <menu_name></menu_name>
  <link_name>退货信息处理</link_name>
  <infor>退货信息处理</infor>
  <url>./thxx.aspx</url>
  <memo></memo>
 </item>
</Menu>

2、xsl文件
<?xml version='1.0' encoding='utf-8'?>
<xsl:stylesheet version = '1.0'
     xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
    
     <!--变量定义-->
     <xsl:variable name='FirstMenuSeg'>0</xsl:variable><!--第一层菜单的顺序-->
     <xsl:template match='/'>
  <html>
   <head><title>menu</title>
    <script lanaguage='javascript' src='menu.js'/>
    <link rel='stylesheet' href='menu.css' type='text/css'/>
   </head>
   <body>
    <xsl:apply-templates select='Menu'/>
   </body>
  </html>
     </xsl:template>
    
     <xsl:template match='Menu'>
  <table id='frm'  width='100%' height='100%' cellspacing='2' cellpadding="2">
  <tr>
   <td>
    <table id='frm_top' cellspacing='0' cellpadding="0" width="158" align="center">
     <tr>
      <td valign="bottom" height="42"><img height='38' width='158' border="0" src="images/Admin/title.gif"/></td>
     </tr>
     <tr>
      <td class="menu_title" background="images/Admin/title_bg_quit.gif" height="25">
       <span>
        <a><b><font color="215DC6"> 首页 </font></b></a>
        <a><b><font color="215dc6"> 登陆 </font></b></a>
        <a><b><font color="215dc6"> 注销 </font></b></a>
        <a><b><font color="215dc6"> 重载 </font></b></a>
       </span>
      </td>
     </tr>
     <tr>
      <td align="center">
       <font class="navPoint">5</font>
       <font class="navPoint">6</font>
      </td>
     </tr>
    </table>
    <xsl:call-template name='firstMenu'/>
   </td>
    <!--xml部分-->
  </tr>
  <tr>
   <td  valign="bottom">
    <table id='frm_bottom' cellspacing='0' cellpadding="0" width="158"  align="center" >
     <tr>
      <td align="center">
       <font class="navPoint">5</font>
       <font class="navPoint">6</font>
      </td>
     </tr>
    </table>
   </td>
  </tr>
  </table>
     </xsl:template>
     
     <!--循环-->
     <!--
     <xsl:template name="firstitems">
  <xsl:for-each select='item[string-length(menu_id)=2]'>
   <xsl:variable name='varpid' select='menu_id'/>
   <xsl:call-template name='seconditems'>
    <xsl:with-param name='pid' select="$varpid"/>
   </xsl:call-template>
  </xsl:for-each>
     </xsl:template>
     -->
     <!--第二
     <xsl:template name='seconditems'>
  <xsl:param name='pid'/>
  <xsl:apply-templates select='//item[p_id=$pid]'/>
     </xsl:template>
     -->
     <!--原始数据(实现递归)
     <xsl:template match ="item">
   <tr onclick="cs(this.id)">
    <xsl:attribute name="id"><xsl:value-of select ='menu_id'/></xsl:attribute>
    
    <td><xsl:value-of select ='p_id'/></td>
    <td> 
     <xsl:value-of select ='menu_id'/>
    </td>
    <td><xsl:value-of select ='menu_name'/></td>
    <td><xsl:value-of select ='link_name'/></td>
    <td><xsl:value-of select ='infor'/></td>
    <td><xsl:value-of select ='url'/></td>
    <td><xsl:value-of select ='memo'/></td>
    <xsl:variable name='varpid' select='menu_id'/>
    <xsl:call-template name='seconditems'>
     <xsl:with-param name='pid' select="$varpid"/>
    </xsl:call-template>
   </tr>
 </xsl:template> 
 -->
 <xsl:template name='firstMenu'>
  <table id='frm_center' cellspacing='0' cellpadding="0" width="158" align="center">
  <xsl:for-each select='item[string-length(menu_id)=2]'>
   <!--记录循环的次数-->
   <tr onclick='cs(this.id)'>
   <xsl:attribute name='id'><xsl:value-of select='menu_id'/></xsl:attribute>
    <td class='menu_title' height='25'>
     <xsl:attribute name='background'>
      <xsl:text>images/Admin/admin_left_1.gif</xsl:text>
     </xsl:attribute>
     <xsl:value-of select="menu_name"/>
    </td>
   </tr>
   <tr>
    <td>
     <xsl:variable name='pid' select='menu_id'/>
     <xsl:call-template name='secondMenu'>
      <xsl:with-param name='pid' select='$pid'/>
     </xsl:call-template>
    </td>
   </tr>
   <tr height='20'/>
  </xsl:for-each>
  </table>
 </xsl:template>
 
 <!--第二级菜单-->
 <xsl:template name='secondMenu'>
  <xsl:param name='pid'/>
  <table class='sec_menu' style="WIDTH: 158px">
   <xsl:attribute name='id'>
    <xsl:value-of select="$pid"/><xsl:text>_menu</xsl:text>
   </xsl:attribute>
   <xsl:for-each select="//item[p_id=$pid]">
    <tr>
     <td><xsl:value-of select="menu_name"/></td>
     <td><xsl:value-of select="link_name"/></td>
    </tr>
   </xsl:for-each>
  </table>
 </xsl:template> 
</xsl:stylesheet>

3、javascript和Css部分较为简单，不再赘述

分享到：
| 常用xsl符号
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics