zoukankan      html  css  js  c++  java
  • 用xslt+xml+javascript+css实现的菜单

    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部分较为简单,不再赘述

  • 相关阅读:
    菜鸟笔记 -- Chapter 6.2.6 内部类
    菜鸟笔记 -- Chapter 6 面向对象
    菜鸟笔记 -- Chapter 6.1 面向对象概述
    菜鸟笔记 -- Chapter 4.7 代码注释与编码规范
    菜鸟笔记 -- Chapter 4 Java语言基础
    小白袍 -- Chapter 1.4.1.1 URL编码的理论解读
    小白袍 -- Chapter 1.1 避不开的编解码
    小白袍 -- Chapter 1 Java中的Encode与Decode
    菜鸟崛起 Ajax
    软件测试
  • 原文地址:https://www.cnblogs.com/kuailewangzi1212/p/730141.html
Copyright © 2011-2022 走看看