CSS 控制項介面卡工具包新版發布

2021-04-09 04:23:04 字數 4797 閱讀 4744

【原文發表日期】friday, september 08, 2006 6:53 pm

在css控制項介面卡第一次發行時,我曾寫帖子說明過,這些控制項介面卡使用了asp.net 2.0中乙個新的內建的擴充套件機制,叫做「控制項介面卡(control adapters)」。控制項介面卡允許你將其接入(plug-in)任何asp.net 伺服器控制項,然後它就會覆蓋,修改或細調( tweak)那個控制項的顯示輸出邏輯。

控制項介面卡很酷的地方是,它們不要求頁面開發人員對乙個新的控制項程式設計,或修改控制項程式設計模型的semantics,即,跟以前一樣,你仍舊使用同樣的控制項屬性,方法,事件和模板。建造頁面的開發人員可以完全忘卻使用了控制項介面卡,控制項介面卡模型使得註冊和封裝這樣的支援非常乾淨。

快速入門示範

在免費的visual web developer或visual studio 2005中使用css控制項介面卡工具包,按下列步驟做:

第一步:安裝css控制項介面卡工具包:  

在visual web developer或vs 2005中,在選單裡選擇檔案->新**。這會開啟「新**」對話方塊。選擇你的程式語言,然後選擇新安裝的「css友好**(css friendly web site)」專案模板:

第三步:試一些css樣式控制項例子:

要看控制項介面卡是如何改變伺服器控制項的標識的話,研究一下預設新增到新專案中的walkthrough子目錄

例如,在下圖中,******menu.aspx網頁靜態地定義了乙個選單控制項,該控制項連到了乙個onclick事件處理方法(或者,你也可以使用導航直接轉到乙個特定的網頁去):

<

asp:menu

id="entertainmentmenu"

runat

="server"

orientation

="horizontal"

onmenuitemclick

="menu_onclick"

cssselectorclass

="******entertainmentmenu">

<

items

>

<

asp:menuitem

text

="music">

<

asp:menuitem

text

="classical"

/>

<

asp:menuitem

text

="rock">

<

asp:menuitem

text

="electric"

/>

<

asp:menuitem

text

="acoustical"

/>

asp:menuitem

>

<

asp:menuitem

text

="jazz"

/>

asp:menuitem

>

<

asp:menuitem

text

="movies"

selectable

="false">

<

asp:menuitem

text

="action"

/>

<

asp:menuitem

text

="drama"

/>

<

asp:menuitem

text

="musical"

/>

asp:menuitem

>

items

>

asp:menu

>

在code-behind裡,menu_onclick事件的編碼是象這樣的:

public sub 

menu_onclick(

byval 

sender 

as object

, byval 

e as 

menueventargs)

messagelabel.text 

= "you selected " 

& e.item.text & 

"."e.item.selected 

= true

end sub

在執行時,css控制項介面卡會導致選單輸出使用了和元素的css樣式化了的的標識,而不是**,當我們應用乙個css樣式表到頁面時,我們將得到乙個好看的分層的下拉式選單:

在看這些樣本例子時,你也許要看一下checkboxtreeview 這個例子。它示範了如何用css來樣式化控制項以使用行內( inline)的核取方塊:

那麼css控制項介面卡是如何工作的呢?

你可以原本不動地使用這些控制項介面卡類,不需要改變編碼,就能得到與css友好的輸出,或者你可以對它們進行細調,假如你需要對顯示輸出做任意定製的話。

<

browsers

>

<

browser

refid

="default">

<

controladapters

>

<

adapter

controltype

="system.web.ui.webcontrols.menu"

adaptertype

="cssfriendly.menuadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.treeview"

adaptertype

="cssfriendly.treeviewadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.detailsview"

adaptertype

="cssfriendly.detailsviewadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.formview"

adaptertype

="cssfriendly.formviewadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.datalist"

adaptertype

="cssfriendly.datalistadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.gridview"

adaptertype

="cssfriendly.gridviewadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.changepassword"

adaptertype

="cssfriendly.changepasswordadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.login"

adaptertype

="cssfriendly.loginadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.loginstatus"

adaptertype

="cssfriendly.loginstatusadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.createuserwizard"

adaptertype

="cssfriendly.createuserwizardadapter"

/>

<

adapter

controltype

="system.web.ui.webcontrols.passwordrecovery"

adaptertype

="cssfriendly.passwordrecoveryadapter"

/>

controladapters

>

browser

>

browsers

>

如果需要,你可以針對不同的瀏覽器定製不同的控制項介面卡,或者定義這些控制項介面卡為「預設(default)」,這樣就會對訪問你的應用的所有的瀏覽器都預設應用這些介面卡。

做完這些配置後,就算搞定了,之後,你就可以使用標準的css樣式表來定製所有的樣式資訊了。

在這裡我要提起russ和heidi,為他們在建立css 控制項介面卡和樣本例子方面的出色工作表示特別的感謝!

謝謝,scott

標籤:asp.net, .net, tips and tricks

(思歸譯)

發表於 2023年9月10日 3:20

介面卡模式 預設介面卡,類介面卡,物件介面卡

模式思想 改變乙個類的對外介面 增加或減少 以滿足不同外部呼叫者的需求 角色成員 目標介面 target 客戶所期待的介面。目標可以是具體的或抽象的類,也可以是介面。需要適配的類 adaptee 需要適配的類或適配者類。介面卡 adapter 通過包裝乙個需要適配的物件,把原介面轉換成目標介面。適配...

介面卡模式(類介面卡 物件介面卡)

做個筆記 引用 public inte ce usb public inte ce psp public class usber implements usb 類介面卡 psp適用usb介面 public class usbadapter extends usber implements psp 物...

STL介面卡 函式介面卡

有時候需要對內建函式物件返回值進行進一步的簡單計算,或者填上多餘的引數,不能直接代入演算法。函式介面卡實現了這一功能,函式介面卡是將一種函式物件轉化為另一種符合要求的函式物件。函式介面卡可以分為4個大類 繫結介面卡 組合介面卡 指標函式介面卡和成員函式介面卡。需求 在遍歷容器的時候,將容器中的值全部...