使用皮肤文件

这年头,人们的需求真是层出不穷啊,从最初的静态页到现在的动态页面,进而现在又出来了什么无刷新啊,网站皮肤啊,个性化网页啊等等的,这么些个东东的,速度真是太快了,让我们这些人都快有点跟不上了,可是没办法呀,赶快跟吧,要不然就得落后了!^_^
这不,最近做一个电子商务的项目,在里面就应用了AJAX、网站皮肤、WebParts这些个东东,下面就是我使用了Theme/Skin之后的一点小结,仅供大家参考,希望对大家有所帮助。
利用Themes我们可以很容易的更改控件、页面的风格,而不需要修改我们的代码和页面文件。那么我们就先来看一下这Theme/Skin文件是怎么样创建的吧。Themes文件单独的放在1个App_Themes文件夹下面,与你的程序是完全分开的,使之更容易管理。
具体方法如下:项目点右键,选择“添加ASP.NET文件夹”下的“主题”,再右键点添加新项,选择“外观文件(skin)”
接下来我们来看一下它具体是怎么用的,好的不着急,且听我慢慢道来。。。
一、我们先来看一下简单的应用
1、编写.Skin文件
skin1.skin
< asp:Label Font - Bold = " true "  ForeColor = " Red "  runat = " server "   />

2、将写好的skin文件应用到aspx页面中
.aspx页面

< %@ Page Language = " vb "  Theme = " default "  % >  
  
< !DOCTYPE html  PUBLIC   " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >  
  
< html xmlns = " http://www.w3.org/1999/xhtml " >  
  
< head id = " Head1 "  runat = " server " >  
   
< title > Page  with  Example Theme Applied </ title >  
  
</ head >  
  
< body >  
   
< form id = " form1 "  runat = " server " >  
   
< asp:Label ID = " Label1 "  runat = " server "  Text = " Hello 1 "   />< br  />  
   
< asp:Label ID = " Label2 "  runat = " server "  Text = " Hello 2 "   />< br  />  
   
</ form >  
  
</ body >  
  
</ html >

可以看到我们在.aspx并没有写Label的样式,但运行后发现label上的字都变成了粗体红色了,这就是最简单的一个使用Theme的例子。

上面的这个方法是在项目的一个页面上应用Theme,如果要想在项目的所有页面上都应用该样式,那就这样做:
在web.config中的<system.web>节下加上句<pages theme="..."/>就可以,试试吧!
二、我们再来看一下其稍微复杂一点的应用
1、有时候就关是上面这种简单的应用满足不了我们的要求,我们想让页面上的同一控件应用不同的样式,那怎么来做呢,我们先来看个例子:
skin2.skin

< asp:label runat = " server "  font - bold = " true "  forecolor = " Red "   />  
< asp:label runat = " server "  SkinID = " Blue "  font - bold = " true "  forecolor = " blue "   />

.aspx页面

< %@ Page Language = " vb "  Theme = " default "  % >  
  
< !DOCTYPE html  PUBLIC   " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >  
  
< html xmlns = " http://www.w3.org/1999/xhtml " >  
  
< head id = " Head1 "  runat = " server " >  
   
< title > Page  with  Example Theme Applied </ title >  
  
</ head >  
  
< body >  
   
< form id = " form1 "  runat = " server " >  
   
< asp:Label ID = " Label2 "  runat = " server "  Text = " Hello 2 "  SkinID = " Blue "   />< br  />  
   
< asp:Label ID = " Label3 "  runat = " server "  Text = " Hello 3 "   />< br  />  
   
</ form >  
  
</ body >  
  
</ html >

在家注意了,我呢在skin文件中其中一个label的样式里加了SkinID="...",在.aspx页面的其中一个Label控件里面也加上SkinID="...",这样的话,相应的样式就应用到指定的控件上了。运行后就会发现2个label显示的风格不一样了。
2、下面再来看个例子:
skin1.skin

