-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
58 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,66 @@ | ||
jQuery ReStable | ||
======== | ||
|
||
**jQuery ReStable** is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists. | ||
**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/). | ||
|
||
To use it you just have to include jQuery and a copy of the plugin in your head or footer: | ||
|
||
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | ||
<script type="text/javascript" src="jquery.restable.min.js"></script> | ||
<link rel="stylesheet" href="jquery.restable.css"> | ||
<link rel="stylesheet" href="jquery.restable.min.css"> | ||
|
||
Let's say this is your table: | ||
|
||
<table class="mytable"> | ||
<thead> | ||
<tr> | ||
<td>Period</td> | ||
<td>Full Board</td> | ||
<td>Half Board</td> | ||
<td>Bed and Breakfast</td> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<td>01/10/12 - 02/10/12</td> | ||
<td>20 €</td> | ||
<td>30 €</td> | ||
<td>40 €</td> | ||
</tr> | ||
<tr> | ||
<td>03/10/12 - 04/10/12</td> | ||
<td>40 €</td> | ||
<td>50 €</td> | ||
<td>60 €</td> | ||
</tr> | ||
<tr> | ||
<td>05/10/12 - 06/10/12</td> | ||
<td>70 €</td> | ||
<td>80 €</td> | ||
<td>90 €</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
|
||
Now the only thing to do is to trigger the menu with: | ||
|
||
$(window).ready(function () { | ||
$.ReStable(); | ||
}); | ||
|
||
This will target automatically all the tables in the page but you can, off course, target one or more elements with: | ||
|
||
$(window).ready(function () { | ||
$('.mytable').ReStable(); | ||
}); | ||
|
||
If you need more control here's the plugin settings: | ||
|
||
$('.toresponsive').ReSmenu({ | ||
rowHeaders: true, // Table has row headers? | ||
maxWidth: 480 // Size to which the table become responsive | ||
}); | ||
|
||
## Credits and contacts | ||
|
||
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. |