1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
---
title: Wiązania XBL
slug: Web/CSS/Na_początek/Wiązania_XBL
tags:
- 'CSS:Na_początek'
translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets
---
<p>
</p><p>Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia.
</p><p>Wykorzystasz te techniki w przykładowej demonstracji.
</p>
<h3 id="Informacja:_Wi.C4.85zania_XBL" name="Informacja:_Wi.C4.85zania_XBL"> Informacja: Wiązania XBL </h3>
<p>Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu.
</p><p>Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do <i>przed</i> i <i>za</i> wybranym elementem.
</p><p>Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: <i>XBL</i> (Język Wiązań XML).
Możesz używać XBL-a do wiązania wybranych elementów:
</p>
<ul><li>arkuszy stylów,
</li><li>zawartości,
</li><li>właściwości i metod,
</li><li>uchwytów zdarzeń.
</li></ul>
<p>Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać.
</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
<caption>Więcej szczegółów
</caption><tbody><tr>
<td> Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o <a href="pl/XBL">XBL</a> na tym wiki.
</td></tr></tbody></table>
<h3 id="Zadanie:_Demonstracja_XBL-a" name="Zadanie:_Demonstracja_XBL-a"> Zadanie: Demonstracja XBL-a </h3>
<p>Stwórz nowy dokument HTML, <code>doc6.html</code>.
Skopiuj i wklej do niego poniższy kod:
</p>
<div style="width: 48em;"><pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
</HEAD>
<BODY>
<H1>XBL demonstration</H1>
<DIV id="square">Click Me</DIV>
</BODY>
</HTML>
</pre></div>
<p>Stwórz nowy plik CSS, <code>style6.css</code>.
Ten arkusz stylów zawiera style dokumentu.
Skopiuj i wklej do niego poniższy kod:
</p>
<div style="width: 48em;"><pre>/*** XBL demonstration ***/
#square {
-moz-binding: url("square.xbl#square");
}
</pre></div>
<p>Stwórz nowy plik tekstowy, <code>square.xbl</code>.
Ten plik zawiera wiązanie XBL.
Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:
</p>
<div style="width: 48em; height: 12em; overflow: auto;"><pre><?xml version="1.0"?>
<!DOCTYPE bindings>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="square">
<resources>
<stylesheet src="bind6.css"/>
</resources>
<content xmlns="http://www.w3.org/1999/xhtml">
<div anonid="square"/>
<button anonid="button" type="button">
<xbl:children/>
</button>
</content>
<implementation>
<field name="square"><![CDATA[
document.getAnonymousElementByAttribute(this, "anonid", "square")
]]></field>
<field name="button"><![CDATA[
document.getAnonymousElementByAttribute(this, "anonid", "button")
]]></field>
<method name="doDemo">
<body><![CDATA[
this.square.style.backgroundColor = "#cf4"
this.square.style.marginLeft = "20em"
this.button.setAttribute("disabled", "true")
setTimeout(this.clearDemo, 2000, this)
]]></body>
</method>
<method name="clearDemo">
<parameter name="me"/>
<body><![CDATA[
me.square.style.backgroundColor = "transparent"
me.square.style.marginLeft = "0"
me.button.removeAttribute("disabled")
]]></body>
</method>
</implementation>
<handlers>
<handler event="click" button="0"><![CDATA[
if (event.originalTarget == this.button) this.doDemo()
]]></handler>
</handlers>
</binding>
</bindings>
</pre></div>
<p>Stwórz nowy plik CSS, <code>bind6.css</code>.
Ten arkusz stylów zawiera style do wiązań.
Skopiuj i wklej do niego poniższy kod:
</p>
<div style="width: 48em;"><pre>/*** XBL demonstration ***/
[anonid="square"] {
width: 20em;
height: 20em;
border: 2px inset gray;
}
[anonid="button"] {
margin-top: 1em;
padding: .5em 2em;"
}
</pre></div>
<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk.
</p><p>To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji.
Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku:
</p>
<table>
<tbody><tr>
<td style="padding-right: 2em;">
<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
<tbody><tr>
<td><p><b>XBL demonstration</b></p>
<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;">
<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
</div></div></td></tr></tbody></table>
</td><td>
<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
<tbody><tr>
<td><p><b>XBL demonstration</b></p>
<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;">
<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
</div></div></td></tr></tbody></table>
</td></tr></tbody></table>
<p>Uwagi dotyczące demonstracji:
</p>
<ul><li>Dokument HTML posiada odnośniki do arkusza stylów, ale także do pliku JavaScript.
</li><li>Dokument nie posiada żadnego przycisku. Posiada jedynie tekst, który pojawi się na nim. Przycisk jest dodawany przez wiązanie.
</li><li>Arkusz stylów dokumentu posiada odnośnik do wiązania.
</li><li>Wiązanie ma odnośnik do własnego arkusza stylów i własną treść oraz kod JavaScript. Wiązanie zawiera własną zawartość.
</li></ul>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
<caption>Wyzwanie
</caption><tbody><tr>
<td> Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor.
<p>Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość.
</p>
</td></tr></tbody></table>
<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4>
<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>.
</p><p>W tej demonstracji obiekt square oraz przycisk tworzą kompletną <i>kontrolkę</i>, która działa wewnątrz dokumentu HTML.
</p><p>Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika.
Demonstruje to następna strona:
<b><a href="pl/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b>
</p>{{ languages( { "en": "en/CSS/Getting_Started/XBL_bindings", "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pt": "pt/CSS/Como_come\u00e7ar/XBL_bindings" } ) }}
|
