Doc and skeleton files for panels plugin.

939c2757 · Thomas Lechauve · 669c7a5e · 939c2757 · 939c2757 · 939c2757
Commit 939c2757 authored Aug 31, 2012 by Thomas Lechauve
Hide whitespace changes
Inline Side-by-side

Showing with 154 additions and 0 deletions

vifib/doc_panels.md vifib/doc_panels.md +60 -0

vifib/js/jqm.panel.js vifib/js/jqm.panel.js +45 -0

vifib/js/jqm.panelcontainer.js vifib/js/jqm.panelcontainer.js +49 -0

No files found.
--- a/vifib/doc_panels.md
+++ b/vifib/doc_panels.md
+# How should be an html page using jquery mobile panel#
+
+`
+<html>
+  <head>
+  </head>
+  <body>
+    <!-- Anatomy of page using panels -->
+     <div data-role="page">
+       <!-- MENU -->
+       <section data-role="panel" data-panel="menu">
+         <header data-role="header">Menu</header>
+         <nav>
+          <ul data-role="listview">
+            <li>List 1</li>
+            <li>List 2</li>
+            <li>List 3</li>
+          </ul>
+         </nav>
+         <footer data-role="footer">Menu</footer>
+       </section>
+       <!-- LIST -->
+       <section data-role="panel" data-panel="list">
+         <header data-role="header">List 1</header>
+         <nav>
+          <ul data-role="listview">
+            <li>Item 1</li>
+            <li>Item 2</li>
+            <li>Item 3</li>
+          </ul>
+         </nav>
+         <footer data-role="footer">List 1</footer>
+       </section>
+       <!-- ITEM -->
+       <section data-role="panel" data-panel="item">
+         <header data-role="header">Item 1</header>
+         <article>
+         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum lectus ut mauris ornare eu vestibulum arcu consectetur. Fusce massa elit, sollicitudin a iaculis at, accumsan sodales mi. Nulla ultrices placerat tellus, in lobortis lacus bibendum et. Ut mattis volutpat nunc ac auctor. Donec consequat venenatis facilisis. Vivamus metus leo, luctus faucibus vehicula rhoncus, placerat vitae ligula. Morbi sed risus ante, non sagittis augue. Nulla facilisi. Fusce vitae ipsum eget tortor cursus molestie. Etiam at nisl elit, vel dictum ipsum. In hac habitasse platea dictumst. In nisi metus, consequat id rutrum quis, rutrum sit amet leo.
+         </article>
+         <footer data-role="footer">Item 1</footer>
+       </section>
+     </div>
+  </body>
+</html>
+`
+
+# References #
+
+## Examples ##
+
+* [3 Column jQuery iPad Layout Bootstrap](http://www.jquery4u.com/demos/3-column-ipad-layout)
+  [(demo)](http://www.jquery4u.com/demos/3-column-ipad-layout/)
+* [JQM Multiview Plugin](https://github.com/frequent/multiview#readme)
+  [(demo)](http://www.stokkers.mobi/jqm/multiview/demo.html)
+* [Official widgets](https://github.com/jquery/jquery-mobile/tree/master/js/widgets)
+
+## Howtos ##
+
+* [Official Creating jQuery Mobile Plugins](https://github.com/jquery/jquery-mobile/wiki/Creating-jQuery-Mobile-Plugins)
+* [Widget Factory](http://ajpiano.com/widgetfactory/)
--- a/vifib/js/jqm.panel.js
+++ b/vifib/js/jqm.panel.js
+(function ($) {
+  $.widget('mobile.panel', $.mobile.widget, {
+    // Default options
+    options: {},
+    
+    /* This method create the panel
+     * it should fetch all information needed from html data-* attributes.
+     * per example data-panel-template could contain id of a template define
+     * in a script tag (see ICanHaz library)
+     * */
+    _create: function () {
+      // Trigger before create panel event
+      //
+      // [ ... ]
+      //
+      // Trigger after create panel event
+    },
+
+    // code snippet to sync options between this object and data-* attribute
+    // it will be useful for keep html tag up to date when dynamically adding options
+    _option: function (name, value) {
+      var $el = this.element;
+      if (value !== undefined) {
+        this.options[name] = value;
+        if (typeof value !== 'function') {
+          $el[0].dataset[name] = value;
+        }
+      }
+      return this.options[name] === undefined ? $el[0].dataset[name] : this.options[name];
+    },
+
+    /* public method to refresh the panel
+    /* Update a panel should refresh information inside itself
+     * without refreshing the entire webpage
+     * */
+    refresh: function () {
+    }
+  });
+
+  // This widget is bound to panelcontainer create event to init itself
+  $(document).bind('panelcontainercreate', function (e) {
+    // Call create metho
+  });
+
+}(jQuery));
--- a/vifib/js/jqm.panelcontainer.js
+++ b/vifib/js/jqm.panelcontainer.js
+(function ($) {
+  $.widget('mobile.panelcontainer', $.mobile.widget, {
+    // Default options
+    options: {},
+    
+    /* This method create the panelcontainer
+     * its role is to prepare the webpage to display one or any panel(s)
+     * This plugin will create panel html tags, per example:
+     * <section data-role="panel" data-panel-name="login" ... ></section>
+     * Once this plugin will finished its work, an event will be fire and catch by
+     * the panel plugin
+     * */
+    _create: function () {
+      // Trigger before create panelcontainer event
+      //
+      // [ ... ]
+      //
+      // Trigger after create panelcontainer event
+    },
+
+    // code snippet to sync options between this object and data-* attribute
+    // it will be useful for keep html tag up to date when dynamically adding options
+    _option: function (name, value) {
+      var $el = this.element;
+      if (value !== undefined) {
+        this.options[name] = value;
+        if (typeof value !== 'function') {
+          $el[0].dataset[name] = value;
+        }
+      }
+      return this.options[name] === undefined ? $el[0].dataset[name] : this.options[name];
+    },
+
+    /* public method to refresh the panelcontainer
+     * the main purpose of this method is to bind it to resize event in order to 
+     * react on window resizing event.
+     * */
+    refresh: function () {
+    }
+  });
+
+  // This widget may contain all routing stuff and be bound to the haschange event
+  // or be bound to pagecreate event in case of we want to separate routing process from
+  // rendering process.
+  $(document).bind('pagecreate', function (e) {
+    // Call create method
+  });
+
+}(jQuery));