C#编程实现QQ界面的方法

前端技术 2023/08/31 C#

本文实例讲述了C#编程实现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#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.数据库脚本

if 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

更多关于C#相关内容感兴趣的读者可查看本站专题：《C#数据结构与算法教程》、《C#常见控件用法教程》、《C#面向对象程序设计入门教程》及《C#程序设计之线程使用技巧总结》

希望本文所述对大家C#程序设计有所帮助。

本文地址：https://www.stayed.cn/item/968

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案