Skip to content

Commit

Permalink
First Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@micc83
micc83 committed Nov 20, 2013
0 parents commit 94eefa9
Show file tree
Hide file tree
Showing 8 changed files with 368 additions and 0 deletions.
Binary file added ReStable.esproj/Project.espressostorage
Binary file not shown.
Binary file added ReStable.esproj/user.lareclame.espressostorage
Binary file not shown.
181 changes: 181 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<title>jQuery ReStable - Responsive tables to list jquery plugin</title>
<meta name="description" content="jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that makes table responsive making them collapse into ul lists.">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="jquery.restable.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.restable.js"></script>
<link rel="stylesheet" href="../jquery.restable.css">
<script>
$(window).ready(function () {
$('#table1').ReStable();
$('#table2').ReStable({rowHeaders:false});
});
</script>
</head>
<body>

<div class="container">

<h1>jQuery ReStable <span>v0.1.0</span></h1>

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

<a href="" class="download_button">Download it on GitHub</a>

<p>To use it you just have to include jQuery and a copy of the plugin in your head or footer:</p>
<pre>&#x3C;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&#x3E;&#x3C;/script&#x3E;
&#x3C;script type="text/javascript" src="jquery.restable.min.js"&#x3E;&#x3C;/script&#x3E;
&#x3C;link rel="stylesheet" href="jquery.restable.css"&#x3E;</pre>

<p>Let's say this is your table:</p>

<pre>&lt;table class="mytable"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;td&gt;Period&lt;/td&gt;
&lt;td&gt;Full Board&lt;/td&gt;
&lt;td&gt;Half Board&lt;/td&gt;
&lt;td&gt;Bed and Breakfast&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;01/10/12 - 02/10/12&lt;/td&gt;
&lt;td&gt;20 €&lt;/td&gt;
&lt;td&gt;30 €&lt;/td&gt;
&lt;td&gt;40 €&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;03/10/12 - 04/10/12&lt;/td&gt;
&lt;td&gt;40 €&lt;/td&gt;
&lt;td&gt;50 €&lt;/td&gt;
&lt;td&gt;60 €&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;05/10/12 - 06/10/12&lt;/td&gt;
&lt;td&gt;70 €&lt;/td&gt;
&lt;td&gt;80 €&lt;/td&gt;
&lt;td&gt;90 €&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>

<p>Now the only thing to do is to trigger the menu with:</p>

<pre>$(window).ready(function () {
$.ReStable();
});</pre>

<p>This will target automatically all the tables in the page but you can, off course, target one or more elements with:</p>

<pre>$(window).ready(function () {
$('.mytable').ReStable();
});</pre>
<p>If you need more control here's the plugin settings:</p>
<pre>$('.toresponsive').ReSmenu({
rowHeaders: true, // Table has row headers?
maxWidth: 480 // Size to which the table become responsive
});</pre>

<h2>Some examples</h2>

<span class="title">Example A - Responsive Pricelist Table (with row headers)</span>

<table id="table1">
<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>

<pre>$('#table1').ReStable();</pre>

<span class="title">Example B - Responsive Columns Table (without row headers)</span>

<table id="table2">
<thead>
<tr>
<td>Carbon</td>
<td>Hydrogen</td>
<td>Nitrogen</td>
<td>Oxygen</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>15</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>8</td>
<td>11</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>12</td>
<td>17</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>14</td>
<td>19</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

<pre>$('#table2').ReStable({
rowHeaders : false
});</pre>

<h2>Credits and contacts</h2>

<p><strong>ReStable</strong> has been made by <a href="http://codeb.it" target="_blank">me</a>. You can contact me at <a href="mailto:[email protected]">[email protected]</a> or <a href="https://twitter.com/Micc1983" target="_blank">twitter</a> for any issue or feauture request.</p>


</div>

</body>
</html>
19 changes: 19 additions & 0 deletions demo/main.css
Original file line number Diff line number Diff line change
@@ -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;}
36 changes: 36 additions & 0 deletions jquery.restable.css
Original file line number Diff line number Diff line change
@@ -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;
}
129 changes: 129 additions & 0 deletions jquery.restable.js
Original file line number Diff line number Diff line change
@@ -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 = $('<ul/>', {
class: 'tabletolist ' + ((s.rowHeaders) ? 'rh' : 'nrh'),
id: 'tabletolist' + i
}).insertBefore($(element));
$.each($result, function (index, value) {

var $myrow = $('<li/>', {
html: '<span class="titles">' + index + '</span>'
}).appendTo($list);

var $myrowul = $('<ul/>').appendTo($myrow);

$.each(value, function (index, value) {

$('<li/>', {
html: (s.rowHeaders) ? '<span class="row_headers">' + index + '</span> <span class="row_data">' + value + '</span>' : value
}).appendTo($myrowul);

});

});

return $list;

}

// Let's do it
this.each(function () {

var element = $(this),
responsive_table;

i++;

// The responsive menu is built if the page size is or goes under maxWidth
function handle_table() {

if ($(window).width() > parseInt(s.maxWidth)) {

$(element).show();

if (responsive_table) {
$(responsive_table).hide();
}

} else {

$(element).hide();

if (responsive_table) {
$(responsive_table).show();
} else {
responsive_table = create_responsive_table(element, i);
}

}

}

// At first
handle_table();

// Then at the resizing of the page
$(window).resize(function () {
handle_table();
});

});

};

$.ReStable = function (options) {
$('table').ReStable(options);
};

})(jQuery, this, 0);
1 change: 1 addition & 0 deletions jquery.restable.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions jquery.restable.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 94eefa9

Please sign in to comment.