diff --git a/ReStable.esproj/Project.espressostorage b/ReStable.esproj/Project.espressostorage new file mode 100644 index 0000000..892ee38 Binary files /dev/null and b/ReStable.esproj/Project.espressostorage differ diff --git a/ReStable.esproj/user.lareclame.espressostorage b/ReStable.esproj/user.lareclame.espressostorage new file mode 100644 index 0000000..3958d04 Binary files /dev/null and b/ReStable.esproj/user.lareclame.espressostorage differ diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..ac2c81b --- /dev/null +++ b/demo/index.html @@ -0,0 +1,181 @@ + + + + + + + + jQuery ReStable - Responsive tables to list jquery plugin + + + + + + + + + + +
+ +

jQuery ReStable v0.1.0

+ +

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

+ + Download it on GitHub + +

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">
+ +

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
+});
+ +

Some examples

+ + Example A - Responsive Pricelist Table (with row headers) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PeriodFull BoardHalf BoardBed and Breakfast
01/10/12 - 02/10/1220 €30 €40 €
03/10/12 - 04/10/1240 €50 €60 €
05/10/12 - 06/10/1270 €80 €90 €
+ + 
$('#table1').ReStable();
+ + Example B - Responsive Columns Table (without row headers) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CarbonHydrogenNitrogenOxygen
101510
81112
101511
121711
141912
+ + 
$('#table2').ReStable({
+    rowHeaders : false
+});
+ +

Credits and contacts

+ +

ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feauture request.

+ + +
+ + + \ No newline at end of file diff --git a/demo/main.css b/demo/main.css new file mode 100644 index 0000000..88ff043 --- /dev/null +++ b/demo/main.css @@ -0,0 +1,19 @@ +body { font-family: "Helvetica Neue"; } +.container {margin: 0 auto;width: 90%;padding: 0 5% 20px 5%;max-width: 960px;} + +a { text-decoration: none;color: #4988C6; } +p {color: #444;} +h1 span {color: #ddd;font-size: 26px;} + +.title {font-weight: 800;font-size: 12px;text-transform: uppercase;padding: 15px 0;display: block;} +pre {background-color: #fafafa;padding: 20px;overflow: auto;border: 1px solid #f1f1f1;color: #000;} +.note {color: #999;font-size: 14px;} +.download_button {padding: 15px 0;background: #F2F2F2;display: block;margin: 30px auto;width: 100%;max-width: 200px;text-align: center;color: #4988C6;text-decoration: none;font-weight: 800;font-size: 12px;border-bottom: 3px solid #ddd;} +.download_button:active {position: relative;top: 3px;border-bottom: 0;} +.download_button:hover {background-color: #eaeaea;} + +table {width: 100%;text-align: center;border: 0;border-collapse: collapse;border-spacing: 0;font-size: 14px;} +table td {padding: 10px;margin: 0;} +table thead {background-color: #bbb;color: #fff;font-weight: 800;} +table tbody tr td{border-bottom: 1px solid #eee;} +table tbody tr:hover td{background-color: #eee;} \ No newline at end of file diff --git a/jquery.restable.css b/jquery.restable.css new file mode 100644 index 0000000..6300954 --- /dev/null +++ b/jquery.restable.css @@ -0,0 +1,36 @@ +/* Table */ +ul.tabletolist { + border-bottom: 2px solid #eee;font-size: 14px; +} +/* Table with no row headers */ +ul.tabletolist.nrh { + text-align: center; +} +/* Table defaults */ +ul.tabletolist, ul.tabletolist ul { + padding:0 !important;margin:0 !important;list-style:none !important; +} +/* Table titles */ +ul.tabletolist > li .titles { + background-color: #bbb;display:block;color:#fff;padding:10px;font-weight:800; +} +/* Table rows */ +ul.tabletolist ul > li { + font-weight:200;border-bottom:1px solid #eee;padding:10px; +} +/* Table rows hover */ +ul.tabletolist ul > li:hover { + background-color: #efefef +} +/* Table last child row */ +ul.tabletolist ul > li:last-child { + border-bottom:none; +} +/* Table row header */ +ul.tabletolist ul > li .row_headers { + font-size:12px; +} +/* Table row data */ +ul.tabletolist ul > li .row_data { + float:right;font-weight:800; +} \ No newline at end of file diff --git a/jquery.restable.js b/jquery.restable.js new file mode 100644 index 0000000..ad7e694 --- /dev/null +++ b/jquery.restable.js @@ -0,0 +1,129 @@ +/*! ReStable v0.1 by Alessandro Benoit */ +(function ($, window, i) { + + $.fn.ReStable = function (options) { + + // Settings + var s = $.extend({ + rowHeaders: true, + maxWidth: 480 + }, options); + + // Build the responsive menu container and fill it with build_menu() + function create_responsive_table(element, i) { + + var $cols = [], + $result = {}, + $cols_header = $(element).find('tr').first().children('td'), + $row_number = 0, + $list; + + if (s.rowHeaders) { + $cols_header = $cols_header.slice(1); + } + + // Prende le intestazioni + $cols_header.each(function () { + $cols.push($(this).text()); + }); + + // Costruisce un array con il contenuto: $result + $(element).find('tr').slice(1).each(function () { + + var $row = $(this); + $row_number++; + + $.each($cols, function (index, value) { + + index++; + + if (!$result[value]) { + $result[value] = {}; + } + if (s.rowHeaders) { + $result[value][$row.children('td:nth-child(1)').text()] = $row.children('td:nth-child(' + (index + 1) + ')').text(); + } else { + $result[value][$row_number] = $row.children('td:nth-child(' + index + ')').text(); + } + + }); + + }); + + // Crea la lista + $list = $('