-
Notifications
You must be signed in to change notification settings - Fork 1
/
README.TXT
172 lines (106 loc) · 4.65 KB
/
README.TXT
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
Tab
============
Minimalistic but extensible tab swapper. It can be used to create a tab swapper as well as a galerie slideshow.
you can have effects like **Moostack**, the [barack slideshow](https://devthought.com/wp-content/moogets/BarackSlideshow/demo.html) or [jQuery nivoslider](https://nivo.dev7studios.com/) or whatever you want by providing an animation plugin.
![Screenshot](https://github.com/tbela99/tab/raw/master/thumbnail.jpg)
[Demo](https://tbela99.github.com/tab/Demos/matrix.html)
#### More demos
- [Matrix](https://tbela99.github.com/tab/Demos/matrix.html)
- [Random](https://tbela99.github.com/tab/Demos/random.html?transitions[]=slideOut&directions[]=left&directions[]=right&mode=horizontal&random=0&duration=800)
- [Move](https://tbela99.github.com/tab/Demos/move.html)
- [Stack](https://tbela99.github.com/tab/Demos/stack.html)
- [No animation](https://tbela99.github.com/tab/Demos/none.html)
How to use
---------------------
It is quite simple to use. what you need first is
### HTML:
<div id="slide">
<div class="ctab"><img src="images/slide1.jpg" width="400" height="300" /></div>
<div class="ctab hidden"><img src="images/slide2.jpg" width="400" height="300" /></div>
<div class="ctab hidden"><img src="images/slide3.jpg" width="400" height="300" /></div>
<div class="ctab hidden"><img src="images/slide4.jpg" width="400" height="300" /></div>
</div>
//the tabs
<div class="tabs"><a href="#0">1</a><a href="#1">2</a><a href="#2">3</a><a href="#3">4</a></div>
### Javascript:
var swapper = new Tab({
container: 'slide',
tabs: 'div.tabs a',
onChange: function () {
//do something
}
});
### Options:
* container - (*mixed*) the element that contains the panels.
* selector - (*string*, optional) only container children that match the selector will be grabbed.
* animation - (*string*, optional) the transition plugin to use for swapping. default to *None*
* params - (*object*, optional) parameters specific to the transition plugin.
* fx - (*object*, optional) parameters for the animation. this can be any of the Fx parameters.
* current - (*int*, optional) index of the panel that is displayed first. default to 0
* tabs - (*mixed*, optional) when a tab is clicked, the corresponding panel is shown. anything you can pass to $$ is accepted.
* activeClass - (*string*, optional) style applied to the selected tab.
* inactiveClass - (*string*, optional) style applied to every unselected tab.
* link - (*string*) control the way concurrent changes are handled. accepted values are *chain* (default), *ignore*, *cancel*
### Events:
#### create
Fired right after the tabs has been setup.
##### Signature:
onCreate(newPanel, index)
##### Arguments:
1. newPanel - (*element*) the active panel.
2. index - (*int*) the index of the active panel.
#### change
Fired when the active panel is changed.
##### Signature:
onChange(newPanel, curPanel, index, current)
##### Arguments:
1. newPanel - (*element*) the active panel.
2. oldPanel - (*element*) the previously selected panel.
3. index - (*int*) the index of the active panel.
4. current - (*int*) index of the previously selected panel.
Method: next
------------
display the next panel.
### Returns:
* (*object*) - This Tab instance.
Method: previous
----------------
display the previous panel.
### Returns:
* (*object*) - This Tab instance.
Tab Method: add {#Tab:add}
----------------------------
add a new panel to the tab.
### Arguments:
- panel - (*mixed*) the new panel.
- tab - (*mixed*, optional) tab associated to the new panel
- index - (*int*, optional) position where the new panel is injected, if not specified, the new panel will be inserted at the end
### Returns:
* (*object*) - This Tab instance.
Tab Method: remove {#Tab:remove}
----------------------------
remove the panel at the given index.
### Arguments:
- index - (*int*)
### Returns:
* (*object*) - an object {panel: panel, tab: tab} containing the panel and the associated tab.
Tab Method: resize {#Tab:resize}
----------------------------
resize the container to fit the panel offset. this is useful if you change the panel content.
### Arguments:
- index - (*int*, optional) index of the panel. if not specified, the current panel is used.
### Returns:
* (*object*) - an object {panel: panel, tab: tab} containing the panel and the associated tab.
Method: getSelectedIndex
------------------------
### Returns:
* (*int*) - the index of the displayed panel
Method: setSelectedIndex
------------------------
set the displayed panel.
### Syntax:
swapper.setSelectedIndex(0);
### Arguments:
- index - (*int*) index of the panel to display.
### Returns:
* (*object*) - This Tab instance.