类似QQ的垂直菜单(动态)

步骤:
1.新建一个页面,假如说叫VerticalMenu
2.把html代码copy到html代码区
3.把LoadTopMenu方法copy到cs代码区
4.运行即可
-------------------------------------
1.html代码

< 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代码

public 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

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.数据库脚本

if exists ( select * from dbo.sysobjects where id = object_id (N ' [dbo].[PowerSetting] ' ) and OBJECTPROPERTY (id, N ' IsUserTable ' ) = 1 )

drop table [ dbo ] . [ PowerSetting ]

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 ]

posted on 2006-09-20 12:52 圣域飞侠阅读(483) 评论(0) 编辑收藏所属分类: C#文章

常用链接

留言簿(4)

随笔分类(80)

随笔档案(110)

文章分类(28)

文章档案(31)

新闻档案(1)

相册

收藏夹

友情链接

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: 一个net代码向java 的代码转换工具 C#导出Excel源码类似QQ的垂直菜单(动态) C#下实现在线升级验证码的三种做法[纯数字][纯汉字][字母\数字\汉字混合] 用C#创建可拖动窗体如何在Web页面上直接打开、编辑、创建Office文档 2003上传文件不能超过200k问题解决方法问题