Aap.net母版页跳转无刷新解决方案

最新推荐文章于 2023-12-27 14:38:46 发布

zhouminjob120

最新推荐文章于 2023-12-27 14:38:46 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS+DIV JS/AJAX/JQUERY 文章标签： html javascript 框架解决方案源码

本文链接：https://blog.youkuaiyun.com/zhouminjob120/article/details/48206635

原本做开发的项目使用的是ifame框架的母版页，不过扩展性不是很好，想改成cs可编辑版的，网上找了很多资料大体分为两种，一是用master不过需要在后台进行处理，有点麻烦，二就是iframe。研究了半天，终于想到一个实现方法！

首先，创建一个.aspx web页，框架代码网上到处都是，大家可以去找找。以下是我的源码

  <style>

h2{font-weight:normal;}

        html, body {
            min-width:1200px;
        }
        .clear{clear:both}
        .side {           
            height:500px;
            min-height:585px; max-height:585px;        
            position: relative;
            width: 187px;
            float: left;
            margin-right: 0 !important;
            margin-right: -3px;
            overflow: auto;
            background:#f0f9fd;
        }
         .main {
            min-height:585px; max-height:585px; 
            position: relative;
            overflow:hidden;
            min-height:585px;
            max-height:585px;
        }

   </style>

   <link href="../css/style.css" rel="stylesheet" type="text/css" />

这里我的左侧菜单是根据顶部菜单利用Ajax自动生成的, 结构复杂一点.页面比较简单的朋友可以直接引用红色部分便能实现效果了.

<li onclick="javascript:window.frames['aa'].location.href='Index.aspx'></li> 头部

     <form  runat="server">
    <div>
      
        <!--Top Begin 头部菜单-->
        <div style="height:88px;background:url(images/topbg.gif) repeat-x; ">
             <div class="topleft" style="font-family: 微软雅黑; font-size: 65px; color: #FFFF00; position: relative;">  LGP</div>
        
             <ul class="nav">
                <li <strong><span style="color:#cc0000;" <span style="background-color: rgb(204, 204, 204);"><span style="color:#ff0000;" onclick="javascript:window.frames['aa'].location.href='Index.aspx'"</span>"</span></span></strong>><a class="selected"><img src="images/icon01.png" title="首頁" /><h2> 首頁</h2></a></li>
                <li onclick="loadLeft('类型1')"><a><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li>
                <li onclick="loadLeft('类型2')"><a ><img src="images/icon05.png" title="模具管理" /><h2>top菜单1</h2></a></li>
                <li onclick="loadLeft('类型3')"><a><img src="images/icon05.png" title="模块设计" /><h2>top菜单1</h2></a></li>
                <li onclick="loadLeft('4')"><a ><img src="images/icon05.png" title="常用工具" /><h2>top菜单1</h2></a></li>
                <li onclick="loadLeft('5')"><a ><img src="images/icon05.png"