|
|
ASP.NET QuickStart Príručka
Aplikácia štýlov na ovládacie prvky
Web je flexibilné prostredie pre tvorbu používateľských rozhraní schopné extrémnych odlišností vo výzore jednotlivých stránok.
Širokospektrálne prijatie kaskádových štýlov (CSS) je do značnej miery zodpovedné za bohaté dizajny, ktoré môžeme na webe nájsť. Všetky ovládacie prvky ASP.NET (HTML alebo Web server prvky)
boli navrhnuté s ohľadom na poskytnutie prvotriednej podpory pre kaskádové štýly. Sekcia rozoberá, ako použiť štýly v súčinnosti
so serverovými ovládacími prvkami a ukazuje veľmi jemnú kontrolu nad vzhľadom Webových formulárov, ktorú štýly ponúkajú.
Aplikácia štýlov na ovládacie prvky HTML
Štandardné značky HTML podporujú CSS prostredníctvom atribútu style, ktorý môže byť nastavený na bodkočiarkou oddelený list párov
atribút/hodnota. Pre viac informácií o CSS atribútoch podporovaných prehliadačom Internet Explorer, pozrite odkaz: Referenčná príručku atribútov CSS .
Všetky ovládacie prvky, ktoré prináša ASP.NET akceptujú štýly rovnakým spôsobom ako štandardné značky HTML. Nasledujúca ukážka
zobrazuje množstvo štýlov aplikovaných na rôzne ovládacie prvky HTML. Ak si prezriete zdrojový kód vrátený klientovi, uvidíte, že štýly sú odovzdané prehliadaču pri renderovaní ovládacieho prvku.
VB Style1.aspx
CSS tiež definuje atribút class, ktorý môže byť nastavený na definíciu štýlu obsiahnutú v sekcii <style>...</style> dokumentu.
Atribút class uľahčuje aplikovanie štýlu, ktorý bol definovaný len raz na viaceré značky bez potreby opätovného definovania štýlu.
Štýly na HTML ovládacích prvkoch servera a použitie atribútu class je ukázané v nasledujúcom príklade.
VB Style2.aspx
Keď prebieha analýza a preklad ASP.NET stránky, informácia o štýle sa vkladá do vlastnosti Style (typu CssStyleCollection)
triedy System.Web.UI.HtmlControls.HtmlControl. Vlastnosť je reprezentovaná ako slovník, ktorý vystavuje štýly ovládacieho prvku ako
reťazcami indexovanú množinu hodnôt pre každý atribút štýlu. Na príklad, môžete použiť nasledujúci kód na nastavenie a následné
získanie atribútu width štýlu na ovládacom prvku HtmlInputText servera.
<script language="VB" runat="server" >
Sub Page_Load(Sender As Object, E As EventArgs)
MyText.Style("width") = "90px"
Response.Write(MyText.Style("width"))
End Sub
</script>
<input type="text" id="MyText" runat="server"/>
VB
Nasledujúci príklad ukazuje ako programátorsky nastavovať štýl pre ovládací prvok HTML použitím kolekcie Style.
VB Style3.aspx
Aplikovanie štýlov na ovládacie prvky servera
Ovládacie prvky servera poskytujú dodatočnú úroveň podpory štýlov pridaním niekoľkých silno-typovaných vlastností pre bežne používané štýlové
nastavenia akými sú farba pozadia a popredia, názov fontu, veľkosť, šírka výška ... Štýlové vlastnosti reprezentujú podmnožinu
nastavení štýlu prístupných v HTML a sú reprezentované ako vlastnosti vystavené priamo základnou triedou
System.Web.UI.WebControls.WebControl. Výhoda použitia uvedených vlastností spočíva v typovej kontrole v čase kompilácie a v doplňovaní
zdrojového kódu vo vývojových prostriedkoch akými sú Microsoft Visual Studio .NET.
Ďalší príklad ukazuje ovládací prvok WebCalendar na ktorom sú aplikované niektoré štýly (kalendár na ktorý nie sú aplikované štýly je v ukážke zahrnutý pre názornosť).
Všimnite si, že keď nastavujete vlastnosť, ktorá nie je triedneho typu, ako napr. Font, musíte použiť syntax
PropertyName-SubPropertyName .
VB Style4.aspx
Priestor mien System.Web.UI.WebControls zahŕňa základnú triedu Style, ktorá obaľuje základné štýlové atribúty
(dodatočné štýlové triedy, ako TableStyle a TableItemStyle sú odvodené od triedy Style).
Veľa serverových ovládacích prvok vystavujú vlastnosti uvedeného typu pre určenie štýlu vlastných renderovaných elementov.
Napríklad prvok WebCalendar vystavuje veľa štýlových vlastností: DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle a
NextPrevStyle. Môžete nastaviť individuálne vlastnosti uvedených štýlov použitím syntaxe
PropertyName-SubPropertyName tak, ako je ukázané v nasledujúcom príklade.
VB Style5.aspx
Mierne odlišná syntax umožňuje aby bola každá vlastnosť odvodená od Style deklarovaná ako detský element umiestnený vo vnútri značiek serverových ovládacích prvkov.
<ASP:Calendar ... runat="server">
<TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
BackColor="olivedrab" Height="50px" />
</ASP:Calendar>
Nasledujúci príklad ukazuje alternatívnu syntax, ktorá je funkčné ekvivalentná s predchádzajúcou.
VB Style6.aspx
Ako na ovládacie prvky HTML, tak aj na prvky webového servera môžete aplikovať štýly použitím definície CSS triedy. Bázová trieda WebControl vystavuje vlastnosť typu String nazvanú CssClass na nastavenie triedy štýlu:
VB Style7.aspx
Ak je na ovládacom prvku webového servera nastavený atribút, ktorý nekorešponduje so žiadnou silno-typovanou vlastnosťou, atribút a jeho
hodnota je uvedený v kolekcii Attributes ovládacieho prvku. Štandardne ovládacie prvky servera zobrazia atribúty uvedené v kolekcii
bez modifikácie a odovzdávajú ich v plnom znení prehliadaču ako atribúty HTML značiek. To znamená, že atribúty style a class môžu byť určené
priamo, bez použitia silno-typovaných vlastností. Aj keď spomenutý prístup vyžaduje znalosť samotného renderovania ovládacieho prvku, ide o
flexibilný spôsob aplikácie štýlov, ktorý otvára možnosti použitia vlastností CSS štýlov, ktoré nie sú prístupné pomocou vlastností.
Zadanie štýlu prostredníctvom kolekcie je užitočné aj pre štandardné vstupné ovládacie prvky formulárov tak, ako je ukázané v nasledujúcom príklade.
VB Style8.aspx
Štýly ovládacieho prvku webového servera môžu byť nastavené aj programátorsky použitím metódy ApplyStyle bázovej triedy WebControl.
<script language="VB" runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
Dim MyStyle As New Style
MyStyle.BorderColor = Color.Black
MyStyle.BorderStyle = BorderStyle.Dashed
MyStyle.BorderWidth = New Unit(1)
MyLogin.ApplyStyle (MyStyle)
MyPassword.ApplyStyle (MyStyle)
MySubmit.ApplyStyle (MyStyle)
End Sub
</script>
Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList>
VB
Nasledujúci príklad demonštruje vyššie uvedený kód.
VB Style9.aspx
|
|