.png "Centrum skryptów - Systemy operacyjne")
Jak zastosować grafikę w wypunktowanej liście aplikacji HTA?
.png "Udostępnij na: Facebook")
Skrypciarze odpowiadają na Wasze pytania
Witamy w rubryce TechNet, w której Skrypciarze z firmy Microsoft odpowiadają na częste pytania dotyczące używania skryptów w administracji systemu. Jeśli macie jakieś pytania z tej dziedziny, zachęcamy do wysłania e-maila na adres: scripter@microsoft.com. Nie możemy zagwarantować odpowiedzi na każde otrzymane pytanie, ale staramy się jak możemy. |
.gif "Cześć Skrypciarze!")
Jak zastosować grafikę w wypunktowanej liście aplikacji HTA?
.jpg "Cześć Skrypciarze! Pytanie")
Cześć, Skrypciarze! Często przeglądając strony internetowe napotykamy się na witryny zawierające wypunktowane listy, w której jako punktory służą małe obrazki. Czy można zastosować tego rodzaju listę z obrazkami w aplikacji HTA?
-- JA
.jpg "Cześć Skrypciarze! Odpowiedź")
Cześć, JA. To, czy można zastosować grafikę w wypunktowanej liście aplikacji HTA zależy tylko i wyłącznie od nas samych. Jeżeli nie wierzymy, że nam się to uda, to po prostu się nie uda.
No chyba, że zastosujemy ten oto skrypt:
<html>
<head>
<style>
ul
{list-style-image: url("bullet.gif")}
</style>
</head>
<body>
<ul>
<li>This is the first item in the list.</li>
<li>This is the second item in the list.</li>
<li>This is the third item in the list.</li>
</ul>
</body>
</html>
Jak się okazuje, aby utworzyć wypunktowaną listę, w której jako punktorów użyjemy obrazków, należy zrobić dwie rzeczy. Na początek potrzebny nam obrazek, którego użyjemy jako punktora; w naszym wypadku będzie to obrazek o nazwie Bullet.gif, zapisany w tym samym folderze, co nasza aplikacja HTA. Po drugie, musimy utworzyć styl dla znacznika <UL>, czyli elementu tworzącego wypunktowaną listę. Może on wyglądać np. tak:
<style>
ul
{list-style-image: url("bullet.gif")}
</style>
Jak widać, utworzyliśmy tu globalny styl, który używa pliku Bullet.gif dla wszystkich wypunktowanych list znajdujących się w naszej HTA. W tym celu podajemy interesujący nas znacznik HTML <UL>, a następnie wartości właściwości, które chcemy do niego przypisać. W tym wypadku, przypisujemy do atrybutu list-style-image wartość odpowiadającą parametrowi url, a następnie lokalizację pliku graficznego.
Możecie wierzyć albo nie, to nam wystarczy. Po uruchomieniu aplikacji HTA, wszystkie nasze wypunktowane listy będą używać pliku Bullet.gif jako punktorów:
.jpg)
Nie myśleliśmy o tym wcześniej: co, gdybyśmy chcieli zastosować różne style punktorów dla różnych list? Cóż, jednym ze sposobów na to jest zastosowanie tzw. stylu w linii zamiast stylu określonego globalnie. Spójrzmy np. na następujący kod aplikacji HTA; w tym wypadku mamy jedną wypunktowaną listę, używającą jako punktorów plików graficznych, oraz listę ze standardowymi punktorami:
<html>
<body>
<ul style="list-style-image: url('bullet.gif')" >
<li>This is the first item in the list.</li>
<li>This is the second item in the list.</li>
<li>This is the third item in the list.</li>
</ul>
<p>
<ul>
<li>This is the first item in the list.</li>
<li>This is the second item in the list.</li>
<li>This is the third item in the list.</li>
</ul>
</body>
</html>
Zauważmy, że tym razem nie określiliśmy stylu globalnego. Zamiast tego, podczas dodawania wypunktowanej listy do aplikacji HTA, określiliśmy wartość dla atrybutu list-style-image:
<ul style="list-style-image: url('bullet.gif')" >
Porównajmy to ze składnią składni drugiej listy wypunktowanej w aplikacji HTA:
Ponieważ nie ma tutaj parametrów stylu, a żaden globalny styl nie został określony dla list wypunktowanych, otrzymujemy domyślny format punktorów. To z kolei oznacza, że nasza aplikacja HTA wygląda następująco:
.jpg)
Używając stylu w linii można uzyskać tyle różnych rodzajów wypunktowanych list, ile – no właśnie – mamy tych list.
Jeżeli nie chcemy bawić się w grafikę, możemy zastosować także atrybut list-style-type w celu zmodyfikowania wyglądu naszej wypunktowanej listy. Atrybut list-style-type przyjmuje następujące wartości:
| Wartość | Opis |
| disc | Domyślne – koła |
| circle | Okręgi |
| square | Kwadraty |
| decimal | 1, 2, 3, 4 i tak dalej |
| lower-roman | i, ii, iii, iv i tak dalej |
| upper-roman | I, II, III, IV i tak dalej |
| lower-alpha | a, b, c, d i tak dalej |
| upper-alpha | A, B, C, D i tak dalej |
| none | Brak oznaczenia |
I tak, przypuśćmy, że określamy nową listę wypunktowaną, używając takiej składni:
<ul style="list-style-type: 'lower-roman'">
Otrzymamy listę wyglądającą tak:
.jpg)
Wcale nieźle. Naprawdę.
Nawiasem mówiąc, atrybuty list-image-style oraz list-style-type to tylko dwa z wielu atrybutów dostępnych podczas używania kaskadowych arkuszy stylów (Cascading Style Sheets (CSS)). Więcej informacji znaleźć można w dokumentacji CSS Reference (j.ang.) w witrynie MSDN.
.gif){kind=icon} Do początku strony |