diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..eb79dd5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +.idea diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 8c1a591..9b18eb0 --- a/README.md +++ b/README.md @@ -59,7 +59,8 @@ 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 + maxWidth: 480, // Size to which the table become responsive + keepHtml: false // Keep the html content of cells }); ## Credits and contacts diff --git a/bower.json b/bower.json old mode 100644 new mode 100755 index 960b533..a777c83 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ReStable", - "version": "0.1.1", + "version": "0.1.2", "description": "jQuery plugin that make tables responsive", "keywords": [ "table", diff --git a/demo/index.html b/demo/index.html old mode 100644 new mode 100755 index 3233608..d938b57 --- a/demo/index.html +++ b/demo/index.html @@ -1,41 +1,47 @@ - - - - - jQuery ReStable - Responsive tables to list jquery plugin - - - - - - + + + + + + - - - -
- -

jQuery ReStable v0.1.1

- -

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

+
+    
jQuery ReStable v0.1.2

+
+    
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.min.css">

+<link rel="stylesheet" href="jquery.restable.min.css">
-

Let's say this is your table:

- - 
<table class="mytable">
+    
Let's say this is your table:

+            
+            
<table class="mytable">
     <thead>
         <tr>
             <td>Period</td>
@@ -64,117 +70,172 @@ 
jQuery ReStable v0.1.1

             <td>90 €</td>
         </tr>
     </tbody>
-</table>

-			
-			
Now the only thing to do is to trigger the action with:

