ASP.NET2.0中themes、Skins輕松實(shí)現(xiàn)網(wǎng)站換膚！ - BearRui(AK...

boxls 2010-06-02

展開(kāi)全文

ASP.NET2.0中themes、Skins輕松實(shí)現(xiàn)網(wǎng)站換膚！

可能有些朋友還不是很清楚themes、skins。下面先介紹下themes、skins.。

一、簡(jiǎn)介：
一看Themes、Skins這2名字就都知道是用來(lái)做什么的了吧，下面就說(shuō)下它是做什么的(怎么都知道了還說(shuō),~_~)，利用Themes我們可以很容易的更改控件、頁(yè)面的風(fēng)格，而不需要修改我們的代碼和頁(yè)面文件。
Themes文件被單獨(dú)的放在1個(gè)App_Themes文件夾下面，與你的程序是完全分開(kāi)的。

二、怎么使用Themes和Skins：
先看個(gè)非常簡(jiǎn)單的實(shí)例：

App_Themes\default\1.skin文件代碼:

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

default.aspx:文件代碼：

<%@ Page Language="C#" Theme="default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Page with Example Theme Applied</title>

</head>

<body>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />

<asp:Label ID="Label2" runat="server" Text="Hello 2" /><br />

</form>

</body>

</html>

可以看到我們?cè)赿efault.aspx并沒(méi)有寫(xiě)如何的控制style的代碼，但運(yùn)行取發(fā)現(xiàn)label上的字都變成了粗體紅色了，這就是1個(gè)最基本的theme例子。

App_Themes文件夾：
App_Themes文件夾位于程序的根目錄下，App_Themes下必須是Theme名稱(chēng)的子文件夾，子文件夾中可以包含多個(gè).skin和.css文件。下圖中建立2個(gè)Theme，名稱(chēng)分別為default和default2：

使用themes
1、在1個(gè)頁(yè)面中應(yīng)用Theme:
如果想在某1個(gè)頁(yè)面中應(yīng)用Theme，直接在aspx文件中修改<%@ Page Theme="..." %>，比如你想這個(gè)頁(yè)面應(yīng)用default2 theme，設(shè)置<%@ Page Theme="default2" %>就OK

2、在所有頁(yè)面應(yīng)用同1個(gè)Theme:
如果要在所有頁(yè)面上使用相同的Theme，在web.config中的<system.web>節(jié)點(diǎn)下加上句<pages theme="..."/>

3、讓控件不應(yīng)用Theme:
第1個(gè)例子中我們看到了2個(gè)Label的風(fēng)格都變了,就是說(shuō).skin文件中的風(fēng)格在頁(yè)面上所有Label都起作用了。但有時(shí)我們希望某1個(gè)Label不應(yīng)用.skin中的風(fēng)格，這時(shí)你只需設(shè)置Label的EnableTheming屬性為false的時(shí)候就可以了。
也許你還想不同的label顯示不同的風(fēng)格，你只需設(shè)置label的SkinID屬性就可以，見(jiàn)下面的實(shí)例：
App_Themes\default\1.skin

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

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

deafult.aspx

<%@ Page Language="C#" Theme="default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Page with Example Theme Applied</title>

</head>

<body>

<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>

運(yùn)行后就會(huì)發(fā)現(xiàn)2個(gè)label顯示的風(fēng)格不一樣了。

4、其他方法：
前面已經(jīng)說(shuō)了在aspx文件頭使用 <%@ Page Theme="..." %> 來(lái)使用theme，而用這個(gè)方法應(yīng)用theme中的風(fēng)格將會(huì)覆蓋你寫(xiě)在aspx中的控件屬性style。比如：
App_Themes\default\1.skin

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

default.aspx

<%@ Page Language="C#" Theme="default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br />

<asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" />

</form>

</body>

</html>

運(yùn)行結(jié)果，所有的label的forecolor都為red。

而使用<%@ Page StyleSheetTheme="..." %>應(yīng)用theme就不會(huì)覆蓋你在aspx文件中寫(xiě)的屬性style：

控件應(yīng)用style屬性的順序如下：
a、StyleSheetTheme引用的風(fēng)格
b、代碼設(shè)定的控件屬性(覆蓋StyleSheetTheme)
c、Theme引用的風(fēng)格(覆蓋前面2個(gè))

theme中包含CSS：
        theme中也可以使用.css文件,當(dāng)你把.css文件放在1個(gè)theme目錄下后,在用到了這個(gè)theme的頁(yè)面中自動(dòng)會(huì)應(yīng)用你的.css的

三、后臺(tái)代碼輕松為網(wǎng)站換府膚
        前面講的都是在aspx文件或web.config中應(yīng)用theme，而在blog這樣的每個(gè)用戶都有不同的skin的網(wǎng)站中用上面的方法來(lái)實(shí)現(xiàn)換skin顯然是不方便的。
       下面就介紹怎么在后臺(tái)代碼中動(dòng)態(tài)的引用theme來(lái)解決上面的情況，theme必須在page被請(qǐng)求的最早期就應(yīng)用上，所以我們必須在Page_PreInit事件中寫(xiě)代碼，代碼很簡(jiǎn)單，就1句：
        Page.Theme = "...";
這里我們只要從數(shù)據(jù)庫(kù)中去讀取每個(gè)用戶設(shè)置的不同theme名就可以輕松實(shí)現(xiàn)每個(gè)用戶都有不同的skin了。

------------------------------------------
以上都是個(gè)人的看法和體會(huì)，如有不妥處，還請(qǐng)大家多多指點(diǎn)，謝謝！

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： boxls > 《themes》

舉報(bào)/認(rèn)領(lǐng)