本文實例講述了C#編程實現QQ界面的方法。分享給大家供大家參考，具體如下：
步驟:
1.新建一個頁面,假如說叫VerticalMenu
2.把html代碼copy到Html代碼區
3.把LoadTopMenu方法copy到cs代碼區
4.運行即可
1.Html代碼
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
<STYLE type="text/CSS">
A:link {}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:visited {}{ COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none}
A:hover {}{ COLOR: #006CD9; FONT-SIZE: 12px; TEXT-DECORATION: none}
BODY {}{ FONT-SIZE: 12px;}
TD {}{ FONT-SIZE: 12px; line-height: 150%}
</STYLE>
<script language="JavaScript">
<!--
function showitem(id,name)
{
//打開彈出式頁面
//return ("<span><a href='"+id+"' target=_blank>"+name+"</a></span><br>")
//在框架中打開
return ("<span><a href='#' onclick=/"url('"+id+"');/">"+name+"</a></span><br>")
}
function url(id)
{
var source = document.getElementById('fMain');
source.src=id;
}
function switchoutlookBar(number)
{
var i = outlookbar.opentitle;
outlookbar.opentitle=number;
var id1,id2,id1b,id2b
if (number!=i && outlooksmoothstat==0){
if (number!=-1)
{
if (i==-1){
id2="blankdiv";
id2b="blankdiv";
}
else{
id2="outlookdiv"+i;
id2b="outlookdivin"+i;
document.all("outlooktitle"+i).style.border="1px none navy";
document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
document.all("outlooktitle"+i).style.color="#ffffff";
document.all("outlooktitle"+i).style.textalign="center";
}
id1="outlookdiv"+number
id1b="outlookdivin"+number
document.all("outlooktitle"+number).style.border="1px none white";
document.all("outlooktitle"+number).style.background=outlookbar.maincolor; //title
document.all("outlooktitle"+number).style.color="#ffffff";
document.all("outlooktitle"+number).style.textalign="center";
smoothout(id1,id2,id1b,id2b,0);
}
else
{
document.all("blankdiv").style.display="";
document.all("blankdiv").sryle.height="100%";
document.all("outlookdiv"+i).style.display="none";
document.all("outlookdiv"+i).style.height="0%";
document.all("outlooktitle"+i).style.border="1px none navy";
document.all("outlooktitle"+i).style.background=outlookbar.maincolor;
document.all("outlooktitle"+i).style.color="#ffffff";
document.all("outlooktitle"+i).style.textalign="center";
}
}
}
function smoothout(id1,id2,id1b,id2b,stat)
{
if(stat==0){
tempinnertext1=document.all(id1b).innerHtml;
tempinnertext2=document.all(id2b).innerHtml;
document.all(id1b).innerHtml="";
document.all(id2b).innerHtml="";
outlooksmoothstat=1;
document.all(id1b).style.overflow="hidden";
document.all(id2b).style.overflow="hidden";
document.all(id1).style.height="0%";
document.all(id1).style.display="";
setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+outlookbar.inc+")",outlookbar.timedalay);
}
else
{
stat+=outlookbar.inc;
if (stat>100)
stat=100;
document.all(id1).style.height=stat+"%";
document.all(id2).style.height=(100-stat)+"%";
if (stat<100)
setTimeout("smoothout('"+id1+"','"+id2+"','"+id1b+"','"+id2b+"',"+stat+")",outlookbar.timedalay);
else
{
document.all(id1b).innerHtml=tempinnertext1;
document.all(id2b).innerHtml=tempinnertext2;
outlooksmoothstat=0;
document.all(id1b).style.overflow="auto";
document.all(id2).style.display="none";
}
}
}
function getOutLine()
{
outline="<table "+outlookbar.otherclass+">";
for (i=0;i<(outlookbar.titlelist.length);i++)
{
outline+="<tr><td name=outlooktitle"+i+" id=outlooktitle"+i+" ";
if (i!=outlookbar.opentitle)
outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:#ffffff;height:20;border:1 none navy' ";
else
outline+=" nowrap align=center style='cursor:hand;background-color:"+outlookbar.maincolor+";color:white;height:20;border:1 none white' ";
outline+=outlookbar.titlelist[i].otherclass
outline+=" onclick='switchoutlookBar("+i+")'><span class=smallFont>";
outline+=outlookbar.titlelist[i].title+"</span></td></tr>";
outline+="<tr><td name=outlookdiv"+i+" valign=top align=center id=outlookdiv"+i+" style='width:100%"
if (i!=outlookbar.opentitle)
outline+=";display:none;height:0%;";
else
outline+=";display:;height:100%;";
outline+="'><div name=outlookdivin"+i+" id=outlookdivin"+i+" style='overflow:auto;width:100%;height:100%'>";
for (j=0;j<outlookbar.itemlist[i].length;j++)
outline+=showitem(outlookbar.itemlist[i][j].key,outlookbar.itemlist[i][j].title);
outline+="</div></td></tr>"
}
outline+="</table>"
return outline
}
function show()
{
var outline;
outline="<div id=outLookBarDiv name=outLookBarDiv style='width=100%;height:100%'>"
outline+=outlookbar.getOutLine();
outline+="</div>"
document.write(outline);
}
function theitem(intitle,instate,inkey)
{
this.state=instate;
this.otherclass=" nowrap ";
this.key=inkey;
this.title=intitle;
}
function addtitle(intitle)
{
outlookbar.itemlist[outlookbar.titlelist.length]=new Array();
outlookbar.titlelist[outlookbar.titlelist.length]=new theitem(intitle,1,0);
return(outlookbar.titlelist.length-1);
}
function additem(intitle,parentid,inkey)
{
if (parentid>=0 && parentid<=outlookbar.titlelist.length)
{
outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length]=new theitem(intitle,2,inkey);
outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length-1].otherclass=" nowrap align=left style='height:5' ";
return(outlookbar.itemlist[parentid].length-1);
}
else
additem=-1;
}
function outlook()
{
this.titlelist=new Array();
this.itemlist=new Array();
this.divstyle="style='height:100%;width:100%;overflow:auto' align=center";//可以在這裡設置對齊方式
this.otherclass="border=0 cellspacing='0' cellpadding='0' style='height:100%;width:100%'valign=middle align=center ";
this.addtitle=addtitle;
this.additem=additem;
this.starttitle=-1;
this.show=show;
this.getOutLine=getOutLine;
this.opentitle=this.starttitle;
this.reflesh=outreflesh;
this.timedelay=50;
this.inc=10;
this.maincolor = "#336699"
}
function outreflesh()
{
document.all("outLookBarDiv").innerHtml=outlookbar.getOutLine();
}
function locatefold(foldname)
{
if (foldname=="")
foldname = outlookbar.titlelist[0].title
for (var i=0;i<outlookbar.titlelist.length;i++)
{
if(foldname==outlookbar.titlelist[i].title)
{
outlookbar.starttitle=i;
outlookbar.opentitle=i;
}
}
}
var outlookbar=new outlook();
var tempinnertext1,tempinnertext2,outlooksmoothstat
outlooksmoothstat = 0;
<%=LoadVerticalMenu()%>//從數據庫產生垂直菜單
//-->
</script>
<table id="mnuList" style="WIDTH:150px;HEIGHT: 100%" cellspacing="0" cellpadding="0" align="left"
border="0">
<tr>
<td bgcolor="#F0F0E5" id="outLookBarShow" style="HEIGHT: 100%" valign="top" align="middle"
name="outLookBarShow">
<script language="JavaScript">
<!--
locatefold("")
outlookbar.show()
//-->
</script>
</td>
</tr>
</table>
2.cs代碼
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56public class VerticalMenu : System.Web.UI.Page
{
protected DataRow[] father;
protected DataRow[] first;
private void Page_Load(object sender, System.EventArgs e)
{
// 模擬QQ菜單
}
public static string ConnectionString=System.Configuration .ConfigurationSettings .APPSettings["ConnectionString"];
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds;
}
#endregion
protected string LoadVerticalMenu()
{
string sqlFather="select * from PowerSetting";
DataSet dsFather=GetDataSet(sqlFather);
father=dsFather.Tables[0].Select("IsBoot=0","IsBoot");
string menu="";
foreach(DataRow drfather in father)
{
menu+="var t;";
menu+="t=outlookbar.addtitle('"+drfather["Description"]+"');";
first=dsFather.Tables[0].Select("ParentID='"+Convert.ToInt32(drfather["ParentID"])+"' and IsBoot=1","IsBoot");
foreach(DataRow drfirst in first)
{
menu+="outlookbar.additem('"+drfirst["Description"]+"',t,'"+drfirst["Url"]+"');";
}
}
return menu;
}
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.Net Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/**//**//**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
3.數據庫腳本
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[PowerSetting]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[PowerSetting]
GO
CREATE TABLE [dbo].[PowerSetting] (
[PowerSettingID] [int] IDENTITY (1, 1) NOT NULL , --id
[ParentID] [int] NOT NULL , --父節點id
[Description] [nvarchar] (255) COLLATE Chinese_PRC_CI_AS NULL , --菜單描述內容
[Icon] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL , --要顯示圖標
[Url] [nvarchar] (255) COLLATE Chinese_PRC_CI_AS NULL , --url
[Target] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL , --_self,_blank等
[CreateByID] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL , --創建人id
[CreateON] [datetime] NULL , --創建日期
[IsEnabled] [bit] NULL , --是否可用
[IsBoot] [int] NULL --是不是根節點；1是其他不是
) ON [PRIMARY]
GO
