其实这个控件的核心基本都在JS上,而相关的数据绑定和显示却非常简单。而需要说明的是在Discuz!NT的1.0
和2.0正式版,这个控件做过一些调整,当然改动也基本上是在JS上,今天给大家的源码是1.0正式版的代码,虽然
有些“旧”,但程序本身的思想没变,大家只要明白了这里的源码,有了这碗酒垫底,相信再看即将开源的2.0代码,
就会一目了然了。
好了,废话到此,马上开始今天的话题!
先请大家看一下这个控件运行时的效果图:
效果图1:
效果图2:
![](/images/cnblogs_com/daizhj/nav_new.jpg)
首先将相应的C#代码放出来:
1![](/Images/OutliningIndicators/ContractedBlock.gif)
Property ScriptPath#region Property ScriptPath
2![](/Images/OutliningIndicators/InBlock.gif)
3![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
4
/// Javascript脚本文件所在目录。
5
/// </summary>
6
[Description("Javascript脚本文件所在目录。"),DefaultValue("./")]
7
public string ScriptPath
8![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
9
get
10![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
11
object obj = ViewState["NavMenuScriptPath"];
12
return obj == null ? "js/Navbar.js" :(string) obj;
13
}
14
set
15![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
16
ViewState["NavMenuScriptPath"] = value;
17
}
18
}
19![](/Images/OutliningIndicators/InBlock.gif)
20
#endregion
21![](/Images/OutliningIndicators/None.gif)
22![](/Images/OutliningIndicators/None.gif)
23![](/Images/OutliningIndicators/ContractedBlock.gif)
Property ImageUrl#region Property ImageUrl
24
[Bindable(true), Category("Appearance"), DefaultValue("")]
25
public string ImageUrl
26![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
27
get
28![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
29
if (base.ViewState["NavMenuimageurl"] != null)
30![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
31
return (String)base.ViewState["NavMenuimageurl"];
32
}
33
else
34![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
35
return "images/";//String.Empty;
36
}
37
}
38
set
39![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
40
base.ViewState["NavMenuimageurl"] = value;
41
}
42
}
43![](/Images/OutliningIndicators/InBlock.gif)
44
#endregion
45![](/Images/OutliningIndicators/None.gif)
46![](/Images/OutliningIndicators/None.gif)
47![](/Images/OutliningIndicators/ContractedBlock.gif)
Property CssPath#region Property CssPath
48![](/Images/OutliningIndicators/InBlock.gif)
49![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
50
/// Css文件所在目录。
51
/// </summary>
52
[Description("Javascript脚本文件所在目录。"),DefaultValue("./")]
53
public string CssPath
54![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
55
get
56![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
57
object obj = ViewState["NavMenuCssPath"];
58
return obj == null ? "styles/nav.css" :(string) obj;
59
}
60
set
61![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
62
ViewState["NavMenuCssPath"] = value;
63
}
64
}
65![](/Images/OutliningIndicators/InBlock.gif)
66
#endregion
67![](/Images/OutliningIndicators/None.gif)
68![](/Images/OutliningIndicators/None.gif)
69![](/Images/OutliningIndicators/ContractedBlock.gif)
Property XmlFileFullPathName#region Property XmlFileFullPathName
70
71![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
72
/// Xml文件所在目录。
73
/// </summary>
74
[Description("Xml文件所在目录。"),DefaultValue("./")]
75
public string XmlFileFullPathName
76![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
77
get
78![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
79
object obj = ViewState["NavMenuXmlFileFullPathName"];
80
return obj == null ? "xml/navmenu.xml" :(string) obj;
81
}
82
set
83![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
84
ViewState["NavMenuXmlFileFullPathName"] = value;
85
}
86
}
87![](/Images/OutliningIndicators/InBlock.gif)
88
#endregion
89![](/Images/OutliningIndicators/None.gif)
90![](/Images/OutliningIndicators/ContractedBlock.gif)
protected override void OnPreRender(EventArgs e)#region protected override void OnPreRender(EventArgs e)
91![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//// <summary>
92
/// 重写<see cref="System.Web.UI.Control.OnPreRender"/>方法。
93
/// </summary>
94
/// <param name="e">包含事件数据的 <see cref="EventArgs"/> 对象。</param>
95
protected override void OnPreRender(EventArgs e)
96![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
97
StringBuilder sb = new StringBuilder();
98![](/Images/OutliningIndicators/InBlock.gif)
99
sb.Append("<script type=\"text/javascript\" src=\"" + this.ScriptPath + "\"></script>\r\n");
100
sb.Append("<link rel=\"stylesheet\" type=\"text/css\" href=\"" + this.CssPath + "\" />\r\n");
101
sb.Append("<script type=\"text/javascript\">var imgpath='" + this.ImageUrl + "';</script>\r\n");
102
sb.Append("<script language=\"javascript\" src=\"" + this.ScriptPath + "\"></script>\r\n");
103
#if NET1
104
if (!Page.IsClientScriptBlockRegistered("NavMenu"))
105![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
106
Page.RegisterClientScriptBlock("NavMenu", sb.ToString());
107
}
108
#else
109
if (!Page.ClientScript.IsClientScriptBlockRegistered("NavMenu"))
110![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
111
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "NavMenu", sb.ToString());
112
}
113
#endif
114![](/Images/OutliningIndicators/InBlock.gif)
115
base.OnPreRender(e);
116
}
117![](/Images/OutliningIndicators/InBlock.gif)
118
#endregion
119![](/Images/OutliningIndicators/None.gif)
120![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//// <summary>
121
/// 将此控件呈现给指定的输出参数。
122
/// </summary>
123
/// <param name="output"> 要写出到的 HTML 编写器 </param>
124
protected override void Render(HtmlTextWriter output)
125![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
126
127
output.Write("<div class=\"sdmenu\">\r\n");
128
129
System.Data.DataSet dsSrc = new System.Data.DataSet();
130
dsSrc.ReadXml(Page.Server.MapPath(this.XmlFileFullPathName));
131![](/Images/OutliningIndicators/InBlock.gif)
132
int count=0;
133
foreach(System.Data.DataRow dr in dsSrc.Tables[0].Rows)
134![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
135![](/Images/OutliningIndicators/ContractedSubBlock.gif)
输出主菜单#region 输出主菜单
136
output.Write(" <table>\r\n");
137
output.Write("<tr>\r\n");
138
if(count==0)
139![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
140
output.Write("<td width=\"196px\"><span class=\"title\" id=\"top\">"+
141
dr["menutitle"]+"</span></td>\r\n");
142
}
143
else
144![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
145
output.Write("<td width=\"196px\"><span class=\"title\">"+
146
dr["menutitle"]+"</span></td>\r\n");
147
}
148
output.Write("<td><img src=\""+this.ImageUrl+"/top_level_ico1.gif\"
149
class=\"arrow\" /></td>\r\n");
150
output.Write("</tr>\r\n");
151
output.Write("</table>\r\n");
152
#endregion
153![](/Images/OutliningIndicators/InBlock.gif)
154![](/Images/OutliningIndicators/ContractedSubBlock.gif)
输出子菜单#region 输出子菜单
155
output.Write(" <div class=\"submenu\">\r\n");
156
output.Write("<table>\r\n");
157
foreach(System.Data.DataRow drs in dsSrc.Tables[1].Select("menuparentid='"+
158
dr["menuid"]+"'"))
159![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
160
161
output.Write("<tr>\r\n");
162
if(drs["imgurl"].ToString().Trim()!="")
163![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
164
output.Write(" <td class=\"lefttd\" ><img src=\""+
165
drs["imgurl"].ToString().Trim()+"\"
166
class=\"submenuimg\" align=\"absmiddle\"/></td>");
167
}
168
else
169![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
170
output.Write(" <td class=\"lefttd\" ></td>");
171
}
172
if((drs["frameid"].ToString().Trim()=="top")||(drs["frameid"].ToString().
173
Trim()==""))
174![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
175
output.Write("<td><a href=\"javascript:void(0);\"
176
onclick=\"javascript:top.location.href='"+
177
drs["link"].ToString().Trim()+"';\"
178
onfocus=\"this.blur();\">"+
179
drs["menutitle"].ToString().Trim()+"</a></td>\r\n");
180
}
181
else
182![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
183
output.Write("<td><a href=\""+drs["link"].ToString().Trim()+"\"
184
target="+drs["frameid"].ToString().Trim()+"
185
onfocus=\"this.blur();\">"+
186
drs["menutitle"].ToString().Trim()+"</a></td>\r\n");
187
}
188
output.Write("</tr>\r\n");
189
}
190
output.Write("</table>\r\n");
191
output.Write("</div>\r\n");
192
#endregion
193![](/Images/OutliningIndicators/InBlock.gif)
194
//打印分割符
195
output.Write("<div class=\"splitter\"> </div>\r\n");
196
count++;
197
}
198![](/Images/OutliningIndicators/InBlock.gif)
199
output.Write("</div>\r\n");
200
}
201
}
202![](/Images/OutliningIndicators/None.gif)
203
204![](/Images/OutliningIndicators/None.gif)
205![](/Images/OutliningIndicators/None.gif)
上面的代码因为太简单,就不多做介绍了。而XML的结构如下:
其中的submain表(这里暂且这样说)的menuparentid(子菜单的父menuid),是关联mainmenu表的menuid,这样就能够这
这两个表有一个主从结构了。当前如果将这两个表合成“一个”也可以,前提是要减少数据冗余,因为mainmenu表里是不
包含link(点击子菜单跳转地址),frameid(子菜单跳转的frameid)这样的信息的。
最后要说明的是这个控件的JS,代码如下(详情见注释):
1
2
var remember = false; //记录当前菜单状态,当下次访问时使用
3
var contractall_default= 1; //系统菜单项状态 1:只显示第一项 2:展开所有项 3:收缩所有的菜单项
4![](/Images/OutliningIndicators/None.gif)
5
var menu, titles, submenus, arrows, bypixels; //定义指定的菜单数组变量
6
var heights = new Array();
7
var speed=10; //加载菜单项的速度
8![](/Images/OutliningIndicators/None.gif)
9
var n = navigator.userAgent;
10![](/Images/OutliningIndicators/None.gif)
11
if(/Opera/.test(n))
12![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
13
bypixels = 2;
14
}
15
else if(/Firefox/.test(n))
16![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
17
bypixels = 3;
18
}
19
else if(/MSIE/.test(n))
20![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
21
bypixels = 2;
22
}
23![](/Images/OutliningIndicators/None.gif)
24![](/Images/OutliningIndicators/None.gif)
25
//展开所有菜单项
26
function slash_expandall()
27![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
28
if (typeof menu!="undefined")
29![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
30
for(i=0; i<Math.max(titles.length, submenus.length); i++)
31![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
32
titles[i].className="title";
33
arrows[i].src = imgpath+"/top_level_ico1.gif";
34
submenus[i].style.display="";
35
submenus[i].style.height = heights[i]+"px";
36
}
37
}
38
}
39![](/Images/OutliningIndicators/None.gif)
40![](/Images/OutliningIndicators/None.gif)
41
//收缩所有菜单项
42
function slash_contractall()
43![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
44
if (typeof menu!="undefined")
45![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
46
for(i=0; i<Math.max(titles.length, submenus.length); i++)
47![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
48
titles[i].className="titlehidden";
49
arrows[i].src = imgpath+"/top_level_ico2.gif";
50
submenus[i].style.display="none";
51
submenus[i].style.height = 0;
52
}
53
}
54
}
55![](/Images/OutliningIndicators/None.gif)
56
57![](/Images/OutliningIndicators/None.gif)
58
//初始化函数
59![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function init()
{
60
menu = getElementsByClassName("sdmenu", "div", document)[0];
61
titles = getElementsByClassName("title", "span", menu);
62
submenus = getElementsByClassName("submenu", "div", menu);
63
arrows = getElementsByClassName("arrow", "img", menu);
64
for(i=0; i<Math.max(titles.length, submenus.length); i++)
65![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
66
titles[i].onclick = gomenu;
67
arrows[i].onclick = gomenu;
68
heights[i] = submenus[i].offsetHeight;
69
submenus[i].style.height = submenus[i].offsetHeight+"px";
70![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*alert(i); */
71
72
if(i>0)
73![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
74
titles[i].className="titlehidden";
75
arrows[i].src = imgpath+"/top_level_ico2.gif";
76
submenus[i].style.display="none";
77
submenus[i].style.height = 0;
78
//alert('123');
79
}
80
}
81
82
if(remember)
83![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
84
restore();
85
}
86
87
//根据菜单项状态设置,显示菜单
88
switch(contractall_default)
89![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
90
case 1:
91![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
92
break;
93
}
94
case 2:
95![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
96
slash_expandall();break;
97
}
98
case 3:
99![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
100
slash_contractall();
101
}
102
default:
103![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
104
break;
105
}
106
}
107
}
108![](/Images/OutliningIndicators/None.gif)
109
//存储菜单项状态
110![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function restore()
{
111![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(getcookie("menu") != null)
{
112
var hidden = getcookie("menu").split(",");
113![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i in hidden)
{
114
115
titles[hidden[i]].className = "titlehidden";
116
submenus[hidden[i]].style.height = "0px";
117
submenus[hidden[i]].style.display = "none";
118
arrows[hidden[i]].src =imgpath+"/top_level_ico2.gif";
119
}
120
}
121
}
122![](/Images/OutliningIndicators/None.gif)
123
//定向到指定的菜单项进行相应操作
124
function gomenu(e)
125![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
126
if (!e)
127![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
128
e = window.event;
129
}
130
131
var ce = (e.target) ? e.target : e.srcElement;
132
133
var sm;
134
135
//找到当前菜单项在数组中的位置,用于下面显示或隐藏判断
136
for(var i in titles)
137![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
138
if(titles[i] == ce || arrows[i] == ce)
139![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
140
sm = i;
141
}
142
}
143![](/Images/OutliningIndicators/InBlock.gif)
144
//当前菜单项是展示状态时
145
if(parseInt(submenus[sm].style.height) > parseInt(heights[sm])-2)
146![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
147
hidemenu(sm);
148
}
149
else if(parseInt(submenus[sm].style.height) < 2) //当是收缩状态
150![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
151
titles[sm].className = "title";
152
153
//当菜单只能展开一项(其余菜单项须全部收起)
154
if(contractall_default ==1)
155![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
156
slash_contractall();
157
}
158
//显示指定的菜单项
159
showmenu(sm);
160
}
161
}
162![](/Images/OutliningIndicators/None.gif)
163
//隐藏指定的菜单元素
164
function hidemenu(sm)
165![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
166
var nr = submenus[sm].getElementsByTagName("a").length*bypixels+speed;
167
submenus[sm].style.height = (parseInt(submenus[sm].style.height)-nr)+"px";
168
var to = setTimeout("hidemenu("+sm+")", 5);
169![](/Images/OutliningIndicators/InBlock.gif)
170
if(parseInt(submenus[sm].style.height) <= nr)
171![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
172
clearTimeout(to);
173
submenus[sm].style.display = "none";
174
submenus[sm].style.height = "0px";
175
arrows[sm].src = imgpath+"/top_level_ico2.gif";
176
titles[sm].className = "titlehidden";
177
}
178
}
179![](/Images/OutliningIndicators/None.gif)
180
//显示指定的菜单元素
181
function showmenu(sm)
182![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
183
var nr = submenus[sm].getElementsByTagName("a").length*bypixels+speed;
184
submenus[sm].style.display = "";
185
submenus[sm].style.height = (parseInt(submenus[sm].style.height)+nr)+"px";
186
var to = setTimeout("showmenu("+sm+")", 30);
187
if(parseInt(submenus[sm].style.height) > (parseInt(heights[sm])-nr))
188![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
189
clearTimeout(to);
190
submenus[sm].style.height = heights[sm]+"px";
191
arrows[sm].src = imgpath+"/top_level_ico1.gif";
192
}
193
}
194![](/Images/OutliningIndicators/None.gif)
195
//保存菜单元素
196
function store()
197![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
198
var hidden = new Array();
199
for(var i in titles)
200![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
201
if(titles[i].className == "titlehidden")
202![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
203
hidden.push(i);
204
}
205
}
206
putcookie("menu", hidden.join(","), 5);
207
}
208![](/Images/OutliningIndicators/None.gif)
209
//获取指定样式的元素
210![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function getElementsByClassName(strClassName, strTagName, oElm)
{
211
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
212
var arrReturnElements = new Array();
213
strClassName = strClassName.replace(/\-/g, "\\-");
214
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
215
var oElement;
216
for(var i=0; i<arrElements.length; i++)
217![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
218
oElement = arrElements[i];
219
if(oRegExp.test(oElement.className))
220![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
221
arrReturnElements.push(oElement);
222
}
223
}
224
return (arrReturnElements)
225
}
226![](/Images/OutliningIndicators/None.gif)
227
function putcookie(c_name,value,expiredays)
228![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
229
var exdate=new Date();
230
exdate.setDate(exdate.getDate()+expiredays);
231
document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate);
232
}
233![](/Images/OutliningIndicators/None.gif)
234
function getcookie(c_name)
235![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](/Images/OutliningIndicators/ContractedBlock.gif)
{
236
if(document.cookie.length > 0)
237![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
238
var c_start = document.cookie.indexOf(c_name + "=");
239
if(c_start != -1)
240![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
241
c_start = c_start + c_name.length + 1;
242
var c_end = document.cookie.indexOf(";",c_start);
243
if(c_end == -1)
244![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
245
c_end = document.cookie.length;
246
}
247
return unescape(document.cookie.substring(c_start, c_end));
248
}
249
}
250
return null;
251
}
252![](/Images/OutliningIndicators/None.gif)
253
window.onload = init;
254![](/Images/OutliningIndicators/None.gif)
255![](/Images/OutliningIndicators/None.gif)
其余的大家可以详细看一下包中的相关内容即可, 这里就不再多说了:)
好了,主要是东西就先交待到这里了。如果大家有什么问题或建议,欢迎与我交流,我的邮件是daizhj@discuz.com,
daizhj617595@126.com
下载地址:/Files/daizhj/navmenu.rar
关键字: .net, 控件, navmenu, 导航, control, discuz, discuz!nt, discuznt, 代震军, daizhj