From 94eefa93b88c81e9adadab83ba9d7b0e32e5a2bd Mon Sep 17 00:00:00 2001 From: La Reclame Date: Wed, 20 Nov 2013 13:30:48 +0100 Subject: [PATCH] First Commit --- ReStable.esproj/Project.espressostorage | Bin 0 -> 158 bytes .../user.lareclame.espressostorage | Bin 0 -> 2734 bytes demo/index.html | 181 ++++++++++++++++++ demo/main.css | 19 ++ jquery.restable.css | 36 ++++ jquery.restable.js | 129 +++++++++++++ jquery.restable.min.css | 1 + jquery.restable.min.js | 2 + 8 files changed, 368 insertions(+) create mode 100644 ReStable.esproj/Project.espressostorage create mode 100644 ReStable.esproj/user.lareclame.espressostorage create mode 100644 demo/index.html create mode 100644 demo/main.css create mode 100644 jquery.restable.css create mode 100644 jquery.restable.js create mode 100644 jquery.restable.min.css create mode 100644 jquery.restable.min.js diff --git a/ReStable.esproj/Project.espressostorage b/ReStable.esproj/Project.espressostorage new file mode 100644 index 0000000000000000000000000000000000000000..892ee382ce16fab65e52a0a66a14c7b27544f442 GIT binary patch literal 158 zcmYc)$jK}&F)+Bq$i&PNFJPLSpR1Rfm|T>Yl$2Sb=UQA)lv-SzuNP371XP!iS_ESS qrxul^78UFH7p0^Y#S7?@sBggn4qn&t3I;G>WQ5QRtWX+8RRRD24=(-y literal 0 HcmV?d00001 diff --git a/ReStable.esproj/user.lareclame.espressostorage b/ReStable.esproj/user.lareclame.espressostorage new file mode 100644 index 0000000000000000000000000000000000000000..3958d04c00b0df7e8be56568ea586f4a8b5264d5 GIT binary patch literal 2734 zcmc&$OKcle6uoc!nTgvZ<0OrfG=Dp7Qd+yN(zH~RHi=V6n_uHJ-=@>C=Q){V>>14) zr%7q)@GBr85G;_`kw$<(tXQ+)C$V5dTo3}ph6O^1g4iH-@WytW+D@9l25;WzS?|7k z&OP_s7ts`%7)Ot$5M#3oyf3Q8{c$m>i;;+I_%YFROo-~&baeqo4L>nN0}FgrUw9<5 zGa)A=^;+249(J>TM6%(&vcfr>4ULn&C9D%!O-%aKh!uiN`9wWBFVpQYpP_0MfNsC} zHp`V(dFn3t5=li#mALlo9rr~Qk&ua@uwN1l(PW0*=%<3{2M+Eo`nxPw=BcTz+uvGz z!8E-fo0!S1mYU4nl5!XCuCgv(#4E&P?^INpHq(A*U$yBloiiadnvCOwacOj5Dh+#V zMWc*#$7BVc3Ir52Dk}3TF#?we1s+gD9aAK690*~uNbv?nF+CPha6rOwH9+aZ%l>&I zu1tq;OiU`qm>5abH#9a)XBbG(vy+)mOa#7iC_I=O=kL zB8s9I(jfg~P-cZg*)_W$JyllDySG9=n*$P}l33#_D#s~m`nidhN~fA?g}+fC6|Q7= zQdwm)5-BF;OU_;AJ#y^C!)GpLGDRBzT=@WC)Dm!QTCwjJq|ws4yENWmId?_1r!kYv zU8^BV%kOImOPTj8*ST6|GON64o9$cHL@Ft%-@tK_D%n$6Wja>(nY6XL{+mKmR^x0{ zjY3(~)i-R&YO@|SwN1@=(!A5uP|WSR*GD}iqN~?v&-AK^m^_!%MN8d93OoaSX$8(e z4CY}06i9#uPg3PQ2hYQc@CkelDfk|Kf#2Xy_#4@g8&#nLr~{qNlqsjXw*0c89;w9JQlCF(J-jy?tL>vzV_WUS>pdUtH5~i6D)6a}Cv&6%%sD=A+;cwS?03HA{DQ4vhuK+HV6U z1x*voZyHwp+Tmomv_F*zJa1`?&PGdaX?0C!UkP+rULI4m0UR?%R5@X6PR^O^k+6K7 zJ|IxCz%c9f@6IsavJA6ww{~gYuuFmW7 zPXtdKKinJ)20L%g=DiN-KV89Nhnr7!9=}NyTMC_Ufji4x;I42ox5Sy;OD>1&yldPg M6(m}opQuaw2PwlZV*mgE literal 0 HcmV?d00001 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 = $('
    ', { + class: 'tabletolist ' + ((s.rowHeaders) ? 'rh' : 'nrh'), + id: 'tabletolist' + i + }).insertBefore($(element)); + $.each($result, function (index, value) { + + var $myrow = $('
  • ', { + html: '' + index + '' + }).appendTo($list); + + var $myrowul = $('
      ').appendTo($myrow); + + $.each(value, function (index, value) { + + $('
    • ', { + html: (s.rowHeaders) ? '' + index + ' ' + value + '' : 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); \ No newline at end of file diff --git a/jquery.restable.min.css b/jquery.restable.min.css new file mode 100644 index 0000000..0469ddf --- /dev/null +++ b/jquery.restable.min.css @@ -0,0 +1 @@ +ul.tabletolist{border-bottom:2px solid #eee;font-size:14px}ul.tabletolist.nrh{text-align:center}ul.tabletolist,ul.tabletolist ul{list-style:none!important;margin:0!important;padding:0!important}ul.tabletolist > li .titles{background-color:#bbb;color:#fff;display:block;font-weight:800;padding:10px}ul.tabletolist ul > li{border-bottom:1px solid #eee;font-weight:200;padding:10px}ul.tabletolist ul > li:hover{background-color:#efefef}ul.tabletolist ul > li:last-child{border-bottom:none}ul.tabletolist ul > li .row_headers{font-size:12px}ul.tabletolist ul > li .row_data{float:right;font-weight:800} \ No newline at end of file diff --git a/jquery.restable.min.js b/jquery.restable.min.js new file mode 100644 index 0000000..8a62ede --- /dev/null +++ b/jquery.restable.min.js @@ -0,0 +1,2 @@ +/*! ReStable v0.1 by Alessandro Benoit */ +(function(e,t,n){e.fn.ReStable=function(r){function o(t,n){var r=[],i={},o=e(t).find("tr").first().children("td"),u=0,a;if(s.rowHeaders){o=o.slice(1)}o.each(function(){r.push(e(this).text())});e(t).find("tr").slice(1).each(function(){var t=e(this);u++;e.each(r,function(e,n){e++;if(!i[n]){i[n]={}}if(s.rowHeaders){i[n][t.children("td:nth-child(1)").text()]=t.children("td:nth-child("+(e+1)+")").text()}else{i[n][u]=t.children("td:nth-child("+e+")").text()}})});a=e("
        ",{"class":"tabletolist "+(s.rowHeaders?"rh":"nrh"),id:"tabletolist"+n}).insertBefore(e(t));e.each(i,function(t,n){var r=e("
      • ",{html:''+t+""}).appendTo(a);var i=e("
          ").appendTo(r);e.each(n,function(t,n){e("
        • ",{html:s.rowHeaders?''+t+' '+n+"":n}).appendTo(i)})});return a}var s=e.extend({rowHeaders:true,maxWidth:480},r);this.each(function(){function a(){if(e(t).width()>parseInt(s.maxWidth)){e(r).show();if(u){e(u).hide()}}else{e(r).hide();if(u){e(u).show()}else{u=o(r,n)}}}var r=e(this),u;n++;a();e(t).resize(function(){a()})})};e.ReStable=function(t){e("table").ReStable(t)}})(jQuery,this,0) \ No newline at end of file