1 |
<?xml version="1.0" encoding="iso-2022-jp"?>
|
2 |
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
|
3 |
<head profile="http://suika.fam.cx/~wakaba/-temp/wiki/wiki?WikiHTMLMetaProfile">
|
4 |
<title>Mozilla $B$G4JC1$KMWAG$NH"$r0\F02DG=$K$9$k(B XBL $BItIJ(B</title>
|
5 |
<link rel="contents" href="#toc" title="$B$3$NJ8=qFb$NL\<!(B" />
|
6 |
<link rev="made" href="mailto:w@suika.fam.cx" />
|
7 |
<link rel="copyright" href="data:,Public%20Domain%2E" title="Public Domain." />
|
8 |
<meta name="author" content="$B<cMU(B" />
|
9 |
<meta name="keywords" content="Mozilla, HTML, XHTML, CSS, XML, XBL, drag, drop, element, box, -moz-binding, mouse, move, $B%I%i%C%0(B, $B%I%m%C%W(B, $BMWAG(B, $B%(%l%a%s%H(B, $B%\%C%/%9(B, $BH"(B, $B0\F0(B, $B%^%&%9(B, Firefox, WinIE, IE, Internet Explorer, HTC" />
|
10 |
<link rel="stylesheet" href="/www/style/html/xhtml" media="all" />
|
11 |
<style type="text/css" media="screen">
|
12 |
h1 {
|
13 |
display: block;
|
14 |
-moz-binding: url('http://suika.fam.cx/www/style/ui/drag.xbl#simple-drag');
|
15 |
behavior: url('http://suika.fam.cx/www/style/ui/drag.htc');
|
16 |
}
|
17 |
h1.DRAGABLE {
|
18 |
position: fixed;
|
19 |
top: 0.3em; left: 4em; right: 0.5em;
|
20 |
margin: 0;
|
21 |
cursor: move;
|
22 |
}
|
23 |
h1.DRAGABLE.MSIE {
|
24 |
position: absolute;
|
25 |
}
|
26 |
h1.DRAGING {
|
27 |
color: GrayText;
|
28 |
background-color: transparent;
|
29 |
}
|
30 |
</style>
|
31 |
</head>
|
32 |
<body>
|
33 |
<h1><span lang="en" xml:lang="en">Mozilla</span>
|
34 |
$B$G4JC1$KMWAG$NH"$r0\F02DG=$K$9$k(B <abbr lang="en" xml:lang="en">XBL</abbr>
|
35 |
$BItIJ(B</h1>
|
36 |
|
37 |
<div class="section" id="abstract">
|
38 |
<h2>$B35MW(B</h2>
|
39 |
|
40 |
<p><dfn><code class="file" lang="en" xml:lang="en">drag.xbl</code></dfn>$B$O!"(B
|
41 |
<span lang="en" xml:lang="en">Mozilla</span> $B$G(B
|
42 |
<abbr lang="en" xml:lang="en">HTML</abbr> $BJ8=q$rI=<($9$k:]$K!"(B
|
43 |
<!--<abbr lang="en" xml:lang="en">CSS</abbr>
|
44 |
$B$r;H$C$F(B-->$BFCDj$NMWAG$r%^%&%9$N%I%i%C%0$G1\Mw<T$,0\F02DG=$K$9$k$?$a$N(B
|
45 |
<abbr lang="en" xml:lang="en">XBL</abbr> $BItIJ$G$9!#(B
|
46 |
$BJ8=q$NCx<T$O<j7Z$KMWAG$r%I%i%C%02DG=$K$G$-$^$9!#(B</p>
|
47 |
</div>
|
48 |
|
49 |
<div class="section" id="introduction">
|
50 |
<h2>$B$O$8$a$K(B</h2>
|
51 |
|
52 |
<p><span lang="en" xml:lang="en">Web</span> $B$N%O%$%Q!<%F%-%9%HJ8=q$G$O!"(B
|
53 |
$B%5%$%HFb$dJ8=qFb$N0FFb$dJ8=q$NFbMF$K4X$9$kJd=u(B ($B>\:Y(B)
|
54 |
$B>pJs$J$I$N(B<q>$B=>(B</q>$B$H$J$kFbMF$,4^$^$l$F$$$k$3$H$,B?!9$"$j$^$9!#(B
|
55 |
<span lang="en" xml:lang="en">Web $B%V%i%&%6(B</span>$B$GJ8=q$rI=<($9$k;~$K$3$N$h$&$J>pJs$r>o;~I=<($7$F$*$$$?J}$,MxJX@-$,9b$$$3$H$b$"$j$^$9$,!"(B
|
56 |
$B$=$N$?$a$KK\J8$NI=<(NN0h$,69$^$C$?$j!"(B
|
57 |
$BK\J8$N>e$KHo$5$C$?$j$7$F!"$+$($C$F8+$K$/$/$J$k$3$H$b$"$j$^$9!#(B</p>
|
58 |
|
59 |
<p>$B$3$NLdBj$N0l$D$N2r7h:v$O!"J8=q$NJd=uE*$JMWAG$r%^%&%9$N%I%i%C%0$K$h$C$F0\F02DG=$H$9$k$3$H$G$9!#(B
|
60 |
$B0lHL$K%W%m%0%i%`$G$h$/;H$&5!G=$r=8$a$?%\%?%s$r%I%i%C%02DG=$J>.$5$JAk$KF~$l$F$*$/$H$$$&J}K!$O$h$/MQ$$$i$l$F$*$j!"(B
|
61 |
$B8+$?L\$5$(E,@Z$K@_7W$9$l$PMxMQ<T$bDq93$J$/MxMQ$9$k$3$H$,$G$-$k$O$:$G$9!#(B
|
62 |
$B$7$+$7!"8=:_J8=qFb$NMWAG$r%I%i%C%02DG=$K$9$k$?$a$NI8=`E*$JJ}K!$OB8:_$;$:!"(B
|
63 |
$BCx<T$,J8=q$4$H$K%9%/%j%W%H$rMQ$$$F<BAu$9$kI,MW$,$"$j$^$7$?!#(B</p>
|
64 |
|
65 |
<p><a href="http://www.mozilla.org/" xml:lang="en" lang="en">Mozilla</a>
|
66 |
<span class="weak">($B$H$$$&$+(B <span lang="en" xml:lang="en">Gecko</span>)</span>
|
67 |
$B$O!"(B <a href="http://www.w3.org/TR/xbl/" xml:lang="en" lang="en">XBL</a>
|
68 |
$B$H$$$&8@8l$r;H$C$FMWAG$NI=8=$r@)8f$G$-$^$9!#(B
|
69 |
<a href="http://www.w3.org/" xml:lang="en" lang="en"><abbr>W3C</abbr></a> $B$N(B
|
70 |
<abbr lang="en" xml:lang="en">CSS</abbr> $B?e=`(B 2 $B$G$OI=<($K$D$$$F$O4pK\E*$K(B
|
71 |
<q>$B@EE*(B</q>$B$J;XDj$7$+$G$-$^$;$s!#(B
|
72 |
$B$7$+$7(B <abbr lang="en" xml:lang="en">XBL</abbr> $B$HAH$_9g$o$;$k$3$H$K$h$j!"(B
|
73 |
$B>r7oH=CG$r4^$a$?$j1\Mw<T$NA`:n$K1~$8$?F0:n$r9T$C$?$j$9$k$3$H$,2DG=$K$J$j$^$9!#(B
|
74 |
<span class="weak">($B<B:]$K8=:_$N(B Mozilla $B$K$O!"0\F0J8;z(B
|
75 |
<span class="weak" lang="en" xml:lang="en">(marquee)</span> $B$,(B
|
76 |
<abbr lang="en" xml:lang="en">XBL</abbr> $B$r;H$C$F<BAu$5$l$F$$$^$9!#(B)</span></p>
|
77 |
|
78 |
<p><a href="http://suika.fam.cx/www/style/ui/drag.xbl" type="application/xml"><code xml:lang="en" lang="en" class="filename">drag.xbl</code></a>
|
79 |
$B$O!"MWAG(B
|
80 |
<span class="weak">($B$KBP1~$9$k(B<ruby><rb>$BH"(B</rb><rp>(</rp><rt xml:lang="en" lang="en">$B%\%C%/%9(B</rt><rp>)</rp></ruby>)</span>
|
81 |
$B$r1\Mw<T$,%^%&%9$N%I%i%C%0$K$h$j0\F02DG=$H$9$k$?$a$N(B
|
82 |
<abbr lang="en" xml:lang="en">XBL</abbr> $BItIJ$G$9!#(B
|
83 |
$BF1$8$3$H$O(B JavaScript $B$rJ8=q$KD>@\Kd$a9~$s$G$b<B8=$G$-$^$9(B
|
84 |
<span class="weak">($B$7<B:]$h$/;H$o$l$F$$$^$9(B)</span> $B$,!"(B
|
85 |
<abbr lang="en" xml:lang="en">XBL</abbr>
|
86 |
$B2=$7$F(B <abbr lang="en" xml:lang="en">CSS</abbr> $B$rDL$7$F;XDj$9$k$3$H$K$O!"(B
|
87 |
$B$?$H$($P<!$N$h$&$JMxE@$,$"$j$^$9!#(B</p>
|
88 |
|
89 |
<ul>
|
90 |
<li>$B;HMQ$9$kJ8=q(B (<abbr lang="en" xml:lang="en">HTML</abbr>
|
91 |
<del cite="#FOR-XML">$B$,IaDL$G$9$,!"(B
|
92 |
$B0lHL$N(B <abbr lang="en" xml:lang="en">XML</abbr>
|
93 |
$BJ8=q$G$b5!G=$9$k$H;W$$$^$9!#(B</del>)
|
94 |
$B$K%9%/%j%W%H$rKd$a9~$`I,MW$,$J$$(B ($B9=B$$HI=8=$NJ,N%(B)$B!#(B
|
95 |
$B$3$l$K$h$C$FJ8=q$N4IM}$,$7$d$9$/$J$k!#(B</li>
|
96 |
<li>$BE,MQBP>]$NMWAG$r(B <abbr lang="en" xml:lang="en">CSS</abbr>
|
97 |
$B$N(B<ruby><rb>$BA*Br;R(B</rb><rp>(</rp><rt xml:lang="en" lang="en">$B%;%l%/%?(B</rt><rp>)</rp></ruby>$B$r;H$C$F=@Fp$K;XDj$G$-$k!#(B</li>
|
98 |
<li>$B1\Mw<T$N%9%?%$%k!&%7!<%H$r;H$C$FG$0U$NJ8=q$KE,MQ$5$;$?$j!"(B
|
99 |
$B5U$KE,MQ$rBG$A>C$7$?$j$G$-$k!#(B</li>
|
100 |
</ul>
|
101 |
|
102 |
<p>$B$^$?!"0\F0Cf$N%9%?%$%k(B
|
103 |
<span class="weak">($B$?$H$($P!"%^%&%9;X<(;R$r0\F0;~$N$b$N$H$9$k$H$+!#(B)</span>
|
104 |
$B$r(B <abbr lang="en" xml:lang="en">CSS</abbr> $B$r;H$C$F;XDj$9$k$3$H$,$G$-$^$9!#(B</p>
|
105 |
</div>
|
106 |
|
107 |
<div class="section" id="usage">
|
108 |
<h2>$B;H$$J}(B</h2>
|
109 |
|
110 |
<ol>
|
111 |
<li>$B$^$:!"(B <a href="http://suika.fam.cx/www/style/ui/drag.xbl" type="application/xml"><code xml:lang="en" lang="en" class="filename">drag.xbl</code></a>
|
112 |
$B$r;}$C$F$$$C$F$/$@$5$$!#(B</li>
|
113 |
<li><abbr lang="en" xml:lang="en">CSS</abbr>
|
114 |
$B7A<0$N%9%?%$%k!&%7!<%H$G>e5-J8=q$rMQ0U$7$?(B
|
115 |
<span lang="en" xml:lang="en">URI</span> $B$r<!$NNc$N$h$&$K=q$-F~$l$^$9!#(B
|
116 |
<span class="weak">($B$J$*!"$3$3$G;HMQ$7$F$$$k(B
|
117 |
<code class="CSS">-moz-binding</code>
|
118 |
$BB0@-$O(B <span lang="en" xml:lang="en">Mozilla</span>
|
119 |
(<span lang="en" xml:lang="en">Gecko</span>)</span> $B$NFH<+3HD%$G$9!#(B
|
120 |
<a href="http://www.mozilla.gr.jp/">$B$b$8$iAH(B</a>$B$N(B
|
121 |
<cite><a href="http://www.mozilla.gr.jp/standards/webtips0001.html">Mozilla$B$NFH<+3HD%(BCSS$B$O;H$o$J$$$G$/$@$5$$(B</a></cite>$B$H$$$&J8=q$KL\$rDL$7$FM}2r$7$?>e$G$*;H$$2<$5$$!#(B)</li>
|
122 |
<li>$B0\F02DG=;~5Z$S0\F0;~$N%9%?%$%k$r!"I,MW$K1~$8$F0l=o$K;XDj$7$F$*$-$^$9!#(B</li>
|
123 |
</ol>
|
124 |
|
125 |
<div class="fig example">
|
126 |
|
127 |
<div class="fig-body">
|
128 |
<pre class="CSS" xml:lang="en" lang="en">
|
129 |
<var>.movable-element</var> {
|
130 |
-moz-binding: url('<a href="http://suika.fam.cx/www/style/ui/drag.xbl#simple-drag" type="application/xml">http://suika.fam.cx/www/style/ui/drag.xbl#simple-drag</a>');
|
131 |
}
|
132 |
<ins xml:lang="ja" lang="ja" class="comment">/* $B0\F02DG=$J;~!"5i(B <code xml:lang="en" class="HTML">DRAGABLE</code> $B$,DI2C$5$l$^$9!#(B */</ins>
|
133 |
<var>.movable-element</var>.DRAGABLE {
|
134 |
position: absolute <ins xml:lang="ja" lang="ja" class="comment">/* $B$^$?$O(B <code class="CSS" xml:lang="en" lang="en">fixed</code> */</ins>;
|
135 |
margin: 0 <ins xml:lang="ja" lang="ja" class="comment">/* $B0LCV7W;;$NET9g>e(B 0 $B$G$J$$$H$$$1$^$;$s!#(B */</ins>;
|
136 |
<samp>top: 4em; <ins xml:lang="ja" lang="ja" class="comment">/* $BNc!#(B */</ins></samp>
|
137 |
<samp>left: 1em;</samp>
|
138 |
}
|
139 |
<ins xml:lang="ja" lang="ja" class="comment">/* $B0\F0Cf$N;~!"5i(B <code xml:lang="en" lang="en" class="HTML">DRAGING</code> $B$,DI2C$5$l$^$9!#(B */</ins>
|
140 |
<var>.movable-element</var>.DRAGING {
|
141 |
<samp>cursor: move; <ins xml:lang="ja" lang="ja" class="comment">/* $BNc!#(B */</ins></samp>
|
142 |
}
|
143 |
</pre>
|
144 |
</div><!-- fig-body -->
|
145 |
|
146 |
<div class="caption">$B%I%i%C%02DG=$K$9$k(B
|
147 |
<abbr lang="en" xml:lang="en">CSS</abbr> $B$N;XDj(B</div>
|
148 |
|
149 |
</div><!-- fig -->
|
150 |
|
151 |
</div><!-- section -->
|
152 |
|
153 |
<div class="section" id="restriction">
|
154 |
<h2>$B@)8B;v9`(B</h2>
|
155 |
|
156 |
<ul>
|
157 |
<li><abbr lang="en" xml:lang="en">XBL</abbr> $B$r<BAu$7$?MxMQ<T%(!<%8%'%s%H(B
|
158 |
<span class="weak">($B8=:_$N=j(B <span lang="en" xml:lang="en">Gecko</span>
|
159 |
$B$N$_!#(B)</span>
|
160 |
$B0J30$KBP$7$F$O2?$N8z2L$b$"$j$^$;$s!#(B</li>
|
161 |
<li>$B0\F0$9$kH"$N(B <code xml:lang="en" lang="en" class="CSS">margin</code>
|
162 |
$B$O(B ($B>/$J$/$F$b:8$H>e$O(B) $BNm$G$J$1$l$P$J$j$^$;$s!#(B</li>
|
163 |
<li>$B$&$C$+$j(B <code class="CSS" lang="en" xml:lang="en">-moz-binding</code>
|
164 |
$B$H0l=o$K(B
|
165 |
<samp lang="en" xml:lang="en" class="CSS">behavior: url('<a href="http://suika.fam.cx/www/style/ui/drag.htc" type="application/xml">http://suika.fam.cx/www/style/ui/drag.htc</a>')</samp>
|
166 |
$B$H$b=q$$$F$7$^$&$H!"(B <abbr lang="en" xml:lang="en" title="Windows $BHG(B Internet Explorer">WinIE</abbr>
|
167 |
$B$K$bBP1~$7$F$7$^$$$^$9(B<span class="aa">:)</span>
|
168 |
</li>
|
169 |
<li id="FOR-XML">$BE,MQ$G$-$kMWAG7?$O(B <abbr lang="en" xml:lang="en">HTML</abbr>
|
170 |
/ <abbr lang="en" xml:lang="en">XHTML</abbr>
|
171 |
$B$N$b$N$@$1$G!"0lHL$N(B <abbr lang="en" xml:lang="en">XML</abbr>
|
172 |
$B$NMWAG$K$OE,MQ$G$-$^$;$s!#(B
|
173 |
($B0lHL$N(B <span lang="en" xml:lang="en">XML</span> $B$NMWAG$NI=<(0LCV$r(B
|
174 |
<abbr lang="en" xml:lang="en">DOM</abbr>
|
175 |
$BE*$KA`:n$9$kJ}K!$,:#$N$H$3$m$J$$$+$i$G$9!#(B)</li>
|
176 |
</ul>
|
177 |
</div>
|
178 |
|
179 |
<div class="section" id="license">
|
180 |
<h2 lang="en" xml:lang="en">License</h2>
|
181 |
|
182 |
<ul>
|
183 |
<li><span lang="en" xml:lang="en">Mozilla</span> $B4X78$N%U%!%$%k$KJo$C$F!"(B
|
184 |
<q><abbr lang="en" xml:lang="en">MPL</abbr> 1.1/<abbr lang="en" xml:lang="en">GPL</abbr>
|
185 |
2.0/<abbr lang="en" xml:lang="en">LGPL</abbr> 2.1</q> $B$H$7$^$9!#(B</li>
|
186 |
<li>$B$3$N@bL@J8=q<+BN$O(B <span lang="en" xml:lang="en">Public Domain</span> $B$G$9(B
|
187 |
<span class="weak">($BCx:n8"$r<gD%$7$^$;$s(B)</span>$B!#(B</li>
|
188 |
</ul>
|
189 |
</div>
|
190 |
|
191 |
<div class="section" id="toc">
|
192 |
<h2>$BL\<!(B</h2>
|
193 |
|
194 |
<ol>
|
195 |
<li><a href="#abstract">$B35MW(B</a></li>
|
196 |
<li><a href="#introduction">$B$O$8$a$K(B</a></li>
|
197 |
<li><a href="#usage">$B;H$$J}(B</a></li>
|
198 |
<li><a href="#restriction">$B@)8B;v9`(B</a></li>
|
199 |
<li><a href="#license" lang="en" xml:lang="en">License</a></li>
|
200 |
</ol>
|
201 |
</div>
|
202 |
|
203 |
<div class="footer">
|
204 |
<div class="navigation">
|
205 |
[<a href="/" title="$B$3$N%5!<%P!<$N<sJG(B">/</a>
|
206 |
<a href="/map" title="$B$3$N%5!<%P!<$N0FFb(B" rel="index">$BCO?^(B</a>
|
207 |
<a href="/search/" title="$B$3$N%5!<%P!<$N8!:w(B">$B8!:w(B</a>]
|
208 |
</div>
|
209 |
<div class="update" lang="en" xml:lang="en">$Date: 2004/03/12 03:49:25 $</div>
|
210 |
</div>
|
211 |
|
212 |
</body></html>
|