Skip to content

Commit 6b750cc

Browse files
alexchizhovcomalexchizhovcom
committed
Version 1.1.4 Readme Update
Small changes in README.md
1 parent 4e095ee commit 6b750cc

File tree

1 file changed

+40
-33
lines changed

1 file changed

+40
-33
lines changed

‎README.md

+40-33
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,52 @@
1-
# PWS Tabs jQuery Plugin
1+
# [PWS Tabs jQuery Plugin](http://alexchizhov.com/pwstabs)<sup>[1.1.4](#version-114-19012015)</sup>
22

3-
Version 1.1.4
4-
5-
PWS Tabs is a lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
3+
####PWS Tabs is a lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
64

75
## Demo
86

9-
Online demo: http://alexchizhov.com/pwstabs
7+
Online demo: [http://alexchizhov.com/pwstabs](http://alexchizhov.com/pwstabs)
108

9+
![Preview](http://alexchizhov.com/files/themes/ac/page-templates/pwstabs/pwstabs114.jpg)
1110

1211
## Documentation
1312

1413
### Getting Started
1514

16-
1) Include jQuery library and jQuery PWS Tabs plugin in the <strong>&lt;head&gt;</strong> section.
17-
18-
<pre><code>&lt;script src="//code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
19-
20-
&lt;link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"&gt;
21-
&lt;script src="jquery.pwstabs-1.1.4.js"&gt;&lt;/script&gt;</code></pre>
15+
1) Include jQuery library and jQuery PWS Tabs plugin in the <strong>`<head>`</strong> section.
16+
```html
17+
<script src="//code.jquery.com/jquery-1.11.2.min.js"</script>
2218
23-
2) Create tabbed panels and use HTML5 <code>data-pws-*</code> attributes to specify the ID & Name for the tabs.
19+
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
20+
<script src="jquery.pwstabs-1.1.4.js"></script>
21+
```
2422

25-
<pre><code>&lt;div class="hello_world"&gt;
23+
2) Create tabbed panels and use HTML5 `data-pws-*` attributes to specify the ID & Name for the tabs.
2624

27-
&lt;div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1"&gt;Our first tab&lt;/div&gt;
28-
&lt;div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2"&gt;Our second tab&lt;/div&gt;
29-
&lt;div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3"&gt;Our third tab&lt;/div&gt;
25+
```html
26+
<div class="hello_world">
3027

31-
&lt;/div&gt;</code></pre>
28+
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>
29+
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>
30+
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>
3231

32+
</div>
33+
```
3334

34-
<strong><code>data-pws-tab</code></strong> is used to initiate the tab and as its ID.
35+
<strong>`data-pws-tab`</strong> is used to initiate the tab and as its ID.
3536

36-
<strong><code>data-pws-tab-name</code></strong> is used for a tab display name.
37+
<strong>`data-pws-tab-name`</strong> is used for a tab display name.
3738

3839

3940
3) Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.
40-
<pre><code>jQuery(document).ready(function($){
41-
$('.hello_world').pwstabs();
42-
});</code></pre>
43-
41+
```js
42+
jQuery(document).ready(function($){
43+
$('.hello_world').pwstabs();
44+
});
45+
```
4446

4547
4) Available parameters to customize the tabs plugin.
46-
<pre><code>jQuery(document).ready(function($){
48+
```js
49+
jQuery(document).ready(function($){
4750
$('.hello_world').pwstabs({
4851

4952
// scale / slideleft / slideright / slidetop / slidedown / none
@@ -69,25 +72,29 @@ Online demo: http://alexchizhov.com/pwstabs
6972
rtl: false
7073

7174
});
72-
});</code></pre>
75+
});
76+
```
7377

7478

7579
<p>5) PWS Tabs Plugin supports <strong><a href="http://fortawesome.github.io/" title="Go to Font Awesome Website" target="_blank">Font Awesome 4.2.0</a></strong></p>
7680

7781
<p>5.1) Include Font Awesome stylesheet from assets directory:</p>
7882

79-
<pre><code>&lt;link type="text/css" rel="stylesheet" href="../assets/font-awesome-4.2.0/css/font-awesome.min.css"&gt;</code></pre>
80-
81-
<p>5.2) Use HTML5 <strong>data-pws-tab-icon</strong> attribute to set an icon. Icon names you can find here: <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome Icons</a>.</p>
83+
```html
84+
<link type="text/css" rel="stylesheet" href="../assets/font-awesome-4.2.0/css/font-awesome.min.css">
85+
```
8286

83-
<pre><code>&lt;div class="hello_world"&gt;
87+
<p>5.2) Use HTML5 <strong>`data-pws-tab-icon`</strong> attribute to set an icon. Icon names you can find here: <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome Icons</a>.</p>
8488

85-
&lt;div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" <strong>data-pws-tab-icon="fa-heart"</strong>&gt;Our first tab&lt;/div&gt;
86-
&lt;div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" <strong>data-pws-tab-icon="fa-star"</strong>&gt;Our second tab&lt;/div&gt;
87-
&lt;div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" <strong>data-pws-tab-icon="fa-map-marker"</strong>&gt;Our third tab&lt;/div&gt;
89+
```html
90+
<div class="hello_world">
8891

89-
&lt;/div&gt;</code></pre>
92+
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" data-pws-tab-icon="fa-heart">Our first tab</div>;
93+
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" data-pws-tab-icon="fa-star">Our second tab</div>
94+
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" data-pws-tab-icon="fa-map-marker">Our third tab</div>
9095

96+
</div>
97+
```
9198

9299

93100
## Options

0 commit comments

Comments
 (0)