Merge pull request #1151 from adumesny/develop

added info on how to extend library

Author: adumesny

README.md

@@ -27,6 +27,7 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Basic usage](#basic-usage)
   - [Requirements](#requirements)
   - [API Documentation](#api-documentation)
+  - [Extend Library](#extend-library)
   - [Touch devices support](#touch-devices-support)
   - [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks)
   - [Change grid columns](#change-grid-columns)
@@ -127,6 +128,24 @@ Using gridstack.js with jQuery UI
 Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree/develop/doc).
 
 
+## Extend Library
+
+You can easily extend or patch gridstack with code like this:
+
+```javascript
+$(function () {
+  // extend gridstack with our own custom method
+  window.GridStackUI.prototype.printCount = function() {
+    console.log('grid has ' + this.grid.nodes.length + ' items');
+  };
+
+  $('.grid-stack').gridstack();
+
+  // you can now call on any grid this...
+  $('.grid-stack').data('gridstack').printCount();
+ });
+```
+
 ## Touch devices support
 
 Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable

demo/two.html

@@ -11,13 +11,6 @@
   <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <!--
-
-  <script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.3/dist/gridstack.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.3/dist/jquery-ui.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.3/dist/gridstack.jQueryUI.js"></script>
-    -->
-
   <script src="../dist/jquery-ui.min.js"></script>
   <script src="../src/gridstack.js"></script>
   <script src="../src/gridstack.jQueryUI.js"></script>