-			
-			
$(window).ready(function () {
+</table>

+
+    
Now the only thing to do is to trigger the action 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:

+

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

- 
$(window).ready(function () {
+            
$(window).ready(function () {
     $('.mytable').ReStable();
-});

-			
If you need more control here's the plugin settings:

-			        
$('.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
-});

-			
-			
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({
+    maxWidth: 480, // Size to which the table become responsive
+    keepHtml: false // Keep the html content of cells
+});

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

+
+    Example C - Responsive Columns Table with html support (without row headers)
+
+    
+        
+        
+            
+            
+            
+            
+        
+        
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+            
+            
+            
+            
+        
+        
+    
AvatarUsernameEmailDescription
Pincopinco@example.it
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie vulputate
+                lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae lacinia. Suspendisse
+                lorem nibh, gravida aliquam arcu in, iaculis consectetur nisl. Pellentesque eu mattis sapien.
Pallinopallino@example.it
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Asdrubaleasdrubale@example.it
+                
Nulla molestie vulputate lectus, eu aliquam erat cursus ac. Etiam finibus pellentesque turpis vitae
+                    lacinia.

+                
    
+                    
  • Element 1
    • 
+                    
  • Element 2
    • 
+                    
  • Element 3
    • 
+                

+            

+
+            
$('#table3').ReStable({
+    keepHtml : true,
     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.

-			        
-		
-
- - +}); + +

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

+ + + + + diff --git a/demo/main.css b/demo/main.css old mode 100644 new mode 100755 index a966d2a..01365c8 --- a/demo/main.css +++ b/demo/main.css @@ -2,7 +2,7 @@ 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;} +p, ul {color: #444;} h1 span {color: #ddd;font-size: 26px;} .title {font-weight: 800;font-size: 12px;text-transform: uppercase;padding: 15px 0;display: block;} @@ -16,4 +16,5 @@ table {width: 100%;text-align: center;border: 0;border-collapse: collapse;border table td, table th {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 +table tbody tr:hover td{background-color: #eee;} +table img {max-width: 100px;} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100755 index 0000000..bd9112b --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,36 @@ + +'use strict'; + +var gulp = require('gulp'); +var $ = require('gulp-load-plugins')(); + +var pkg = require('./package.json'); +var banner = ['/**', + ' * <%= pkg.name %> - <%= pkg.description %>', + ' * @version v<%= pkg.version %>', + ' * @link <%= pkg.homepage %>', + ' * @license <%= pkg.license %>', + ' */', + ''].join('\n'); + +gulp.task('minify-css', function () { + return gulp.src('jquery.restable.css') + .pipe($.csso()) + .pipe($.rename({suffix: '.min'})) + .pipe($.header(banner, {pkg:pkg})) + .pipe(gulp.dest('')) + .pipe($.size()); +}); + +gulp.task('minify-js', function () { + return gulp.src('jquery.restable.js') + .pipe($.jshint()) + .pipe($.jshint.reporter('jshint-stylish')) + .pipe($.uglify()) + .pipe($.rename({suffix: '.min'})) + .pipe($.header(banner, {pkg:pkg})) + .pipe(gulp.dest('')) + .pipe($.size()); +}); + +gulp.task('default', ['minify-css', 'minify-js']); diff --git a/jquery.restable.css b/jquery.restable.css old mode 100644 new mode 100755 index 7b55291..798bfaa --- a/jquery.restable.css +++ b/jquery.restable.css @@ -1,6 +1,10 @@ /* Table */ ul.tabletolist { - border-bottom: 2px solid #eee;font-size: 14px; + border-bottom: 2px solid #eee;font-size: 14px;margin:0 0 20px 0; +} +/* Image */ +ul.tabletolist img { + max-width: 100%; } /* Table with no row headers */ ul.tabletolist.nrh { @@ -11,30 +15,45 @@ ul.tabletolist.nrh > li { border-top: 2px solid #ddd; } /* Table defaults */ -ul.tabletolist, ul.tabletolist ul { - padding:0 !important;margin:0 !important;list-style:none !important; +ul.tabletolist, ul.tabletolist > li > ul { + padding:0 !important;list-style:none !important; +} +/* Inner list */ +ul.tabletolist > li > ul { + margin:0 !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 { +ul.tabletolist > li > ul > li { font-weight:200;border-bottom:1px solid #eee;padding:10px; } /* Table rows hover */ -ul.tabletolist ul > li:hover { +ul.tabletolist > li > ul > li:hover { background-color: #efefef } /* Table last child row */ -ul.tabletolist ul > li:last-child { +ul.tabletolist > li > ul > li:last-child { border-bottom:none; } /* Table row header */ ul.tabletolist ul > li .row_headers { - font-size:12px; + font-size:12px;max-width: 40%;float:left;margin-right: 3%; } /* Table row data */ ul.tabletolist ul > li .row_data { - float:right;font-weight:800; + float:right;font-weight:800;max-width: 57%; +} +/* Clearfix */ +ul.tabletolist > li > ul > li {*zoom: 1;} +ul.tabletolist > li > ul > li:before, ul.tabletolist > li > ul > li:after {content: " ";display: table;} +ul.tabletolist > li > ul > li:after {clear: both;} +/* Html table row data */ +ul.tabletolist ul > li .row_data.html { + font-weight: 400; +} +ul.tabletolist ul > li .row_data.html ul { + list-style-type: disc; } diff --git a/jquery.restable.js b/jquery.restable.js old mode 100644 new mode 100755 index 083e154..c523f90 --- a/jquery.restable.js +++ b/jquery.restable.js @@ -1,4 +1,3 @@ -/*! ReStable v0.1.1 by Alessandro Benoit */ (function ($, window, i) { 'use strict'; @@ -8,7 +7,8 @@ // Settings var s = $.extend({ rowHeaders: true, - maxWidth: 480 + maxWidth: 480, + keepHtml: false }, options); // Build the responsive menu container and fill it with build_menu() @@ -41,10 +41,18 @@ if (s.rowHeaders) { if (!$result[value]) { $result[value] = {}; } - $result[value][$row.children('td:nth-child(1)').text()] = $row.children('td:nth-child(' + (index + 1) + ')').text(); + if(s.keepHtml) { + $result[value][$row.children('td:nth-child(1)').html()] = $row.children('td:nth-child(' + (index + 1) + ')').html(); + } else { + $result[value][$row.children('td:nth-child(1)').text()] = $row.children('td:nth-child(' + (index + 1) + ')').text(); + } } else { if (!$result[$row_number]) { $result[$row_number] = {}; } - $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').text(); + if (s.keepHtml){ + $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').html(); + } else { + $result[$row_number][value] = $row.children('td:nth-child(' + index + ')').text(); + } } }); @@ -66,7 +74,8 @@ $.each(value, function (index, value) { $('
  • ', { - html: '' + index + ' ' + value + '' + 'class': 'cf', + html: '' + index + ' ' + value + '' }).appendTo($myrowul); }); diff --git a/jquery.restable.min.css b/jquery.restable.min.css old mode 100644 new mode 100755 index 62e415b..37097d4 --- a/jquery.restable.min.css +++ b/jquery.restable.min.css @@ -1 +1,7 @@ -ul.tabletolist{border-bottom:2px solid #eee;font-size:14px}ul.tabletolist.nrh{border-bottom:2px solid #ddd}ul.tabletolist.nrh > li{border-top:2px solid #ddd}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 +/** + * jquery-restable - jQuery plugin that make tables responsive + * @version v0.1.2 + * @link http://codeb.it/restable/ + * @license MIT + */ +ul.tabletolist{border-bottom:2px solid #eee;font-size:14px;margin:0 0 20px}ul.tabletolist img{max-width:100%}ul.tabletolist.nrh{border-bottom:2px solid #ddd}ul.tabletolist.nrh>li{border-top:2px solid #ddd}ul.tabletolist,ul.tabletolist>li>ul{padding:0!important;list-style:none!important}ul.tabletolist>li>ul{margin:0!important}ul.tabletolist>li .titles{background-color:#bbb;display:block;color:#fff;padding:10px;font-weight:800}ul.tabletolist>li>ul>li{font-weight:200;border-bottom:1px solid #eee;padding:10px}ul.tabletolist>li>ul>li:hover{background-color:#efefef}ul.tabletolist>li>ul>li:last-child{border-bottom:none}ul.tabletolist ul>li .row_headers{font-size:12px;max-width:40%;float:left;margin-right:3%}ul.tabletolist ul>li .row_data{float:right;font-weight:800;max-width:57%}ul.tabletolist>li>ul>li{*zoom:1}ul.tabletolist>li>ul>li:before{content:" ";display:table}ul.tabletolist>li>ul>li:after{content:" ";display:table;clear:both}ul.tabletolist ul>li .row_data.html{font-weight:400}ul.tabletolist ul>li .row_data.html ul{list-style-type:disc} \ No newline at end of file diff --git a/jquery.restable.min.js b/jquery.restable.min.js old mode 100644 new mode 100755 index ac3af6d..a991c31 --- a/jquery.restable.min.js +++ b/jquery.restable.min.js @@ -1,2 +1,7 @@ -/*! ReStable v0.1.1 by Alessandro Benoit */ -(function(e,t,n){"use strict";e.fn.ReStable=function(r){function o(t,n){var r=[],i={},o=e(t).find("tr").first().children("td,th"),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+=1;e.each(r,function(e,n){e+=1;if(s.rowHeaders){if(!i[n]){i[n]={}}i[n][t.children("td:nth-child(1)").text()]=t.children("td:nth-child("+(e+1)+")").text()}else{if(!i[u]){i[u]={}}i[u][n]=t.children("td:nth-child("+e+")").text()}})});a=e("