翻译自:http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准的、有语意的HTML页面 CSS 样式表控制。
例如,Menu、TreeView等控件均将输出< table>标签,而基于Web标准中的“有语意的”这一条,显然应该选择<ul>标签。
而使用CSS Friendly Control Adapters 会将其转为使用嵌套的<ul>标签渲染,这被称为纯CSS menu(http://www.meyerweb.com/eric/css/edge/menus/demo.html).
而对于以前不支持CSS的旧式浏览器,可以通过在配置文件中设定不同版本的浏览器使用不同的 Control Adapters
来解决!这样对于PocketPC也能通过提供不同的Control Adapters来获得支持!

== 下载和安装 ==

访问站点:http://www.asp.net/cssadapters/,单击“download source”按钮,下载ASPNETCssFriendlyAdapters.vsi。
或者直接下载: http://download.microsoft.com/download/b/a/3/ba3aee5e-2e28-4056-9e71-036b2e7f58af/ASPNETCssFriendlyAdapters.vsi

该文件是一个 Visual Studio Content Installer 安装包,需要 Visual Web Developer  or Visual Studio 2005 方能运行解包。安装后将在你的Visual Studio中添加几个新的Web Site 模版。

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

== 使用 ==
进入 Visual Studio,选择 File -> New Web Site 菜单项,选择新加入的“ASP.NET CSS Friendly Web Site”模版,开始你自己的CSS样式表站点设计,或者
选择“Tutorial on ASP.NET CSS Friendly Control Adapters”模版建立教程站点,学习CSS Friendly sample adapters的功能。

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制
创建新站点后,你可以看看里面的readme.txt 文件,了解下注意事项。
利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

== 运行 ==

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

所有的adapted controls的例子放在页顶部的Exmaples菜单下面的,第一个就是被转换的<asp:menu>菜单控件例子:用嵌套的<ul>标签代替了不规范的<table>标签。

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

点击进入菜单控件例子页面,你能更清晰的看到转换前后有什么不同:


利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

每一个例子都可以通过设置在是否使用转化接头(Adapters)之间切换:

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

另外可以通过Theme Chooser在两个不同样式Theme(Basic, Enhanced)之间切换,样式文件在App_Themes中:

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

要联机查看每个例子的源程序,可以通过点击“view source code”按钮:

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

== 文件的组织 ==

 * 页面文件放在站点的根目录下面。
 * 专用代码放在App_Code\SiteSpecific 文件夹下,只对这个教程站点有用的,没有实用意义的。
 * CSS Friendly Control Adapters的源代码放在App_Code\Adapters下。
 * App_Themes: 存放了两个不同的Theme样式
 * bin目录下放的是一个显示高亮度语法的工具:Wilco Bauer's handy utility(http://www.wilcob.com/Wilco/Toolbox/SyntaxHighlighter.aspx)
 * App_data 存放的是某些例子使用的xml数据
 * CSS 目录,存放的是与Theme无关的,被Control Adapters使用的样式,这些样式包含的是插接的控件的behavior规范而不是界面表现。例如,对于pure css 菜单,有颜色,字体的界面规范;更重要的是还要有菜单如何工作的规范,比如如何显示菜单子项(当鼠标移上菜单的时候),如何隐藏菜单子项(当鼠标离开菜单的时候),这些CSS的通用规范被放于这个文件夹。旗下的子文件夹browser-specific包含了针对特定浏览器的CSS规范。
 * App_Browsers 目录,设置使用CSS Friendly Control Adapters 的浏览器,你可以设置成不管浏览器的类型版本如何,始终使用这些Adapters;也可以设置成只针对特定的浏览器以及特定的版本才使用。
 * Javascript目录,部分Control Adapters使用了一些JS代码实现,这些JS代码被存放于此。如果要改变该路径的名称,你需要在web.config文件中的appSettings节  添加/改变 CSSFriendly-JavaScript-Path 的值:<add key="CSSFriendly-JavaScript-Path" value="~/JavaScript" />
 * Membership 目录,演示了如何插接ASP.NET 2.0 的membership 控件。

每一个转换的CSS控件都有自己的样式表,例如:<asp:GridView> 控件 has a style sheet named GridViewSample.css。该教程站点包含了两个Theme样式:
Basic and Enhanced, 因此在 Basic 文件夹和 Enhanced 文件夹中均有 GridViewSample.css 文件。

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

本教程站点在 App_Browsers 目录下的配置的.browse文件为 CSSFriendlyAdapters.browser,它配置为默认使用 CSS Friendly Control Adapters,当然你页可以将refID 改为 IE6to9, Gecko, Opera8to9 等等。

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

运行了例子,了解了文件的组织和意义,现在该是创建自己的网站的时候。如何修改CSS改变控件的外观?
让我们从menu讲起,首先我们修改下当鼠标移动到菜单上的颜色,在VS中,打开 App_Themes\Basic\MenuExample.css.文件:

CSS

.PrettyMenu ul.AspNet-Menu li:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background:#4682B3;
}

将该颜色改成其它的值如 #27408B。保存,然后刷新菜单控件例子页面:

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

还需要改变的是 .skin 文件,当浏览器不使用转换件的时候,控件默认会用该文件,打开 App_Themes\Basic\Basic.skin 文件,修改菜单的 DynamicHoverStyle 中的颜色值:

利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制

=== 使用CSS转换件的空页面 ===

  <%@ Page Language="C# or VB" %>   
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" />
        </asp:MenuItem>
    </Items>
</asp:Menu>

CSS

 .SimpleEntertainmentMenu .AspNet-Menu-Selected
{
    border: solid 1px #00ff00 !important;
}

.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected
{
    border: solid 1px #ff0000 !important;
}

.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected
{
    border: solid 1px #0000ff !important;
}


相关文章:

  • 2021-12-10
  • 2022-01-18
  • 2021-09-14
  • 2022-12-23
  • 2022-12-23
  • 2021-07-01
猜你喜欢
  • 2021-07-03
  • 2021-12-16
  • 2021-05-23
  • 2021-12-12
  • 2021-08-19
  • 2021-11-12
  • 2021-10-06
相关资源
相似解决方案