-
Notifications
You must be signed in to change notification settings - Fork 0
/
readme.txt
310 lines (249 loc) · 7.68 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
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
=== Tabs Shortcode ===
Contributors: enej, ctlt-dev, oltdev
Tags: tab, shortcode
Requires at least: 3.4
Tested up to: 6.7.1
Stable tag: 3.0.1
License: GPLv2 or later
Lets you add tabs to your post and pages using a shortcode.
== Description ==
To add tabs to you post or pages just add this shortcode:
`[tabs]
[tab title="title1"] tab content
tab content
[/tab]
[tab title="title2"]
another content tab
[/tab]
[/tabs]`
Here are the some attributes that the shortcode also excepts
// default attributes
`[tabs collapsible=true selected='0' event='click' position='top' ]
[tab title="title1"]
tab content
[/tab]
[tab title="title2"]
another content tab
[/tab]
[/tabs]`
* collapsible = true or false - weather the tabs should be allowed to be collapsed - this doesn't work with twitter bootstrap
* selected = integer for example - what tab should be selected. 0 means the first tab. 1 means the second tab etc.
* event = 'click' or 'mouseover' - does do you user need to click on the tab or just mouse over to get to the content. Tip: Don't use mouseover if you are concerned with mobile.
* position = 'top' , 'bottom' , 'left', 'right' on what side do you want the tabs to appear. See screenshots for an example.
* vertical_tabs = true or false - depreciated is the same as position = left
== Installation ==
See http://codex.wordpress.org/Managing_Plugins#Installing_Plugins
== Upgrade Notice ==
If you are updating from the proviso version and you have added css to your theme
Please add `add_theme_support( 'tabs', 'style-only' );` to you functions file. Preferably somewhere in a function that is being called by the after theme setup action
`add_action('after_setup_theme','bones_theme_support');`
This will tell the plugin to not include tab styling to your theme.
== Frequently Asked Questions ==
=How to get rid of unwanted `<p>` tags=
Get rid of unneeded white space inside your shortcode
=My theme already has styling for tabs how can I remove the default styling=
Easy. Add the line `add_theme_support( 'tabs', 'style-only' );` to you functions.php file. Preferably somewhere in a function that is being called by the after theme setup action
`add_action('after_setup_theme','bones_theme_support');`
=I am using the twitter bootstrap framework how do I make sure that the tabs work with it.=
The shortcode support the twitter bootstrap framework.
`add_theme_support( 'tabs', 'twitter-bootstrap' );`
= How can I contribute to this plugin =
If you must ask. Checkout the source code at https://github.com/ubc/tabs-shortcode
Feel free to submit pull requests.
**note**: The twitter bootstrap framework doesn't use the jquery ui tab javascript.
== Screenshots ==
1. Default styling
2. Styling using the twitter bootstrap
== Sample CSS ==
Want to style the tabs a different way.
Here is some sample css to get you started.
Another place to look for it would be the http://jqueryui.com/themeroller/,
The shortcode used the jQuery UI to generate the tabs unless you are using the twitter bootstrap framework.
See the FAQ on how to deal with that case.
`
/* =tabs
-------------------------------------------------------------- */
.tabs-shortcode.ui-tabs {
padding:.2em;
zoom:1;
clear:both;
background:#FFF;
padding:0;
margin:0;
}
.tabs-shortcode.ui-tabs-nav {
list-style:none!important;
padding:.2em 0 0!important;
margin: 0!important;
}
.tabs-shortcode .ui-tabs-nav:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE6 */
*:first-child+html .tabs-shortcode .ui-tabs-nav { zoom: 1; } /* IE7 */
.tabs-shortcode .ui-tabs-nav li {
position:relative;
float:left;
border:1px solid #CCC;
background:#EEE;
list-style:none!important;
z-index: 100;
padding:0;
}
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
background:#FFF;
color:#111;
}
.tabs-shortcode .ui-tabs-nav li:before {
content:"";
}
.tabs-shortcode .ui-tabs-nav li a {
float:left;
text-decoration:none;
padding:2px 1em;
color:#333;
border:none!important;
}
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.tabs-shortcode.ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: default;
}
.tabs-shortcode .ui-tabs-nav li a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a,
.tabs-shortcode.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor:pointer;
}
.tabs-shortcode .ui-tabs-panel {
display:block;
border-width:0;
background:none;
}
.tabs-shortcode .ui-tabs-hide {
display:none!important;
}
.tabs-shortcode.ui-tabs-panel {
clear:both;
}
/* Position Top and Bottom */
.tabs-shortcode-top .ui-tabs-nav,
.tabs-shortcode-bottom .ui-tabs-nav{
margin-left:0!important;
}
.tabs-shortcode-top .ui-tabs-nav li,
.tabs-shortcode-bottom .ui-tabs-nav li{
position:relative;
float:left;
position:relative;
float:left;
}
/* Position Top */
.tabs-shortcode-top .ui-tabs-nav{
border-bottom: 1px solid #CCC;
}
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-top .ui-tabs-nav li.ui-tabs-selected {
padding-bottom:1px!important;
border-bottom:0;
margin:1px .3em -1px 0!important;
}
.tabs-shortcode-top .ui-tabs-nav li {
border-bottom-width:0!important;
margin:1px .3em 0 0!important;
}
/* Position Bottom */
.tabs-shortcode-bottom .ui-tabs-nav{
border-top: 1px solid #CCC;
}
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-bottom .ui-tabs-nav li.ui-tabs-selected {
padding-top:1px!important;
border-top:0;
margin:-1px .3em 1px 0!important;
}
.tabs-shortcode-bottom .ui-tabs-nav li {
border-top-width:0!important;
margin:0 .3em 1px 0!important;
}
/* Position Left and Right */
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav{
width: 150px;
margin: 0!important;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-left,
.tabs-shortcode-right .ui-tabs-nav li,
.tabs-shortcode-right{
position: relative;
overflow: hidden;
}
.tabs-shortcode-left .ui-tabs-nav li,
.tabs-shortcode-right .ui-tabs-nav li{
margin:0 0 0.3em 0;
width: 100%;
}
.tabs-shortcode-left .ui-tabs-nav li a,
.tabs-shortcode-right .ui-tabs-nav li a{
width: 100%;
}
.tabs-shortcode-left .ui-tabs-panel,
.tabs-shortcode-right .ui-tabs-panel{
margin-left: 165px;
}
/* Position Left */
.tabs-shortcode-left .ui-tabs-nav{
border-right: 1px solid #CCC;
padding: 0 1px 10px 0!important;
}
.tabs-shortcode-left .ui-tabs-nav,
.tabs-shortcode-left .ui-tabs-nav li{
float: left;
}
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-left .ui-tabs-nav li.ui-tabs-selected {
padding-right:1px;
border-right:0;
margin:0 1px 0.3em 0;
}
/* Position Right */
.tabs-shortcode-right .ui-tabs-nav{
border-left: 1px solid #CCC;
padding: 0 0 10px 1px!important;
}
.tabs-shortcode-right .ui-tabs-nav,
.tabs-shortcode-right .ui-tabs-nav li{
float: right;
}
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-active,
.tabs-shortcode-right .ui-tabs-nav li.ui-tabs-selected {
padding-left:1px;
border-left:0;
margin:0 0 0.3em 1px;
}
`
== Changelog ==
= 2.0.2 =
* Minified files so that things are load even faster, saving tree though bandwidth.
= 2.0.1 =
* Bug fixes: Removes notices
* updated to styles better with version jQuery 1.9
= 2 =
* Rewrite of the plugin
* Now we are adding some tab styling by default
* Added position attribute (top, bottom, left, right)
= 1.1.1 =
* removing unwanted warnings.
= 1.1 =
* rewrite to use classes and make the javascript be loaded only when it needs to be.
= 1.0.2 =
* bug fixes now it plays more nicely with other short codes.
= 1 =
* Initial Release