Skip to content

Commit 259f0e9

Browse files
committed
Update README.md
1 parent 7872e7e commit 259f0e9

File tree

1 file changed

+58
-2
lines changed

1 file changed

+58
-2
lines changed

README.md

Lines changed: 58 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,66 @@
11
jQuery ReStable
22
========
33

4-
**jQuery ReStable** is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.
4+
**jQuery ReStable** is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.You can find some examples in the included demo or [here](http://codeb.it/restable/).
55

66
To use it you just have to include jQuery and a copy of the plugin in your head or footer:
77

88
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
99
<script type="text/javascript" src="jquery.restable.min.js"></script>
10-
<link rel="stylesheet" href="jquery.restable.css">
10+
<link rel="stylesheet" href="jquery.restable.min.css">
11+
12+
Let's say this is your table:
13+
14+
<table class="mytable">
15+
<thead>
16+
<tr>
17+
<td>Period</td>
18+
<td>Full Board</td>
19+
<td>Half Board</td>
20+
<td>Bed and Breakfast</td>
21+
</tr>
22+
</thead>
23+
<tbody>
24+
<tr>
25+
<td>01/10/12 - 02/10/12</td>
26+
<td>20 €</td>
27+
<td>30 €</td>
28+
<td>40 €</td>
29+
</tr>
30+
<tr>
31+
<td>03/10/12 - 04/10/12</td>
32+
<td>40 €</td>
33+
<td>50 €</td>
34+
<td>60 €</td>
35+
</tr>
36+
<tr>
37+
<td>05/10/12 - 06/10/12</td>
38+
<td>70 €</td>
39+
<td>80 €</td>
40+
<td>90 €</td>
41+
</tr>
42+
</tbody>
43+
</table>
44+
45+
Now the only thing to do is to trigger the menu with:
46+
47+
$(window).ready(function () {
48+
$.ReStable();
49+
});
50+
51+
This will target automatically all the tables in the page but you can, off course, target one or more elements with:
52+
53+
$(window).ready(function () {
54+
$('.mytable').ReStable();
55+
});
56+
57+
If you need more control here's the plugin settings:
58+
59+
$('.toresponsive').ReSmenu({
60+
rowHeaders: true, // Table has row headers?
61+
maxWidth: 480 // Size to which the table become responsive
62+
});
63+
64+
## Credits and contacts
65+
66+
ReSmenu has been made by [me](http://codeb.it). You can contact me at [email protected] or [twitter](https://twitter.com/Micc1983) for any issue or feauture request.

0 commit comments

Comments
 (0)