-
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.
Merge branch 'master' of github.com:micc83/ReStable
- Loading branch information
Showing
1 changed file
with
57 additions
and
48 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,67 +1,76 @@ | ||
| jQuery ReStable 0.1.2 | ||
| ======== | ||
|
|
||
| **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/). | ||
| **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. | ||
|
|
||
| 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.min.css"> | ||
| ```html | ||
| <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.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> | ||
|
|
||
| ```html | ||
| <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 action with: | ||
|
|
||
| $(window).ready(function () { | ||
| $.ReStable(); | ||
| }); | ||
| ```js | ||
| $(document).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(); | ||
| }); | ||
| ```js | ||
| $(document).ready(function () { | ||
| $('.mytable').ReStable(); | ||
| }); | ||
| ``` | ||
|
|
||
| If you need more control here's the plugin settings: | ||
|
|
||
| $('.mytable').ReStable({ | ||
| rowHeaders: true, // Table has row headers? | ||
| maxWidth: 480, // Size to which the table become responsive | ||
| keepHtml: false // Keep the html content of cells | ||
| }); | ||
|
|
||
| ```js | ||
| $('.mytable').ReStable({ | ||
| rowHeaders: true, // Table has row headers? | ||
| maxWidth: 480, // Size to which the table become responsive | ||
| keepHtml: false // Keep the html content of cells | ||
| }); | ||
| ``` | ||
|
|
||
| ## Credits and contacts | ||
|
|
||
| ReStable 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. | ||
| ReStable has been made by [me](https://github.com/micc83). You can contact me at [email protected] or [twitter](https://twitter.com/Micc1983) for any issue or feature request. |