原本做开发的项目使用的是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 οnclick="javascript:window.frames['aa'].location.href='Index.aspx'></li> 头部
<iframe id="rightFrame" src="Index.aspx" name="aa" style="min-height:585px; width:100%;"> </iframe> 内容页
<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;" οnclick="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 οnclick="loadLeft('类型1')"><a><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li>
<li οnclick="loadLeft('类型2')"><a ><img src="images/icon05.png" title="模具管理" /><h2>top菜单1</h2></a></li>
<li οnclick="loadLeft('类型3')"><a><img src="images/icon05.png" title="模块设计" /><h2>top菜单1</h2></a></li>
<li οnclick="loadLeft('4')"><a ><img src="images/icon05.png" title="常用工具" /><h2>top菜单1</h2></a></li>
<li οnclick="loadLeft('5')"><a ><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li>
<li οnclick="loadLeft('6')"><a ><img src="images/icon05.png" title="文件管理" /><h2>top菜单1</h2></a></li> </ul>
<div class="topright">
<ul>
<li><span><img src="images/help.png" title="帮助" class="helpimg"/></span><a href="#">帮助</a></li>
<li><a href="#">关于</a></li>
<li><a href="Account/Login.aspx" target="_parent">退出</a></li>
</ul>
<div class="user">
<asp:Label runat="server" ID="lblUserName"></asp:Label>
<i>消息</i>
<b>0</b>
</div>
</div>
</div>
<!--Top End 左侧菜单-->
<!--Left Begin-->
<div class="side">
<div class="lefttop"><span></span><label id="lblManageType"></label></div>
<label id="lblLeftHTML"></label>
</div>
<!--Left End-->
<!--Right Begin 主页面-->
<div class="main" >
<strong><span style="color:#cc0000;"> <iframe id="rightFrame" src="Index.aspx" name="aa" style="min-height:585px; width:100%;">
</iframe></span></strong>
</div>
<!--Right End-->
</div>
</form>
<pre class="javascript" name="code"> <script type="text/javascript" >
function getPara(cookieVal) {
if (cookieVal != "") {
document.cookie = 'type=' + cookieVal;
}
}
window.onload = function () {
// var arr, reg = new RegExp("(^| )modal=([^;]*)(;|$)");
//if (document.cookie.match(reg)) {
// arr = document.cookie.match(reg);
// loadLeft(arr[2]);
// setCookie("model", arr[2], -1);
//}else {
loadLeft('类型1');
//}
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function loadLeft(val) {
document.cookie = "modal=" + val;
document.getElementById("lblManageType").innerText = val;
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if (xmlHttp.responseText != "") {
document.getElementById("lblLeftHTML").innerHTML = xmlHttp.responseText;
onloadli();
}
}
}
xmlHttp.open("get", "Ajax/LeftPage.ashx?action=" + encodeURI(val), true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//application/x-www-form-urlencoded text/html; charset=BIG-5
xmlHttp.send();
}
var onloadli = function () {
//顶部导航切换
$(".nav li a").click(function () {
$(".nav li a.selected").removeClass("selected")
$(this).addClass("selected");
})
//导航切换
$(".menuson li").click(function () {
$(".menuson li.active").removeClass("active")
$(this).addClass("active");
});
$('.title').click(function () {
var $ul = $(this).next('ul');
$('dd').find('ul').slideUp();
if ($ul.is(':visible')) {
$(this).next('ul').slideUp();
} else {
$(this).next('ul').slideDown();
}
});
}
</script>
.ashx
public void ProcessRequest(HttpContext context)
{
try
{
context.Response.ContentType = "text/plain";
XmlDocument xml = new XmlDocument();
xml.Load("PageItems.xml");
StringBuilder builder = new StringBuilder();<p> if (context.Request.QueryString["action"] != null && context.Request.QueryString["action"].ToString() != "")
{
string val = HttpUtility.UrlDecode(context.Request.QueryString["action"].ToString());
string tempValue = string.Empty;
string tempLink = string.Empty;
int i = 1;
builder.Append("<dl class='leftmenu'>");
foreach (XmlNode modelNode in xml.ChildNodes[1])
{
if (modelNode.Attributes["value"].Value == val)//model
{
if (modelNode.HasChildNodes)
{
XmlNodeList listNode = modelNode.ChildNodes;//listnode
foreach (XmlNode listN in listNode)
{
builder.Append("<dd>");
builder.Append("<div class='title'>");
builder.Append("<span><img src = '../../images/leftico0" + i + ".png' /></span> " + listN.Attributes["value"].Value);
builder.Append("</div>");
builder.Append("<ul class='menuson'>");
if (listN.HasChildNodes)
{
writePageLink(context, builder, ref tempValue, ref tempLink, listN);
}
builder.Append("</ul>");
builder.Append("</dd> ");
i++;
}
}
}
}
builder.Append("</dl>");
context.Response.Write(builder);
}
}
catch (Exception exception) {
context.Response.Write(Res.info_error + exception.Message);
}
}
<pre class="csharp" name="code"> private static void writePageLink(HttpContext context, StringBuilder builder, ref string tempValue, ref string tempLink, XmlNode listN)
{
foreach (XmlNode pageNode in listN)
{
tempValue =pageNode.Attributes["value"].Value;
tempLink =pageNode.InnerText;
string para ="";
string onlickStr = string.Concat("href=\"", tempLink, "\"" );
if (pageNode.Attributes["para"] != null)//有页面参数则存入cookie
{
para = pageNode.Attributes["para"].Value;
onlickStr += string.Concat(" οnclick=\"getPara('", para, "')\"");
}
builder.Append("<li><cite></cite><a target='aa' "+onlickStr+" >" + tempValue + "</a><i></i></li>");
}
}
.xml 格式
<?xml version="1.0" encoding="utf-8" ?>
<node>
<model value="首頁" title="首頁"></model>
<model value="类型1" title="" >
<listnode value="">
<pagenode value="" para="yugu">ContentPage/kufang/pies.aspx</pagenode>
<pagenode value="">ContentPage/kufang/tonggoumingxi.aspx</pagenode>
<pagenode value="">ContentPage/kufang/rukumingxi.aspx</pagenode>
<pagenode value="" para="shiji">ContentPage/kufang/pies.aspx</pagenode>
<pagenode value="">ContentPage/kufang/chukumingxi.aspx</pagenode>
<pagenode value="">ContentPage/kufang/zoushi.aspx</pagenode>
</listnode>
<listnode value="">
<pagenode value="">ContentPage/kufang/qinggoupies.aspx</pagenode>
<pagenode value="">ContentPage/kufang/qinggou.aspx</pagenode>
</listnode>
<listnode value="">
<pagenode value="">ContentPage/kufang/wuliaoxinxi.aspx</pagenode>
</listnode>
<listnode value="">
<pagenode value="" para="url参数值">ContentPage/kufang/yuezoushi.aspx</pagenode>
<pagenode value="" para="url参数值">ContentPage/kufang/yuezoushi.aspx</pagenode>
</listnode>
</model>
<model value="" title="">
<listnode value="">
<pagenode value="">ContentPage/muju/mojuzong.aspx</pagenode>
</listnode>
<listnode value="">
<pagenode value="">ContentPage/muju/shimulvli1.aspx</pagenode>
<pagenode value="">ContentPage/muju/shizuopaoguangList.aspx</pagenode>
</listnode>
<listnode value="">
</listnode>
<listnode value=""></listnode>
</model>
<model value="" title="">
<listnode value="">
<pagenode value="">ContentPage/renzi/yuangong.aspx</pagenode>
</listnode>
<listnode value="">
<pagenode value="">ContentPage/renzi/jintie.aspx</pagenode>
</listnode>
<listnode value="">
<pagenode value=""></pagenode>
</listnode>
<listnode value="">
<pagenode value=""></pagenode>
</listnode>
</model>
<model value="系统设置" title="系统设置"></model>
</node></p>