今天在公司接到一项任务,主要是做一个导航菜单,菜单分横纵结构,横向主要显示网站中所分大类,纵向主要显示大类中的小类,而纵向菜单是用TreeView来实现的,当TreeView中有很多的项时,可能会使页面走形,而公司要求是页面大小要固定的情况下实现这些功能。这种结构在很多情况下都是通过框架来实现的,我想了想,框架毕竟是需要连接框架所包含的内容页的,这可能会影响到网页打开的速度。如是我想能否去除一贯做法,提高我们的网页加载速度呢?
我想到了用DIV来实现,我想将TreeView控件放置到DIV中,当项到达一定的高度时DIV中会自动出现滚动条,但DIV中是没有这个属性的,怎样才能实现这一功能呢?如是我想到可以利用CSS样式来控制DIV的样式,这样可能会实现。如是我在DIV中添加了如下样式。经测试后成功了。
<
div
style
="PADDING-RIGHT: 10px;
OVERFLOW-Y: auto; PADDING-LEFT: 10px;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 200px;
SCROLLBAR-SHADOW-COLOR: #919192; COLOR: blue;
SCROLLBAR-3DLIGHT-COLOR:#ffffff; LINE-HEIGHT: 100%;
SCROLLBAR-ARROW-COLOR: #919192; PADDING-TOP: 0px;
SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: 宋体;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; LETTER-SPACING: 1pt; HEIGHT: 500px; TEXT-ALIGN: left; background-repeat: no-repeat;" >
< asp:ImageButton ID ="imgbtnControl" runat ="server" Height ="25px" ImageUrl ="~/Images_20.gif"
OnClick ="imgbtnControl_Click" Width ="90%" />
< input id ="Button2" type ="button" value ="button" runat ="server" onserverclick ="Button2_ServerClick" />
< asp:TreeView ID ="TreeView2" runat ="server" Font-Size ="9pt" ForeColor ="Black" ShowLines ="True" >
< HoverNodeStyle Font-Size ="9pt" ForeColor ="Red" />
</ asp:TreeView >
</ div >
OVERFLOW-Y: auto; PADDING-LEFT: 10px;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 200px;
SCROLLBAR-SHADOW-COLOR: #919192; COLOR: blue;
SCROLLBAR-3DLIGHT-COLOR:#ffffff; LINE-HEIGHT: 100%;
SCROLLBAR-ARROW-COLOR: #919192; PADDING-TOP: 0px;
SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: 宋体;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; LETTER-SPACING: 1pt; HEIGHT: 500px; TEXT-ALIGN: left; background-repeat: no-repeat;" >
< asp:ImageButton ID ="imgbtnControl" runat ="server" Height ="25px" ImageUrl ="~/Images_20.gif"
OnClick ="imgbtnControl_Click" Width ="90%" />
< input id ="Button2" type ="button" value ="button" runat ="server" onserverclick ="Button2_ServerClick" />
< asp:TreeView ID ="TreeView2" runat ="server" Font-Size ="9pt" ForeColor ="Black" ShowLines ="True" >
< HoverNodeStyle Font-Size ="9pt" ForeColor ="Red" />
</ asp:TreeView >
</ div >
高兴!!!