基于CSS的服务器菜单控件开发.docVIP

基于CSS的服务器菜单控件开发 　　摘要：在很多B/S结构的开发项目中，经常要用到导航菜单。虽然微软的Visual Studio开发平台集成了菜单控件，但是其外观的可控性却不尽人意，所以许多大型网站采用了CSS（层级样式表）和脚本的方式，实现了绚丽的菜单效果。文中将根据实例，详细的介绍一款基于CSS的服务器菜单控件的设计思路和开发过程。 　　关键词：.NET；B/S；CSS；菜单控件 　　中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)22-5367-02 　　The Development of Menu Server Control Based on CSS 　　LIU Kun, WANG Qing-chen 　　(Automation Institute, Petrochemical Company of Petro China, Lanzhou 730060, China) 　　Abstract: In many projects based on B/S structure, the navigation menu often be used. Although Microsofts Visual Studio development platform integrates menu control, but the appearance of it is unsatisfactory, so many large websites using CSS (Cascading Style Sheet) and script to achieve a brilliant effect. In this paper, there will be a detailed description of a menu control based CSS design ideas and development process. 　　Key words: .NET; B/S; CSS; menu control 　　近年来，B/S结构的系统以其部署和应用方便性上的优势，越来越受到广大用户的青睐。一个成功的WEB项目，不但要满足用户在功能性、结构和效率上的需求，在美观和友好性上也要做足文章。导航菜单常见于各类网站中，恰当的使用，不但可以使页面整齐、规范，更增强了用户使用的方便性。随着项目开发的需要，微软的VS平台也加入了自己的菜单控件，使用起来非常方便。但是，其外观可控性不够灵活，满足不了美观上的需求。CSS，即层级样式表，通常用于对网页整体格式的控制，如果应用恰当，再结合脚本代码，可以实现各种各样的效果。那么是否可以做一个基于CSS的菜单控件，来满足我们的需求呢？下面将结合实例对一款基于CSS的服务器菜单控件的开发做一个分析和讲解。 　　1 控件设计与实现 　　根据需求，要实现的菜单效果为：顶级菜单横向列出，鼠标移动到顶级菜单项上时，下级菜单以列表的形式显示在顶级菜单项的下方。此外，鼠标移动到每个菜单项时要有加重显示的效果。如图1。 　　1.1 自定义服务器控件 　　服务器控件，顾名思义是运行于服务器端的控件。它的外观由客户端浏览器根据服务器返回的编译结果来进行处理，最终展现给用户。这种组件化的开发，为代码的封装和重用提供了足够的灵活性和可扩展性。VS开发平台提供了种类丰富的标准服务器控件，在这些控件不能够满足开发需求时，还可以创建完全由开发人员自行设计和开发的自定义服务器控件。自定义服务器控件与标准服务器控件相同，都是派生自命名空间System.Web.UI.WebControls[1]。开发人员可以通过自定义它的属性和方法，实现自己想要的结果。 　　在解决方案的项目上，右键添加新建项，在VC#项树形菜单中选择Web节点，找到ASP.NET 服务器菜单控件，输入控件名CustomerMenu.cs。点击添加按钮后，会生成默认的属性Text和RenderContents方法。由于菜单控件不需要Text属性，所以要将其相应的代码删除。增加MenuItems和RootPath属性，分别为菜单的数据源和菜单项的根路径。如图2。MenuItems根据需求不同可绑定到不同的数据源，在此不做详细说明。需要额外指出的是，属性上方的方括号里的内容为每个属性的特性，例如： Browsable即指是否在窗口中显示该属性，DefaultValue为属性的默认值，Description为属性的描述。 　　控件的属性定义完毕后，需要对RenderContents方法进行重写，以呈现控件标记中的内容。在呈现控件及其样式属性的开始标记之后，WebControl的Render方法将调用RenderConte