原本做開發的項目使用的是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> 頭部
<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;" 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" title="文件管理" /><h2>top菜單1</h2></a></li>
<li onclick="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(" onclick=\"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>