< asp:Label Font - Bold = " true "  ForeColor = " Red "  runat = " server "   />

.aspx页面

< %@ Page Language = " vb "  Theme = " default "  % >  
  
< !DOCTYPE html  PUBLIC   " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >  
   
  
< html xmlns = " http://www.w3.org/1999/xhtml " >  
  
< head id = " Head1 "  runat = " server " >  
  
</ head >  
  
< body >  
   
< form id = " form1 "  runat = " server " >  
   
< asp:Label ID = " Label1 "  runat = " server "  Text = " Hello 1 "   />< br  />  
   
< asp:Label ID = " Label2 "  runat = " server "  Text = " Hello 2 "  ForeColor = " blue "   />  
   
</ form >  
  
</ body >  
  
</ html >

运行结果:所有的label的forecolor都为red。
那么我们如果想要上面的那个页面里面的Label2的ForeColor为blue的话,这时候我们就要再Page标签里用这么个东东:StyleSheetTheme="..."
使用<%@ Page StyleSheetTheme="..." %>应用theme是不会覆盖你在aspx文件中写的属性style
说到这里,我们就要来看一下这个Theme使用的优先级了:
  a、StyleSheetTheme引用的风格
  b、代码设定的控件属性(覆盖StyleSheetTheme)
  c、Theme引用的风格(覆盖前面2个)
三、我们再来看一下怎么样实现动态换肤,从而实现页面的个性化
下面就介绍怎么在后台代码中动态的引用theme来解决上面的情况,theme必须在page被请求的最早期就应用上,所以我们必须在Page_PreInit事件中写代码,代码很简单,就一句:Page.Theme = "..."

页面执行的时候,取得所保存的主题:

