-
Notifications
You must be signed in to change notification settings - Fork 135
/
Copy pathindex.html
470 lines (464 loc) · 27.8 KB
/
index.html
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="description" content="jQuery万能切换插件powerSwitch API简介 » 张鑫旭-鑫空间-鑫生活" />
<meta name="description" content="张鑫旭web前端文档页面之jQuery万能切换插件powerSwitch API简介" />
<meta name="keywords" content="powerSwitch, jQuery, 插件, API" />
<meta name="author" content="张鑫旭, zhangxinxu" />
<title>万能切换插件powerSwitch API简介 » 张鑫旭-鑫空间-鑫生活</title>
<link rel="stylesheet" href="api.css">
<link rel="shortcut icon" href="../zxx_ico.ico" />
</head>
<body>
<div class="zxx_header">
<div class="zxx_constr">
<a href="http://www.zhangxinxu.com/" class="zxx_logo">
<img class="l" src="../index_logo.gif" alt="张鑫旭-鑫空间-鑫生活" />
</a>
<span class="zxx_author_time">by <span role="author">zhangxinxu</span> <span role="timer">2013-11-08 00:42</span></span>
</div>
</div>
<div class="zxx_nav">
<div class="zxx_constr">
<ul class="zxx_nav_ul">
<li class="zxx_nav_li"><a href="index.html" class="zxx_nav_a zxx_nav_on">API简介</a></li>
<li class="zxx_nav_li"><a href="../index.html" class="zxx_nav_a">测试页面</a></li>
<li class="zxx_nav_li"><a href="../demo/_html/index.html" class="zxx_nav_a">实例页面</a></li>
<li class="zxx_nav_sp"><a href="https://github.com/zhangxinxu/powerSwitch" class="zxx_rbtn">Fork Me</a></li>
</ul>
</div>
</div>
<div id="zxxBody" class="zxx_body">
<div class="zxx_side">
<h6 class="zxx_api_title">• 基本API</h6>
<a href="#direction" class="zxx_api_a zxx_api_on" name="apiSwitch">direction</a>
<a href="#eventType" class="zxx_api_a" name="apiSwitch">eventType</a>
<a href="#classAdd" class="zxx_api_a" name="apiSwitch">classAdd</a>
<a href="#classRemove" class="zxx_api_a" name="apiSwitch">classRemove</a>
<a href="#classPrefix" class="zxx_api_a" name="apiSwitch">classPrefix</a>
<a href="#attribute" class="zxx_api_a" name="apiSwitch">attribute</a>
<a href="#animation" class="zxx_api_a" name="apiSwitch">animation</a>
<a href="#duration" class="zxx_api_a" name="apiSwitch">duration</a>
<a href="#container" class="zxx_api_a" name="apiSwitch">container</a>
<a href="#autoTime" class="zxx_api_a" name="apiSwitch">autoTime</a>
<a href="#number" class="zxx_api_a" name="apiSwitch">number</a>
<a href="#hoverDelay" class="zxx_api_a" name="apiSwitch">hoverDelay</a>
<a href="#toggle" class="zxx_api_a" name="apiSwitch">toggle</a>
<a href="#onSwitch" class="zxx_api_a" name="apiSwitch">onSwitch</a>
<h6 class="zxx_api_title">• 匿名API</h6>
<a href="#classDisabled" class="zxx_api_a" name="apiSwitch">classDisabled</a>
<a href="#classPrev" class="zxx_api_a" name="apiSwitch">classPrev</a>
<a href="#classNext" class="zxx_api_a" name="apiSwitch">classNext</a>
<a href="#classPlay" class="zxx_api_a" name="apiSwitch">classPlay</a>
<a href="#classPause" class="zxx_api_a" name="apiSwitch">classPause</a>
<a href="#indexSelected" class="zxx_api_a" name="apiSwitch">indexSelected</a>
<h6 class="zxx_api_title">• 更多信息</h6>
<a href="http://www.zhangxinxu.com/wordpress/?p=3758" class="zxx_api_a">相关文章</a>
</div>
<div id="direction" class="zxx_api_detail" style="visibility: visible;">
<div class="zxx_api_content">
<h2>direction</h2>
<h3>概述</h3>
<p>表示位移动画(translate)（如果有）的方向。</p>
<h3>可选值</h3>
<ul>
<li><code>horizontal</code> 默认参数。表示水平方向的运动。</li>
<li><code>vertical</code> 表示垂直方向的位移。</li>
</ul>
<h3>其他说明</h3>
<p>暂无</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="eventType" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>eventType</h2>
<h3>概述</h3>
<p>表示事件类型。</p>
<h3>可选值</h3>
<ul>
<li><code>click</code> 默认参数。表示点击事件。</li>
<li><code>hover</code>或<code>mouseover</code> 表示鼠标经过事件。</li>
</ul>
<h3>其他说明</h3>
<p>暂无</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="classAdd" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classAdd</h2>
<h3>概述</h3>
<p>一般用在选项卡切换效果上。用来表示选项卡处于激活状态的类名。</p>
<h3>可选值</h3>
<p>字符串。默认为空字符串。可缺省。</p>
<h3>其他说明</h3>
<p>如果选项卡默认含有与<code>classAdd</code>匹配的类名，当插件会认为此选项卡默认处理展开（或激活）状态。</p>
<h3>示例</h3>
<p>假设4个选项卡，默认状态的类名是<code>.default</code>, 选中状态的类名是<code>.default .active</code>. 则<code>classAdd</code>的值就是<code>active</code>.</p>
</div>
</div>
<div id="classRemove" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classRemove</h2>
<h3>概述</h3>
<p>一般用在选项卡切换效果上。表示选项卡处于非激活状态时，被移除的默认类名。</p>
<h3>可选值</h3>
<p>字符串。默认为空字符串。可缺省。</p>
<h3>其他说明</h3>
<p>只有在类名的默认态和选中态是A↔B关系的时候，此参数才会使用。具体可参见下面的示例。</p>
<h3>示例</h3>
<p>假设4个选项卡，默认状态的类名是<code>.default</code>, 选中状态的类名是<code>.active</code>. 则<code>classRemove</code>的值就是<code>default</code>; 另外<code>classAdd</code>的值依旧是<code>active</code>. </p>
</div>
</div>
<div id="classPrefix" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classPrefix</h2>
<h3>概述</h3>
<p>表示一些匿名类名API的前缀名称。</p>
<h3>可选值</h3>
<p>字符串。默认为空字符串。可缺省。</p>
<h3>其他说明</h3>
<ol>
<li>选项卡切换时候，时常会有“前进”或“后退”，甚至有时还有“播放”与“暂停”按钮。默认情况下，这些类名是没有前缀的。拿“前进”与“后退”按钮举例，如果<code>classPrefix</code>为空字符串，则插件生成（可参考<code><a href="#container">container</a></code>参数）的类名就是<code>"prev"</code>与<code>"next"</code>. 如果<code>classPrefix</code>值为<code>"example_"</code>，则生成的“前进”与“后退”按钮的类名是<code>"example_prev"</code>和<code>"example_next"</code>.</li>
<li>如果对应的匿名类名参数(<code>classPrev</code>, <code>classNext</code><code>...</code>)设置了非<code>undefined</code>值，则这里的参数无效。也就是说，匿名类名参数权重大于这里的<code>classPrefix</code>。</li>
<li>类名前缀与类名关键字的连接方式有前缀自身决定。如果前缀中带有短横线或者下划线（无论是中间还是末尾），都为以这种方式连接；如果前缀就是个普通的单词，则采用大小写组合的驼峰命名法，例如，<code>classPrefix</code>值为<code>"example"</code>，则生成的类名是<code>"examplePrev"</code>. 因此，如果你希望生成的是<code>"example-prev"</code>的类名，务必<code>classPrefix</code>值为<code>example-</code>。但是，如果你想生成<code>"example-1-prev"</code>的类名，可以省略最后的连接符，即<code>classPrefix</code>值为<code>example-1</code>就可以了，因为<code>-</code>已经出现过，插件会认定这种连接就是你想要的连接方式；这种情况下，<code>example-1</code>和<code>example-1-</code>都是OK的。</li>
</ol>
<h3>示例</h3>
<p>跑马灯效果，如果不是无限切换，则其前进和后退按钮是有一个禁用状态的。默认类名是<code>disabled</code>. 如果<code>classPrefix</code>值为<code>example-</code>, 则按钮禁用的类名就是<code>example-disabled</code>.</p>
</div>
</div>
<div id="attribute" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>attribute</h2>
<h3>概述</h3>
<p>powerSwitch插件采用的是HTML属性关联机制。将切换的面板或列表通过按钮上某个属性关联在一起。<code>attribute</code>表示的就是这个关联属性。</p>
<h3>可选值</h3>
<p>字符串。默认为<code>"data-rel"</code>.</p>
<h3>其他说明</h3>
<ol>
<li>插件的元素的关联细则如下：
<p>如果属性值比较简单，纯字母，例如<code>data-rel="example"</code>，则：</p>
<ol>
<li>属性值<code>example</code>作为<code>id</code>选择器获取对应的切换元素 - <code>$("#example")</code>.</li>
<li>属性值<code>example</code>作为<code>class</code>类名选择器获取对应的切换元素 - <code>$(".example")</code>.</li>
<li>属性值<code>example</code>作为标签选择器获取对应的切换元素 - <code>$("example")</code>.</li>
</ol>
<p>如果属性值比较复杂，例如<code>data-rel="#example a"</code>，则：</p>
<ol>
<li>属性值<code>#example a</code>直接作为选择器使用。</li>
</ol>
</li>
<li>如果包装器元素上没有<code>attribute</code>对应的自定义属性，或者属性值为空字符串，则插件会使用元素的<code>href</code>属性<code>#</code>后面的值作为关联选择器，规则与上面一致。例如元素<code>href="#example"</code>, 则首先会去获取<code>$("#example")</code>这个元素。正如本API文档页面左侧的切换实现所示。之所以保留这个特性，是因为本身锚点技术就能够实现一些选项卡切换，且还有记忆功能（如本API文档页面随时刷新），是面向高级CSS技术的一种JS增强处理。</li>
</ol>
<h3>示例</h3>
<pre><a href="javascript:" id="switchPrev" data-refer="switchList">前进</a></pre>
<pre><ul>
<li class="switchList">切换列表1</li>
<li class="switchList">切换列表1</li>
</ul></pre>
<pre>$("#switchPrev").powerSwitch({
attribute: "data-refer"
});</pre>
<p></p>
</div>
</div>
<div id="animation" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>animation</h2>
<h3>概述</h3>
<p>表示切换的动画类型</p>
<h3>可选值</h3>
<ul>
<li><code>auto</code> 默认参数。表示自动。例如跑马灯效果为切换动画（<code>scroll</code>驱动或<code>translate</code>驱动），选项卡效果为直接的现实与隐藏。</li>
<li><code>none</code> 表示无动画效果。用在重置跑马灯默认效果适合使用。与下面的<code>display</code>作用类似。</li>
<li><code>display</code> 表示<code>display</code>属性驱动的显示与隐藏。</li>
<li><code>visibility</code> 表示<code>visibility</code>属性驱动的显示与隐藏。</li>
<li><code>translate</code> 表示动画形式的位移效果。</li>
<li><code>fade</code> 表示淡入淡出切换效果。</li>
<li><code>slide</code> 表示上下slide动画效果。一般用在手风琴切换效果上。可参见测试页面的下截图所示的效果：<p></p><img src="img/api-1.png" alt="手风琴效果"></li>
</ul>
<h3>其他说明</h3>
<p>在某些情况下，一些动画类型的设置是会被忽略的。但这些忽略都是按照正常逻辑走的，因此，可以不必在意。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="duration" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>duration</h2>
<h3>概述</h3>
<p>动画效果（如果有）执行的时间。</p>
<h3>可选值</h3>
<ul>
<li>数值，默认单位毫秒 - <code>ms</code>. 默认值为<code>250</code>. </li>
<li>字符串关键字。只能在<a href="#animation">animation</a>为<code>fade</code>和<code>slide</code>的时候有用。跟着jQuery关键字走，如<code>slow</code>, <code>normal</code>, <code>fast</code>.</li>
</ul>
<p></p>
<h3>其他说明</h3>
<p>字符串关键字还支持一个特殊的关键字——<code>"sync"</code>，也是在<a href="#animation">animation</a>为<code>fade</code>和<code>slide</code>的时候有用。表示元素隐藏和元素显示是同步的，也就是元素隐藏完毕之后，显示的元素才开始淡出。此效果可参见demo页面中<a href="../demo/yixun.php">易迅网</a>下图所示的交互：</p>
<img src="img/api-2.png" alt="淡入淡出同步">
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="container" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>container</h2>
<h3>概述</h3>
<p>表示容器元素。</p>
<h3>可选值</h3>
<p>容器元素。需要是jQuery包装器元素对象。原生的DOM对象可能会有问题。</p>
<h3>其他说明</h3>
<p>该属性只在两种情况下使用：</p>
<ol>
<li>如果是跑马灯效果（也就是<code>powerFloat</code>方法绑定在“前进”、“后退”按钮上），且是位移动画效果，需要使用<code>container</code>参数表示切换的列表元素的容器。您可以指向列表元素们的直接父元素上，则使用CSS3 <code>transform</code>偏移实现效果；如果指向父级元素的再父级元素（高宽限制的那个元素），则使用该元素的<code>scroll</code>滚动实现动画效果（注：该效果性能不佳，会导致<code>duration</code>时间不准，不建议使用）。</li>
<li>有时候，传统的选项卡效果还需要一个“前进”、“后退”按钮，以及到还有“暂停”、“播放”这类需求。如下示意：
<p></p>
<img src="img/api-3.png" alt="前进、后退式选项卡">
<p></p>
本插件采用关联机制，一下子罩不住这些元素。此时，借助<code>container</code>参数，插件会在<code>container</code>后面创建“前进”、“后退”、“暂停”|“播放”这三个按钮，默认不显示，需CSS设置，生成的类名遵循匿名类名API以及<code>classPrefix</code>的双重作用。
<p></p>
<img src="img/api-4.png" alt="容器与动态元素">
</li>
</ol>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="autoTime" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>autoTime</h2>
<h3>概述</h3>
<p>表示自动播放的时间</p>
<h3>可选值</h3>
<p>数值。默认值是0. 表示不定时播放。 如果是其他数值，如果条件允许，就会自动播放。</p>
<h3>其他说明</h3>
<p><code>autoTime</code>有些情况下是无效的，例如，不能循环切换的跑马灯效果，这个应该好理解的，还有“更多”展开与收起效果等。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="number" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>number</h2>
<h3>概述</h3>
<p>表示每次切换的数目</p>
<h3>可选值</h3>
<ul>
<li><code>auto</code> 默认参数。表示自动。之所以这么设计是因为：选项卡、跑马灯等表示每次切换<code>1</code>个，但是，更多展开与收起效果默认是全部。具有不确定性。</li>
<li>数值 表示每次切换的数目。</li>
</ul>
<h3>其他说明</h3>
<p>基本上用在跑马灯切换效果上。一次位移多个列表元素。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="hoverDelay" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>hoverDelay</h2>
<h3>概述</h3>
<p>表示鼠标经过延时触发的时间。</p>
<h3>可选值</h3>
<p>数值。默认值是<code>200</code>, 单位毫秒。</p>
<h3>其他说明</h3>
<p>只有当<code><a href="#eventType">eventType</a></code>为<code>hover</code>或<code>mouseover</code>时候，此参数才有效。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="toggle" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>toggle</h2>
<h3>概述</h3>
<p>表示切换元素是否可以连续显隐切换。</p>
<h3>可选值</h3>
<p>布尔值。<code>true/false</code>. 默认值为<code>"false"</code>. 表示只能展开，不能收起。</p>
<h3>其他说明</h3>
<p>一般用在“更多-展开|收起”效果上。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="onSwitch" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>onSwitch</h2>
<h3>概述</h3>
<p>表示切换后触发的回调事件。</p>
<h3>可选值</h3>
<p>函数。默认值<code>$.noop</code>. 该回调方法的上下文<code>this</code>就是点击（或鼠标经过）的按钮元素或点击（或鼠标经过）的选项卡元素。</p>
<h3>其他说明</h3>
<p>该回调函数的参数略复杂，根据切换的类型不同，支持的参数也有所差异：</p>
<ul>
<li>首先函数中的<code>this</code>表示是事件触发源元素。例如，点击“下一页”按钮，则：
<pre>onSwitch: function() {
// this就是指的这个“下一页”按钮元素，为原生DOM元素
}</pre>
</li>
<li>如果是传统的选项卡，则支持<code>3</code>个参数，示意如下：
<pre>onSwitch: function(panelShow, tabHide, panelHide) {
// this就是指的当前点击的选项卡元素，为原生DOM元素
// panelShow指的是当前显示的面板元素，jQuery对象元素
// tabHide表示当前隐藏的选项卡元素，jQuery对象元素
// panelHide表示当前隐藏的面板元素，jQuery对象元素
}</pre>
</li>
<li>如果是<code>toggle</code>切换类型，支持<code>2</code>个参数，如下：
<pre>onSwitch: function(target, display) {
// this为事件触发的元素
// target表示显隐切换的元素
// display表示当前对应切换元素是显示呢，还是隐藏，是Boolean类型值。
}</pre></li>
<li>如果是其他切换类型，支持<code>1</code>个参数。如下：
<pre>onSwitch: function(targets) {
// this为事件触发的元素
// targets表示显示，或位移的元素jQuery包装器集合，其数目由<code><a href="#number">number</a></code>值大小决定。
}</pre>
</li>
</ul>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<!-- 匿名API -->
<div id="classDisabled" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classDisabled</h2>
<h3>概述</h3>
<p>表示按钮禁用的类名</p>
<h3>可选值</h3>
<p>字符串。默认匿名，也就是<code>undefined</code>未定义。可以是空字符串或其他字符串。</p>
<h3>其他说明</h3>
<p>一般用在跑马灯效果上（有时<code>toggle</code>效果也可以使用）。当列表切换到尽头的时候，例如末尾，则“前进”按钮处于禁用状态。</p>
<p>类名使用规则如下：</p>
<ol>
<li>优先使用<code>classDisabled</code>值，如果该值未定义，下面继续；</li>
<li>如果<code><a href="classPrefix">classPrefix</a></code>设置了值，则使用组合类名；否则，下面继续；</li>
<li>使用类名<code>disabled</code>.</li>
</ol>
<p><strong>重要：</strong><code>classDisabled</code>还有一个非常重要的用法，就是空字符串<code>""</code>用法，在跑马灯效果中，默认切换是有尽头的；如果您希望实现无限切换的效果，只需要额外设置<code>classDisabled: ''</code>（<code>null</code>, <code>false</code>等值其实也可以）就可以了-顾名思意，消除禁用状态。</p>
<h3>示例</h3>
<p>例如，</p>
<pre>$(".example").powerSwitch({
classDisabled: "example-disabled"
});</pre>
<p>则，遭遇禁用状态的时候，按钮的类名可能就是<code>example example-disabled</code>.</p>
</div>
</div>
<div id="classPrev" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classPrev</h2>
<h3>概述</h3>
<p>表示前进（或上一项）按钮的类名。</p>
<h3>可选值</h3>
<p>字符串。默认匿名，也就是<code>undefined</code>未定义。</p>
<h3>其他说明</h3>
<p>只有在选项卡切换，同时需要前进，后退效果的时候使用。指定<code><a href="#container">container</a></code>就可以生成此元素。</p>
<p>如果该API未定义、<code>classPrefix</code>不设置，则按钮的类名就是<code>prev</code>. 如果该API未定义，<code>classPrefix</code>有值，则按钮类名应用<code><a href="#classPrefix">classPrefix</a></code>命名规则。如果该API设置了值，则类名就是该值。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="classNext" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classNext</h2>
<h3>概述</h3>
<p>表示后退（或下一项）按钮的类名。</p>
<h3>可选值</h3>
<p>字符串。默认匿名，也就是<code>undefined</code>未定义。</p>
<h3>其他说明</h3>
<p>只有在选项卡切换，同时需要前进，后退效果的时候使用。指定<code><a href="#container">container</a></code>就可以生成此元素。</p>
<p>如果该API未定义、<code>classPrefix</code>不设置，则按钮的类名就是<code>next</code>. 如果该API未定义，<code>classPrefix</code>有值，则按钮类名应用<code><a href="#classPrefix">classPrefix</a></code>命名规则。如果该API设置了值，则类名就是该值。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
<div id="classPlay" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classPlay</h2>
<h3>概述</h3>
<p>表示播放按钮的类名。</p>
<h3>可选值</h3>
<p>字符串。默认匿名，也就是<code>undefined</code>未定义。</p>
<h3>其他说明</h3>
<p>只有在选项卡切换，同时需要播放、暂停效果的时候使用。指定<code><a href="#container">container</a></code>就可以生成此元素。该元素实际和暂停元素是同一个元素。只是不同状态而已。默认是暂停状态。</p>
<p>如果该API未定义、<code>classPrefix</code>不设置，则按钮的类名就是<code>play</code>. 如果该API未定义，<code>classPrefix</code>有值，则按钮类名应用<code><a href="#classPrefix">classPrefix</a></code>命名规则。如果该API设置了值，则类名就是该值。</p>
<h3>示例</h3>
<p><a href="../index.html">测试页面</a>下面这个效果：</p>
<p><img src="img/api-3.png" alt="播放、暂停式选项卡"></p>
</div>
</div>
<div id="classPause" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>classPause</h2>
<h3>概述</h3>
<p>表示暂停按钮的类名。</p>
<h3>可选值</h3>
<p>字符串。默认匿名，也就是<code>undefined</code>未定义。</p>
<h3>其他说明</h3>
<p>只有在选项卡切换，同时需要播放、暂停效果的时候使用。指定<code><a href="#container">container</a></code>就可以生成此元素。该元素实际和暂停元素是同一个元素。只是不同状态而已。默认是暂停状态。</p>
<p>如果该API未定义、<code>classPrefix</code>不设置，则按钮的类名就是<code>pause</code>. 如果该API未定义，<code>classPrefix</code>有值，则按钮类名应用<code><a href="#classPrefix">classPrefix</a></code>命名规则。如果该API设置了值，则类名就是该值。</p>
<h3>示例</h3>
<p><a href="../index.html">测试页面</a>下面这个效果：</p>
<p><img src="img/api-3.png" alt="播放、暂停式选项卡"></p>
</div>
</div>
<div id="indexSelected" class="zxx_api_detail">
<div class="zxx_api_content">
<h2>indexSelected</h2>
<h3>概述</h3>
<p>默认选中态的索引值。</p>
<h3>可选值</h3>
<p>数值。默认匿名，也就是<code>undefined</code>未定义。</p>
<h3>其他说明</h3>
<p>实际应用中，99%的场合是不需要该参数的。因为插件有一套自己的选中态索引值判断机制，根据选项卡，或者切换面板的一些状态等。</p>
<h3>示例</h3>
<p>暂无</p>
</div>
</div>
</div>
<div class="zxx_footer">
<div class="zxx_constr">
<p class="zxx_copyright">
Copyright © <a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>
|
<a href="http://www.zhangxinxu.com/wordpress/?p=3758">该篇相关文章</a>
|
<a href="https://github.com/zhangxinxu/powerSwitch">GitHub地址</a>
</p>
</div>
</div>
<script src="../jquery.min.js"></script>
<script src="../jquery-powerSwitch.js"></script>
<script>
if (!window.XMLHttpRequest) {
$("#zxxBody").css("height", $(window).height() - 113 - 65);
// IE6高度
setInterval(function() {
$("#zxxBody").css("height", $(window).height() - 113 - 65);
}, 500);
}
window.addEventListener && window.addEventListener("popstate", function() {
var href = location.href, hrefSplit = href.split("#");
if (hrefSplit.length > 1) {
$("a[href='#"+ hrefSplit[hrefSplit.length - 1] +"']").trigger("click");
}
});
$("a[name='apiSwitch']").powerSwitch({
classAdd: "zxx_api_on",
animation: "visibility",
onSwitch: function(target) {
location.hash = this.getAttribute("href");
// IE6 宽度
if (!window.XMLHttpRequest) {
target.css("width", $(window).width() - 254);
}
}
});
</script>
</body>
</html>