Rev 2071 | Details | Compare with Previous | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
2071 | zjchen | 1 | |
2 | <style type="text/css"> |
||
3 | <!-- |
||
4 | .tt { |
||
5 | font-size:12px; |
||
6 | } |
||
7 | |||
8 | #T2tDirect { |
||
9 | border:2px solid red; |
||
10 | background:yellow; |
||
11 | padding:3px; |
||
12 | } |
||
13 | --> |
||
14 | </style> |
||
15 | <script type="text/javascript"> |
||
16 | <!-- |
||
17 | function FixCalcXY(el) |
||
18 | { |
||
19 | if(typeof(el.offsetParent) == "undefined") |
||
20 | return [70, 4000]; |
||
21 | var a = new Array(0, -70); |
||
22 | while(el) |
||
23 | { |
||
24 | a[0] += el.offsetLeft || 0; |
||
25 | a[1] += el.offsetTop || 0; |
||
26 | el = el.offsetParent || null; |
||
27 | } |
||
28 | return a; |
||
29 | } |
||
30 | //--> |
||
31 | </script> |
||
32 | |||
33 | <table> |
||
34 | <tbody><tr> |
||
5787 | bpr | 35 | <td width="50"><br/></td> |
2071 | zjchen | 36 | <td> |
37 | <table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0"> |
||
38 | <tbody><tr> |
||
39 | <td> |
||
40 | <table border="0" cellpadding="6" cellspacing="1" width="100%"> |
||
41 | <tbody><tr bgcolor="#eeeeee"> |
||
42 | <th align="center">命令</th> |
||
43 | <th align="center">描述</th> |
||
44 | </tr> |
||
45 | <tr bgcolor="#ffffff" valign="top"> |
||
46 | <td> |
||
47 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('tooltip 放在鼠标点上面', ABOVE, true);">ABOVE</a></tt> |
||
48 | </td> |
||
49 | <td> |
||
50 | tooltip 放在鼠标点上面. |
||
51 | 取值: true 或 false. |
||
5787 | bpr | 52 | <br/> <br/> |
2071 | zjchen | 53 | 与 |
5787 | bpr | 54 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('此处用了以下命令:<br/>ABOVE, true, OFFSETY, 50', ABOVE,true,OFFSETY,50);">OFFSETY</a></tt> |
2071 | zjchen | 55 | 联用可调节到鼠标点的垂直距离, |
56 | 或用 |
||
5787 | bpr | 57 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('此处用了以下命令:<br/>ABOVE, true, CENTERMOUSE, true', ABOVE, true, CENTERMOUSE, true, OFFSETX, 0);">CENTERMOUSE</a></tt> |
2071 | zjchen | 58 | 使得 tooltip 的中心位于鼠标点上面. |
59 | </td> |
||
60 | </tr> |
||
61 | <tr bgcolor="#ffffff" valign="top"> |
||
62 | <td> |
||
63 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变 tooltip 的背景色', BGCOLOR,'#f3e0f3');">BGCOLOR</a></tt> |
||
64 | </td> |
||
65 | <td> |
||
66 | tooltip 的背景色. |
||
67 | 取值: 放在单引号里面的 HTML 色彩, 例如 '#D3E3F6' 或 'DarkCyan', |
||
68 | 空色彩 <tt>''</tt> 表示 |
||
5787 | bpr | 69 | <tt><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('此 tooltip 既无背景<br/>也无边框', BORDERWIDTH, 0, BGCOLOR, '', FONTWEIGHT, 'bold', FONTCOLOR, '#00AA00')">无背景</a></tt>. |
70 | <br/>例: |
||
71 | <br/> |
||
2071 | zjchen | 72 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', BGCOLOR, '#D3E3F6')"</font></tt> |
5787 | bpr | 73 | <br/>or<br/> |
2071 | zjchen | 74 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', BGCOLOR, '')"</font></tt> |
75 | </td> |
||
76 | </tr> |
||
77 | <tr bgcolor="#ffffff" valign="top"> |
||
78 | <td> |
||
79 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('带背景图像的 tooltip', BGIMG, '../images/tooltip/tt_bg.jpg', PADDING, 10, WIDTH, 180);">BGIMG</a></tt> |
||
80 | </td> |
||
81 | <td> |
||
82 | 背景图像. |
||
83 | 取值: 用单引号括起来的到图像的路径. |
||
5787 | bpr | 84 | <br/>例: |
85 | <br/> |
||
2071 | zjchen | 86 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', BGIMG, '../images/tipbackground.gif')"</font></tt> |
87 | </td> |
||
88 | </tr> |
||
89 | <tr bgcolor="#ffffff" valign="top"> |
||
90 | <td> |
||
91 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变边框颜色', BORDERCOLOR, '#dd00aa');">BORDERCOLOR</a></tt> |
||
92 | </td> |
||
93 | <td> |
||
94 | 边框颜色. |
||
95 | 取值: 用单引号括起来的 HTML 色彩, 例如 '#dd00aa'. |
||
96 | </td> |
||
97 | </tr> |
||
98 | <tr bgcolor="#ffffff" valign="top"> |
||
99 | <td> |
||
100 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('虚线边框', BORDERSTYLE, 'dashed', PADDING, 8);">BORDERSTYLE</a></tt> |
||
101 | </td> |
||
102 | <td> |
||
103 | 边框格式. |
||
104 | 取值: 用单引号括起来的 CSS 边框格式. |
||
105 | 推荐值为 'solid' (默认), 'dashed' 或 'dotted', 其它值可能不适用于某些浏览器. |
||
106 | </td> |
||
107 | </tr> |
||
108 | <tr bgcolor="#ffffff" valign="top"> |
||
109 | <td> |
||
110 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('tooltip 边框宽度', BORDERWIDTH, 5);">BORDERWIDTH</a></tt> |
||
111 | </td> |
||
112 | <td> |
||
113 | tooltip 边框宽度. |
||
114 | 取值: 非负整数. 默认是 1. 0 表示无框. |
||
5787 | bpr | 115 | <br/>例: |
116 | <br/> |
||
2071 | zjchen | 117 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', BORDERWIDTH, 2)"</font></tt> |
118 | </td> |
||
119 | </tr> |
||
120 | <tr bgcolor="#ffffff" valign="top"> |
||
121 | <td align="right"> |
||
122 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('居中处于鼠标下方', CENTERMOUSE, true, OFFSETX, 0, OFFSETY, 22);">CENTERMOUSE</a></tt> |
||
123 | </td> |
||
124 | <td> |
||
125 | 使 tooltip 居中处于鼠标下方(或上方). |
||
126 | 取值: true 或 false. |
||
127 | tooltip 离中心的水平偏移量整体由 wz_tooltip.js (<tt>设置 OffsetX</tt>) 规定, 或者利用 OFFSETX 命令设定. |
||
5787 | bpr | 128 | <br/>例: |
129 | <br/> |
||
2071 | zjchen | 130 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', CENTERMOUSE, true, OFFSETX, 0)"</font></tt> |
131 | </td> |
||
132 | </tr> |
||
133 | <tr bgcolor="#ffffff" valign="top"> |
||
134 | <td> |
||
135 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('由于使用了 CLICKCLOSE, true, 这个 tooltip 是 "粘滞的", 但可以通过点击 tooltip 或文件而关闭.', CLICKCLOSE, true, STICKY, true, WIDTH, 300);">CLICKCLOSE</a></tt> |
||
136 | </td> |
||
137 | <td> |
||
138 | 当用户在 tooltip 或文件内部点击才能关闭此 tooltip. |
||
139 | 取值: true, false. |
||
140 | </td> |
||
141 | </tr> |
||
142 | <tr bgcolor="#ffffff" valign="top"> |
||
143 | <td> |
||
144 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('关闭按钮位于标题栏', CLOSEBTN, true, STICKY, true);">CLOSEBTN</a></tt> |
||
145 | </td> |
||
146 | <td> |
||
147 | 关闭按钮位于标题栏. |
||
148 | 取值: true, false. |
||
149 | </td> |
||
150 | </tr> |
||
151 | <tr bgcolor="#ffffff" valign="top"> |
||
152 | <td> |
||
153 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变关闭按钮的颜色', CLOSEBTN, true, STICKY, true, CLOSEBTNCOLORS, ['#7799cc', '#ffaaaa', '#ffffff', '#ff0000']);">CLOSEBTNCOLORS</a></tt> |
||
154 | </td> |
||
155 | <td> |
||
156 | 关闭按钮的颜色. |
||
5787 | bpr | 157 | <br/> <br/> |
2071 | zjchen | 158 | 其取值必须是用逗号分隔的 4 个颜色值. 每个颜色放在一对单引号内. |
159 | 整个数组用一对方括号括起来, 参见下例. |
||
5787 | bpr | 160 | 4 个颜色参数的含义如下 : <br/> |
2071 | zjchen | 161 | 1. 背景色 |
5787 | bpr | 162 | <br/> |
2071 | zjchen | 163 | 2. 文字色 |
5787 | bpr | 164 | <br/> |
2071 | zjchen | 165 | 3. 当鼠标移至按钮上面时, 加亮的背景色 |
5787 | bpr | 166 | <br/> |
2071 | zjchen | 167 | 4. 当鼠标移至按钮上面时, 加亮的文字色 |
5787 | bpr | 168 | <br/> |
2071 | zjchen | 169 | 可以用空串 <tt>''</tt> 作为颜色参数, |
170 | 此时分别使用标题栏的背景色或文字色作为按钮的颜色. |
||
5787 | bpr | 171 | <br/> <br/> |
172 | 例:<br/> |
||
2071 | zjchen | 173 | <tt><font class="tt" size="2">Tip('文字', CLOSEBTN, true, CLOSEBTNCOLORS, ['', '#66ff66', 'white', '#00cc00'], STICKY, true)</font></tt> |
5787 | bpr | 174 | <br/> |
2071 | zjchen | 175 | 这个例子里的背景色是空串, 因此关闭按钮继承标题栏的背景色. |
176 | </td> |
||
177 | </tr> |
||
178 | <tr bgcolor="#ffffff" valign="top"> |
||
179 | <td> |
||
180 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变关闭按钮的文字', CLOSEBTN, true, STICKY, true, CLOSEBTNTEXT, '点击这里');">CLOSEBTNTEXT</a></tt> |
||
181 | </td> |
||
182 | <td> |
||
183 | 关闭按钮的文字. |
||
184 | 取值必须放在单引号里面. |
||
185 | 例: |
||
5787 | bpr | 186 | <br/> |
2071 | zjchen | 187 | <tt><font class="tt" size="2">Tip('Tooltip 文字', CLOSEBTN, true, CLOSEBTNTEXT, '点击这里', STICKY, true)</font></tt> |
5787 | bpr | 188 | <br/> |
2071 | zjchen | 189 | 在 wz_tooltip.js 里被整体预置为 '&nbsp;X&nbsp;' - |
190 | 空格 '&nbsp;' 用来作为按钮的水平铺垫. </td> |
||
191 | </tr> |
||
192 | <tr bgcolor="#ffffff" valign="top"> |
||
193 | <td> |
||
194 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="TagToTip('T2tDirect', COPYCONTENT, false, PADDING, 0, BORDERWIDTH, 0, WIDTH, 280);">COPYCONTENT</a></tt> |
||
195 | <div style="display: none;" id="T2tDirect"> |
||
196 | 这个 DIV 实际上已被放入文件的 HTML, |
||
197 | 但它暂时转换成一个 tooltip. </div> |
||
198 | </td> |
||
199 | <td> |
||
200 | COPYCONTENT 仅当使用 <tt>TagToTip()</tt> 创建 tooltip 时才有效, 也就是说, 当一个 HTML 元素被转换成 tooltip 时. |
||
5787 | bpr | 201 | <br/> |
2071 | zjchen | 202 | 取值: true, false. |
5787 | bpr | 203 | <br/> |
2071 | zjchen | 204 | 若是 true (这是 wz_tooltip.js 里预置的默认值), HTML 的仅仅一段文字(或内部 HTML)被插入 tooltip. |
205 | 若是 false, 整个 HTML 元素(它的 DOM 结点)被暂时转换成一个 tooltip, |
||
5787 | bpr | 206 | 这在以下情形可能有用:<br/> 1) 如果转换成 tooltip 的 HTML 元素包含输入表格, |
207 | 那么即使 tooltip 没有显示, 当前用户仍能输入. <br/> |
||
2071 | zjchen | 208 | 2) tooltip 继承 HTML 元素的格式性质. |
5787 | bpr | 209 | <br/> |
2071 | zjchen | 210 | 下例显示通过运用 COPYCONTENT 并设值为 <tt>false</tt>, 如何把一个 HTML 元素全部转换成 tooltip: |
5787 | bpr | 211 | <br/> |
2071 | zjchen | 212 | <tt><font class="tt" size="2">TagToTip('某个识别符id', COPYCONTENT, false, BORDERWIDTH, 0, PADDING, 0)</font></tt> |
5787 | bpr | 213 | <br/> |
2071 | zjchen | 214 | 这个例子关闭了 tooltip 的自然边框 (BORDERWIDTH, 0), |
215 | 并把 tooltip 的自然铺垫设成零, 这样就只显示 HTML 元素本身设定的边框及铺垫.</td> |
||
216 | </tr> |
||
217 | <tr bgcolor="#ffffff" valign="top"> |
||
218 | <td> |
||
5787 | bpr | 219 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('延迟 1000 ms 才显示 tooltip.<br/><br/>在 wz_tooltip.js (GLOBAL TOOLTIP CONFIGURATION) 中预置了较短的 400 ms 延迟, 这里可以改变. 不过要注意过短或过长于 500 ms 可能会激起不快.', DELAY, 1000, WIDTH, 360);">DELAY</a></tt> |
2071 | zjchen | 220 | </td> |
221 | <td> |
||
222 | 经一段延迟后才显示 tooltip, 以毫秒为单位. |
||
5787 | bpr | 223 | <br/> |
2071 | zjchen | 224 | 取值: |
225 | 非负整数. 0 意为无延迟. |
||
226 | 在 wz_tooltip.js 预置为 400. |
||
5787 | bpr | 227 | <br/>例: |
228 | <br/> |
||
2071 | zjchen | 229 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', DELAY, 1000)"</font></tt> |
230 | </td> |
||
231 | </tr> |
||
232 | <tr bgcolor="#ffffff" valign="top"> |
||
233 | <td> |
||
234 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('这个提示的生存期限制为 2500 毫秒', DURATION, 2500);">DURATION</a></tt> |
||
235 | </td> |
||
236 | <td> |
||
237 | 提示显示的时间, 以毫秒为单位. |
||
238 | 即使使用了 <tt>STICKY</tt> 命令或甚至仍然位于触发 tooltip 的 HTML 元素上, |
||
239 | 本命令仍然起作用. |
||
5787 | bpr | 240 | <br/> |
2071 | zjchen | 241 | 取值: |
242 | 非负整数. |
||
243 | |||
244 | </td> |
||
245 | </tr> |
||
246 | <tr bgcolor="#ffffff" valign="top"> |
||
247 | <td> |
||
248 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('渐显', FADEIN, 1000, PADDING, 10);">FADEIN</a></tt> |
||
249 | </td> |
||
250 | <td> |
||
251 | 渐显. |
||
252 | 其取值 (非负整数) 规定了渐显持续时间, 以毫秒为单位. |
||
253 | |||
5787 | bpr | 254 | <br/> <br/> |
2071 | zjchen | 255 | 早于 v.9.0 的 Opera, Safari 的旧版本, 某些版本的 Konqueror 不支持此命令. |
256 | 它们只显示通常的无渐变的提示. |
||
257 | </td> |
||
258 | </tr> |
||
259 | <tr bgcolor="#ffffff" valign="top"> |
||
260 | <td> |
||
261 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('渐淡', FADEOUT, 1000, PADDING, 10);">FADEOUT</a></tt> |
||
262 | </td> |
||
263 | <td> |
||
264 | 渐淡. |
||
265 | 其取值 (非负整数) 规定了渐淡持续时间, 以毫秒为单位. |
||
266 | |||
5787 | bpr | 267 | <br/> <br/> |
2071 | zjchen | 268 | 推荐: 与 |
5787 | bpr | 269 | <tt><a class="nodeco" href="javascript:void(0)" onmouseover="Tip('例<br/><img src=\'../../data/maps/fr.jpg\' width=\'132\' height=\'141\' \/>', FADEIN, 800, FADEOUT, 800, TEXTALIGN, 'center', BGCOLOR, '#ffffff')">FADEIN</a></tt> |
270 | 联用.<br/> <br/> |
||
2071 | zjchen | 271 | 早于 v.9.0 的 Opera, Safari 的旧版本, 某些版本的 Konqueror 不支持此命令. |
272 | 它们只显示通常的无渐变的提示. |
||
273 | </td> |
||
274 | </tr> |
||
275 | <tr bgcolor="#ffffff" valign="top"> |
||
276 | <td> |
||
277 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover=" Tip('Tooltip 放在取定位置', FIX, FixCalcXY(this));">FIX</a></tt> |
||
278 | </td> |
||
279 | <td> |
||
280 | 在坐标 [x, y] 的地方显示 tooltip. |
||
281 | 取值: 用方括号括起来的一对整数. |
||
5787 | bpr | 282 | 例:<br/> |
2071 | zjchen | 283 | <tt>onmouseover="Tip('某些文字', FIX, [230, 874])"</tt> |
5787 | bpr | 284 | <br/> |
2071 | zjchen | 285 | 你也可以调用其它地方定义的函数动态地计算坐标: |
5787 | bpr | 286 | <br/> |
2071 | zjchen | 287 | <tt>onmouseover="Tip('文字', FIX, [CalcFixX(), CalcFixY()], BORDERWIDTH, 2)"</tt> |
5787 | bpr | 288 | <br/> |
2071 | zjchen | 289 | 或 |
5787 | bpr | 290 | <br/> |
2071 | zjchen | 291 | <tt>onmouseover="Tip('文字', FIX, CalcFixXY(), ABOVE, true)"</tt> |
5787 | bpr | 292 | <br/> |
2071 | zjchen | 293 | 在后一情形, 函数 CalcFixXY() 返回包含两个数的数组. |
294 | </td> |
||
295 | </tr> |
||
296 | <tr bgcolor="#ffffff" valign="top"> |
||
297 | <td> |
||
298 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('由于使用了命令 FOLLOWMOUSE 并接着取值 false, 此 tooltip 不会跟随鼠标移动', FOLLOWMOUSE, false, WIDTH, 300);">FOLLOWMOUSE</a></tt> |
||
299 | </td> |
||
300 | <td> |
||
301 | tooltip 跟随鼠标移动. |
||
302 | 取值: true, false. 默认: true. |
||
5787 | bpr | 303 | <br/> <br/> |
2071 | zjchen | 304 | 当取值 false 关掉这个命令时, tooltip 不会跟随鼠标移动. |
305 | </td> |
||
306 | </tr> |
||
307 | <tr bgcolor="#ffffff" valign="top"> |
||
308 | <td> |
||
309 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变文字色彩', FONTCOLOR, '#ff0000');">FONTCOLOR</a></tt> |
||
310 | </td> |
||
311 | <td> |
||
312 | 改变文字色彩. |
||
313 | 取值: 包含在单引号里面的 HTML 色彩, 例如 '#990099' |
||
314 | </td> |
||
315 | </tr> |
||
316 | <tr bgcolor="#ffffff" valign="top"> |
||
317 | <td> |
||
318 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变字体', FONTFACE, 'Courier New, Courier, mono');">FONTFACE</a></tt> |
||
319 | </td> |
||
320 | <td> |
||
321 | 改变字体. |
||
5787 | bpr | 322 | <br/> |
2071 | zjchen | 323 | 取值: |
324 | 如同 HTML 或 CSS 里使用的字体名称, 用单引号括起来, 例如 |
||
325 | <tt>Tip('某些文字', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '12pt')</tt> |
||
326 | </td> |
||
327 | </tr> |
||
328 | <tr bgcolor="#ffffff" valign="top"> |
||
329 | <td> |
||
330 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('改变字体大小', FONTSIZE, '72pt');">FONTSIZE</a></tt> |
||
331 | </td> |
||
332 | <td> |
||
333 | 字体大小. |
||
334 | 取值: 带单位的度量, 用单引号括起来. |
||
335 | 单位可以是 'px', 'pt', 'em' 等. |
||
336 | </td> |
||
337 | </tr> |
||
338 | <tr bgcolor="#ffffff" valign="top"> |
||
339 | <td> |
||
340 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('FONTWEIGHT, \'bold\'', FONTWEIGHT, 'bold');">FONTWEIGHT</a></tt> |
||
341 | </td> |
||
342 | <td> |
||
343 | 字体粗细. |
||
344 | 取值: 'normal' 或 'bold', 用单引号括起来. |
||
345 | </td> |
||
346 | </tr> |
||
347 | <tr bgcolor="#ffffff" valign="top"> |
||
348 | <td align="right"> |
||
349 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('放在另一侧', LEFT, true);">LEFT</a></tt> |
||
350 | </td> |
||
351 | <td> |
||
352 | 把 tooltip 放在鼠标的左边. |
||
353 | 取值: true, false. |
||
5787 | bpr | 354 | <br/> |
2071 | zjchen | 355 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('LEFT 和 ABOVE 联合使用...', LEFT, true, ABOVE, true);">LEFT 和 ABOVE 联合使用</a></tt>. |
5787 | bpr | 356 | <br/>例: |
357 | <br/> |
||
2071 | zjchen | 358 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', LEFT, true, ABOVE, true)"</font></tt> |
359 | </td> |
||
360 | </tr> |
||
361 | <tr bgcolor="#ffffff" valign="top"> |
||
362 | <td> |
||
363 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('增加水平偏移', OFFSETX, 150);">OFFSETX</a></tt> |
||
364 | </td> |
||
365 | <td> |
||
366 | 从鼠标点的水平偏移. |
||
367 | 取值: 任意整数. 也可取负值. |
||
368 | </td> |
||
369 | </tr> |
||
370 | <tr bgcolor="#ffffff" valign="top"> |
||
371 | <td> |
||
372 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('增加垂直偏移', OFFSETY, 70);">OFFSETY</a></tt> |
||
373 | </td> |
||
374 | <td> |
||
375 | 从鼠标点的水平偏移. |
||
376 | 取值: 任意整数. 也可取负值. |
||
377 | </td> |
||
378 | </tr> |
||
379 | <tr bgcolor="#ffffff" valign="top"> |
||
380 | <td> |
||
381 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('半透明的 tooltip', OPACITY, 70, PADDING, 14);">OPACITY</a></tt> |
||
382 | </td> |
||
383 | <td> |
||
384 | 透明程度. |
||
385 | 取值: 从 0 (完全透明) 到 100 (不透明) 间的整数. |
||
5787 | bpr | 386 | <br/> <br/> |
387 | 不透明度(opacity) = 100 - 透明度 (取百分比).<br/> |
||
388 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img src=../../data/maps/fr.jpg width=130 height=103/><br/>带有图形、阴影、背景图像以及渐显渐隐效果的 tooltip', WIDTH, 180, OPACITY, 80, TEXTALIGN, 'center', TITLEALIGN, 'center', SHADOW, true, TITLE, '例', BGIMG, '../../data/maps/it.jpg', FADEIN, 700, FADEOUT, 700);">另一例子</a></tt> |
||
389 | 用到了 SHADOW, TEXTALIGN, BGIMG 以及 FADEIN / FADEOUT 命令. <br/> <br/> |
||
2071 | zjchen | 390 | 早于 v.9.0 的 Opera, Safari 的旧版本, 某些版本的 Konqueror 不支持此命令. |
391 | </td> |
||
392 | </tr> |
||
393 | <tr bgcolor="#ffffff" valign="top"> |
||
394 | <td> |
||
395 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('内容旁有足够铺垫的 tooltip', PADDING, 30);">PADDING</a></tt> |
||
396 | </td> |
||
397 | <td> |
||
398 | 在边界与提示内容间的内部铺垫空间. |
||
399 | 取值: 非负整数. |
||
400 | </td> |
||
401 | </tr> |
||
402 | <tr bgcolor="#ffffff" valign="top"> |
||
403 | <td> |
||
404 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('SHADOW, true', SHADOW, true);">SHADOW</a></tt> |
||
405 | </td> |
||
406 | <td> |
||
407 | 带有阴影的 tooltip. |
||
408 | 取值: true, false |
||
409 | </td> |
||
410 | </tr> |
||
411 | <tr bgcolor="#ffffff" valign="top"> |
||
412 | <td> |
||
5787 | bpr | 413 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('这个提示有阴影 (SHADOW 命令),<br/>而且改变了它的阴影颜色 (SHADOWCOLOR 命令)', PADDING, 8, SHADOW, true, SHADOWCOLOR, '#dd99aa');">SHADOWCOLOR</a></tt> |
2071 | zjchen | 414 | <!--br> |
415 | |||
416 | <form> <select><option>aaa</option><option>bbb</option><option>ccc</option></select></form--> |
||
417 | </td> |
||
418 | <td> |
||
419 | 阴影颜色. |
||
420 | 取值: 放在单引号内部的 HTML 色彩. |
||
5787 | bpr | 421 | <br/>例: |
422 | <br/> |
||
2071 | zjchen | 423 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', SHADOW, true, SHADOWCOLOR, '#dd99aa')"</font></tt> |
424 | </td> |
||
425 | </tr> |
||
426 | <tr bgcolor="#ffffff" valign="top"> |
||
427 | <td> |
||
428 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('增加阴影宽度', SHADOW, true, SHADOWWIDTH, 10, PADDING, 8);">SHADOWWIDTH</a></tt> |
||
429 | </td> |
||
430 | <td> |
||
431 | 阴影宽度 (偏移). |
||
432 | 取值: 非负整数. |
||
5787 | bpr | 433 | <br/>例: |
434 | <br/> |
||
2071 | zjchen | 435 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', SHADOW, true, SHADOWWIDTH, 7)"</font></tt> |
436 | </td> |
||
437 | </tr> |
||
438 | <tr bgcolor="#ffffff" valign="top"> |
||
439 | <td> |
||
440 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('STICKY, true<ul><li style=\'font-family:Verdana,Geneva,sans-serif;font-size:8pt;\'><a href=#top>页顶<\/a><\/li><li style=\'font-family:Verdana,Geneva,sans-serif;font-size:8pt;\'><a href=\'#docu\'>文件开始<\/a><\/li><\/ul>', STICKY, true, CLICKCLOSE, true, PADDING, 6);">STICKY</a></tt> |
||
441 | </td> |
||
442 | <td> |
||
443 | Tooltip 停留在初始位置直至弹出另一个 tooltip. |
||
444 | 取值: true, false. |
||
5787 | bpr | 445 | <br/> <br/> |
2071 | zjchen | 446 | 利用 |
5787 | bpr | 447 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('STICKY, true, DURATION, 2500<br/>这个提示是粘滞的, 但它的生存周期限制在 2.5 秒.', STICKY, true, CLICKCLOSE, true, DURATION, 2500, WIDTH, 280)">DURATION</a></tt> |
2071 | zjchen | 448 | 你可以让 tooltip 过一段时间后自动消失. |
449 | </td> |
||
450 | </tr> |
||
451 | <tr bgcolor="#ffffff" valign="top"> |
||
452 | <td> |
||
453 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TEXTALIGN 命令取值 \'right\', \'center\', \'justify\' 或 \'left\', 最后一个值是多余的, 因为这是默认值.', WIDTH, 200, TITLE, '右端对齐的文字', TEXTALIGN, 'right');">TEXTALIGN</a></tt> |
||
454 | </td> |
||
455 | <td> |
||
456 | 规定提示内容的对齐方式. |
||
457 | 取值: 'right', 'center', |
||
5787 | bpr | 458 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('<img align=\'right\' src=\'..\/..\/data\/photos\/small.gif\' width=\'60\' height=\'40\'/>这是一段相当长的文字, 它展示了命令 TEXTALIGN 取值 \'justify\' 后的效应. 请注意, 对于行数较少的文字不推荐使用对齐 - 这也是这个 tooltip 的情形, 特别是上面还有一个图像的情形.', TITLE, '文字与图像对齐', TEXTALIGN, 'justify', WIDTH, 250);">'justify'</a></tt> |
2071 | zjchen | 459 | 或 'left'. |
5787 | bpr | 460 | <br/>例: |
461 | <br/> |
||
2071 | zjchen | 462 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', TEXTALIGN, 'right')"</font></tt> |
463 | </td> |
||
464 | </tr> |
||
465 | <tr bgcolor="#ffffff" valign="top"> |
||
466 | <td> |
||
467 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLE, \'某个标题\'', TITLE, '某个标题');">TITLE</a></tt> |
||
468 | </td> |
||
469 | <td> |
||
470 | 显示标题栏. |
||
471 | 取值: 放在单引号里面的标题文本. |
||
472 | 可以包含 HTML, 它使你在设计标题栏时有更多的自由度. |
||
473 | </td> |
||
474 | </tr> |
||
475 | <tr bgcolor="#ffffff" valign="top"> |
||
476 | <td> |
||
477 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEALIGN 命令可取值 \'right\', \'justify\' 或 \'left\', 最后的值是多余的, 因为这是默认值.', WIDTH, 240, TITLE, '右端对齐的标题', TITLEALIGN, 'right');">TITLEALIGN</a></tt> |
||
478 | </td> |
||
479 | <td> |
||
480 | 标题栏内文字的对齐方式. |
||
481 | 取值: 'right', 'center', 'justify' 或 'left' |
||
482 | </td> |
||
483 | </tr> |
||
484 | <tr bgcolor="#ffffff" valign="top"> |
||
485 | <td> |
||
486 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEBGCOLOR, \'#990099\'', TITLE, '标题背景色', TITLEBGCOLOR, '#990099');">TITLEBGCOLOR</a></tt> |
||
487 | </td> |
||
488 | <td> |
||
489 | 标题栏的背景色. |
||
490 | 取值: 放在单引号里面的 HTML 颜色. |
||
491 | 如果它取空串 <tt>''</tt>, |
||
492 | 则使用边界的颜色 (参见 BORDERCOLOR 命令), 这也是默认值. |
||
493 | </td> |
||
494 | </tr> |
||
495 | <tr bgcolor="#ffffff" valign="top"> |
||
496 | <td> |
||
497 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTCOLOR, \'#ff6666\'', TITLE, '红色标题', TITLEFONTCOLOR, '#ff6666');">TITLEFONTCOLOR</a></tt> |
||
498 | </td> |
||
499 | <td> |
||
500 | 标题文字的颜色. |
||
501 | 取值: 放在单引号里面的 HTML 颜色. |
||
502 | 如果它取空串 <tt>''</tt>, |
||
503 | 则使用 tooltip 主体的背景色 (参见 BGCOLOR 命令), 这也是默认值. |
||
504 | </td> |
||
505 | </tr> |
||
506 | <tr bgcolor="#ffffff" valign="top"> |
||
507 | <td> |
||
508 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTFACE, \'Courier New, Courier, mono\'', TITLE, '改变标题字体', TITLEFONTFACE, 'Courier New, Courier, mono');">TITLEFONTFACE</a></tt> |
||
509 | </td> |
||
510 | <td> |
||
511 | 标题字体. |
||
512 | 取值: 放在单引号里面的 HTML 或 CSS 格式. |
||
513 | 如果它取空串 <tt>''</tt>, 则使用 tooltip 主体的字体, 这也是默认值. |
||
5787 | bpr | 514 | <br/> |
2071 | zjchen | 515 | 例: |
5787 | bpr | 516 | <br/> |
2071 | zjchen | 517 | <tt><font style="font-size: 12px;" size="2">onmouseover="Tip('某些文字', TITLE, '某个标题', TITLEFONTFACE, 'Verdana,sans-serif')"</font></tt> |
5787 | bpr | 518 | <br/> |
2071 | zjchen | 519 | </td> |
520 | </tr> |
||
521 | <tr bgcolor="#ffffff" valign="top"> |
||
522 | <td> |
||
523 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('TITLEFONTSIZE, \'18pt\'', TITLE, '大标题', TITLEFONTSIZE, '18pt');">TITLEFONTSIZE</a></tt> |
||
524 | </td> |
||
525 | <td> |
||
526 | 标题字体大小. |
||
527 | 取值: 放在单引号里面的带单位的度量. |
||
528 | 单位可取 'px', 'pt', 'em' 等. |
||
529 | 如果它取空串 <tt>''</tt>, 则使用 tooltip 主体的字体大小. |
||
530 | </td> |
||
531 | </tr> |
||
532 | <tr bgcolor="#ffffff" valign="top"> |
||
533 | <td> |
||
534 | <tt><a class="nodeco" href="javascript:void(0);" onmouseover="Tip('WIDTH, 200', WIDTH, 200);">WIDTH</a></tt> |
||
535 | </td> |
||
536 | <td> |
||
537 | 宽度. |
||
538 | 取值: 非负整数. |
||
539 | 若取默认值 0, 宽度将根据 tooltip 的内容自动调整. |
||
5787 | bpr | 540 | <br/> <br/> |
2071 | zjchen | 541 | 注意 tooltip 遵从 W3C box 模式, |
542 | 也就是被指定的宽度仅应用于 tooltip 的实际内容, |
||
543 | 不包含铺垫 (见 PADDING 命令), 边界及阴影. |
||
544 | </td> |
||
545 | </tr> |
||
546 | </tbody></table> |
||
547 | </td> |
||
548 | </tr> |
||
549 | </tbody></table> |
||
550 | </td> |
||
5787 | bpr | 551 | <td width="50"><br/></td> |
2071 | zjchen | 552 | </tr> |
553 | </tbody></table> |
||
554 |