ソースを参照

Added mobile extension

Dennis Hernández 10 年 前
コミット
81d79ae0c9

+ 35 - 0
src/extensions/mobile/README.md

@@ -0,0 +1,35 @@
+# Table Mobile
+
+Use Plugin: [bootstrap-table-cookie](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/mobile)
+
+## Usage
+
+```html
+<script src="extensions/cookie/bootstrap-table-mobile.js"></script>
+```
+
+## Options
+
+### mobileResponsive
+
+* type: Boolean
+* description: Set true to change the view between card and table view depending on width and height given.
+* default: `false`
+
+### checkOnInit
+
+* type: Boolean
+* description: Set true to check the window size on init.
+* default: `false`
+
+### minWidth
+
+* type: Integer
+* description: Set the minimum width when the table will change the view.
+* default: `562`
+
+### minHeight
+
+* type: Integer
+* description: Set the minimum height when the table will change the view.
+* default: `562`

+ 61 - 0
src/extensions/mobile/bootstrap-table-mobile.js

@@ -0,0 +1,61 @@
+/**
+ * @author: Dennis Hernández
+ * @webSite: http://djhvscf.github.io/Blog
+ * @version: v1.0.0
+ */
+
+!function ($) {
+
+    'use strict';
+
+    var toggled = false;
+
+    var resetView = function (el) {
+        if (el.options.height || el.options.showFooter) {
+            setTimeout(el.resetView(), 1);
+        }
+    }
+
+    var changeView = function (el, width, height) {
+        if(width <= el.options.minWidth && height <= el.options.minHeight ){
+            if (!toggled) {
+                el.toggleView();
+                toggled = true;
+            }
+        } else if (width > el.options.minWidth && height > el.options.minHeight) {
+            if (toggled) {
+                el.toggleView()
+                toggled = false;
+            }
+        }
+
+        resetView(el);
+    }
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        mobileResponsive: false,
+        minWidth: 562,
+        minHeight: 562,
+        checkOnInit: false
+    });
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _init = BootstrapTable.prototype.init;
+
+    BootstrapTable.prototype.init = function () {
+        _init.apply(this, Array.prototype.slice.apply(arguments));
+
+        if (!this.options.mobileResponsive) {
+            return;
+        }
+
+        var that = this;
+        $(window).resize(function () {
+            changeView(that, $(this).width(), $(this).height())
+        });
+
+        if (this.options.checkOnInit) {
+            changeView(this, $(window).width(), $(window).height());
+        }
+    };
+}(jQuery);