protected   sub Page_PreInit(object sender, EventArgs e)
  
    
if (Session["Theme"is nothingthen
    
      
' No theme has been chosen. Choose a default
      ' (or set a blank string to make sure no theme is used).
      Page.Theme = ""
    
    
else
    
      Page.Theme 
= ctype(Session["Theme"],string)
    
  
end sub

主题改变的时候,应用它并保存:

protected   sub cmdApply_Click(object sender, EventArgs e)
  
    
' Set the chosen theme.
    Session["Theme"= lstThemes.SelectedValue

    
' Refresh the page.
    Server.Transfer(Request.FilePath)

  
end sub

去除主题的应用:

protected   sub cmdClear_Click(object sender, EventArgs e)
 
 
' Set the chosen theme.
 Session["Theme"= ""

 
' Refresh the page.
 Server.Transfer(Request.FilePath)
 
end sub

上面呢我们是将主题保存在Session中,也可以保存在数据库中,那么应该也可以保存在Profile中了!

四、上面说了这么多,总结一下主要的也就是这么几句话:
  a、页面里相同的控件使用不同的样式:在该控件后面加skinID

  b、把定义好的theme应用到整个页面:在该页的Page页签里加上属性theme=“theme名称”

  c、把定义好的theme应用到整个站点:在web.config文件system.web的配置节中加上<pages theme="theme名称">

  d、动态的更换站点的样式(主题、皮肤):在Page_PreInit事件中写代码,Page.Theme = "...";

  e、控件中应用样式的优先级:a、StyleSheetTheme引用的风格[优先级最低]
 
                           b、代码设定的控件属性(覆盖StyleSheetTheme)
 
                           c、Theme引用的风格(覆盖前面2个) [优先级最高]

  f、让某个控件不应用theme里面定义的风格:更改属性EnableTheming=false即可


好了,这个话题就先说到这,谢谢光临,再见!^_^

来自 http://blog.csdn.net/wxm0930/archive/2006/10/11/1330464.aspx

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页是Web应用程序最常用到的功能之一,在ASP.NET,虽然自带了一个可以分页的DataGrid(asp.net 1.1)和GridView(asp.net 2.0)控件,但其分页功能并不尽如人意,如可定制性差、无法通过Url实现分页功能等,而且有时候我们需要对DataList和Repeater甚至自定义数据绑定控件进行分页,手工编写分页代码不但技术难度大、任务繁琐而且代码重用率极低,因此分页已成为许多ASP.NET程序员最头疼的问题之一。 AspNetPager针对ASP.NET分页控件的不足,提出了与众不同的解决asp.net分页问题的方案,即将分页导航功能与数据显示功能完全独立开来,由用户自己控制数据的获取及显示方式,因此可以被灵活地应用于任何需要实现分页导航功能的地方,如为GridView、DataList以及Repeater等数据绑定控件实现分页、呈现自定义的分页数据以及制作图片浏览程序等,因为AspNetPager控件和数据是独立的,因此要分页的数据可以来自任何数据源,如SQL Server、Oracle、Access、mysql、DB2等数据库以及XML文件、内存数据或缓存的数据、文件系统等等。 AspNetPager 7.2 版发布 新增属性 PagingButtonLayoutType,可设置分页导航元素(数字页索引、上页、下页、首页和尾页)的布局方式,该属性值是一个PagingButtonLayoutType枚举,通过设置该属性为PagingButtonLayoutType.UnorderedList或PagingButtonLayoutType.Span,允许将这些分页导航元素包含在 与或与标签之间,以便于为这些分页元素应用CSS样式。 新增 PagingButtonClass 与 PagingButtonStyle 属性,可以单独为分页导航按钮(数字页索引、上页、下页、首页和尾页)设置CSS样式; 新增 FirstLastButtonClass 与 FirstLastButtonStyle 属性,可以单独为首页和尾页分页导航按钮设置CSS样式,如果该属性未设置,但指定了PagingButtonClass 与 PagingButtonStyle 属性的值,则首页和尾页按钮样式将使用 PagingButtonClass 与 PagingButtonStyle 属性指定的样式; 新增 NextPrevButtonClass 与 NextPrevButtonStyle 属性,可以单独为上页和下页分页导航按钮设置CSS样式,如果该属性未设置,但指定了PagingButtonClass 与 PagingButtonStyle 属性的值,则上页和下页按钮样式将使用 PagingButtonClass 与 PagingButtonStyle 属性指定的样式; 新增 MoreButtonClass 与 MoreButtonStyle 属性,可以单独为更多页(...)分页导航按钮设置CSS样式,如果该属性未设置,但指定了PagingButtonClass 与 PagingButtonStyle 属性的值,则上页和下页按钮样式将使用 PagingButtonClass 与 PagingButtonStyle 属性指定的样式; 新增属性 ShowMoreButtons ,可以指定是否显示更多页按钮; 新增属性 CurrentPageButtonPosition ,可设置在每次分页后,当前页数字索引在所有的数字页索引的显示位置,该属性值是一个PagingButtonPosition枚举,对应的值及说明如下: Beginning:当前页数字索引总是显示在所有数字页索引的最前面; End:当前页数字索引总是显示在所有数字页索引的最后面; Center:当前页数字索引总是显示在所有数字页索引的间; Fixed:默认值,固定不变; 控件的CssClass属性仅应用于控件的窗口元素(div),将不再应用于下属分页元素; 废止属性CenterCurrentPageButton,可以用CurrentPageButtonPosition属性取代; 修改CurrentPageIndexn属性,允许在程序任何地方以编程方式设置CurrentPageIndex的值来动态指定当前页,直接设置该属性的值时将同时引发PageChanging和PageChanged 事件,实现和点击分页按钮一样的分页功能; 修正了7.1版设置SubmitButtonImageUrl属性后,Postback回发分页方式情况下点击数字页索引按钮不引发分页事件的bug; 修正了使用Url分页时,如果页面上没有服务器端form控件时无法注册客户端脚本的bu
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值